:root {
  color-scheme: dark;
  background: #020712;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020712; }
body {
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.site-shell {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0;
  background: #020712;
  line-height: 0;
}

.site-image {
  display: block;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 3;
  outline-offset: 3px;
}
.hotspot:focus-visible {
  outline: 2px solid #7fd7ff;
  background: rgba(127, 215, 255, .12);
}

/* Hotspots based on the supplied 1536 x 1024 full-width design. */
.nav-home     { left: 31.2%; top: 2.3%; width: 4.5%; height: 4.2%; }
.nav-comics   { left: 38.0%; top: 2.3%; width: 5.2%; height: 4.2%; }
.nav-universe { left: 45.1%; top: 2.3%; width: 6.4%; height: 4.2%; }
.nav-shop     { left: 53.0%; top: 2.3%; width: 4.5%; height: 4.2%; }
.nav-news     { left: 58.8%; top: 2.3%; width: 4.4%; height: 4.2%; }
.nav-contact  { left: 64.0%; top: 2.3%; width: 5.8%; height: 4.2%; }

.social-facebook  { left: 81.7%; top: 2.0%; width: 2.0%; height: 4.0%; }
.social-instagram { left: 86.1%; top: 2.0%; width: 2.1%; height: 4.0%; }
.social-youtube   { left: 90.3%; top: 2.0%; width: 2.4%; height: 4.0%; }
.social-email     { left: 94.0%; top: 2.0%; width: 2.6%; height: 4.0%; }

.explore       { left: 39.0%; top: 32.8%; width: 21.0%; height: 4.5%; }
.riptide-learn { left: 10.3%; top: 66.5%; width: 10.6%; height: 3.6%; }
.v-learn       { left: 52.0%; top: 66.8%; width: 8.8%; height: 3.2%; }
.universe-card { left: 5.4%;  top: 72.0%; width: 29.5%; height: 10.2%; }
.comics-card   { left: 35.4%; top: 72.0%; width: 28.2%; height: 10.2%; }
.shop-card     { left: 64.0%; top: 72.0%; width: 30.0%; height: 10.2%; }

@media (max-width: 900px) {
  .site-image {
    width: 160vw;
    margin-left: -30vw;
    max-width: none;
  }
  .hotspot { display: none; }
}