* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #02060c;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #02060c;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.hero {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background: #02060c;
  isolation: isolate;
}

.hero__art {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Transparent links align with the navigation and play control in the artwork. */
.hotspot {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 999px;
  outline-offset: 4px;
}

.hotspot:focus-visible,
.social a:focus-visible {
  outline: 2px solid #dff4ff;
}

.hotspot--music {
  left: 46.8%;
  top: 61.5%;
  width: 6.5%;
  height: 9.5%;
}

.hotspot--nav-music {
  left: 35.5%;
  top: 4.5%;
  width: 6%;
  height: 5%;
}

.hotspot--nav-videos {
  left: 43%;
  top: 4.5%;
  width: 7%;
  height: 5%;
}

.hotspot--nav-about {
  left: 51.5%;
  top: 4.5%;
  width: 6%;
  height: 5%;
}

.hotspot--nav-contact {
  left: 59.5%;
  top: 4.5%;
  width: 7%;
  height: 5%;
}

.social {
  position: absolute;
  z-index: 2;
  left: 3.2%;
  bottom: 5.4%;
  display: flex;
  width: 23%;
  height: 5%;
}

.social a {
  flex: 1;
  min-width: 0;
  border-radius: 6px;
}

.screen-reader-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 700px) {
  /*
    Keep the original composition intact on phones. The artwork scales as a
    whole rather than cropping the planet or the central AWIO PLANET title.
  */
  .hero {
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .hero__art {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hotspot--music {
    left: 46.5%;
    top: 61%;
    width: 7%;
    height: 10%;
  }

  .social {
    bottom: 5.1%;
  }
}