* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background: #dff8f1;
  color: #10251e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nav-page {
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100dvh;
  overflow: hidden;
  background: #dff8f1;
}

.nav-stage {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  max-height: 100dvh;
  aspect-ratio: 16 / 9;
}

.nav-stage picture,
.nav-poster {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-poster {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.nav-hotspots {
  position: absolute;
  inset: 0;
}

.nav-hotspot {
  position: absolute;
  left: 37.2%;
  width: 25.6%;
  height: 6.9%;
  border-radius: 7px;
  outline-offset: 2px;
}

.nav-hotspot-0 {
  top: 49.7%;
}

.nav-hotspot-1 {
  top: 59%;
}

.nav-hotspot-2 {
  top: 68.3%;
}

.nav-hotspot-3 {
  top: 77.6%;
}

.nav-hotspot-4 {
  top: 86.9%;
}

@media (max-width: 767px) {
  .nav-stage {
    width: min(100vw, calc(100dvh * 9 / 16));
    aspect-ratio: 9 / 16;
  }

  .nav-hotspot {
    left: 6.7%;
    width: 86.6%;
    height: 5.2%;
    border-radius: 6px;
  }

  .nav-hotspot-0 {
    top: 46.6%;
  }

  .nav-hotspot-1 {
    top: 53.9%;
  }

  .nav-hotspot-2 {
    top: 61.1%;
  }

  .nav-hotspot-3 {
    top: 68.4%;
  }

  .nav-hotspot-4 {
    top: 75.8%;
  }
}