* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #020302; }
body { font-family: Arial, Helvetica, sans-serif; color: #d9e2c2; }
.poster-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at center, rgba(170,255,0,.07), transparent 40%),
    #020302;
}
.poster-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}
.poster-wrap {
  position: relative;
  width: min(100vw, 941px);
  margin: 0 auto;
  line-height: 0;
}
.poster-image {
  display: block;
  width: 100%;
  height: auto;
}
.hotspot {
  position: absolute;
  display: block;
  background: rgba(255,255,255,0);
}
.hotspot:hover,
.hotspot:focus-visible {
  outline: 2px solid rgba(184,255,0,.9);
  outline-offset: 1px;
  background: rgba(184,255,0,.12);
}

/* top menu */
.nav-home { left: 59.0%; top: 1.8%; width: 7.0%; height: 3.2%; }
.nav-males { left: 69.0%; top: 1.8%; width: 11.8%; height: 3.2%; }
.nav-females { left: 82.3%; top: 1.8%; width: 13.0%; height: 3.2%; }
.nav-puppies { left: 86.5%; top: 1.8%; width: 10.7%; height: 3.2%; }
.nav-contact { left: 96.0%; top: 1.8%; width: 4.0%; height: 3.2%; }

/* main buttons */
.hero-puppies { left: 48.8%; top: 26.7%; width: 27.8%; height: 3.9%; }
.hero-dogs { left: 48.7%; top: 31.5%; width: 27.8%; height: 3.8%; }
.about-more { left: 38.6%; top: 45.0%; width: 28.5%; height: 3.8%; }
.males-link { left: 66.0%; top: 53.0%; width: 25.2%; height: 4.0%; }
.females-link { left: 66.0%; top: 60.5%; width: 25.2%; height: 4.0%; }
.puppies-link { left: 66.0%; top: 68.1%; width: 25.2%; height: 4.0%; }

/* footer */
.footer-home { left: 33%; top: 88.1%; width: 8%; height: 5%; }
.footer-contact { left: 33%; top: 93.4%; width: 9%; height: 3.5%; }
.footer-phone { left: 54.5%; top: 88.1%; width: 18%; height: 2.5%; }
.footer-email { left: 53%; top: 90.6%; width: 26%; height: 2.8%; }

.below-note {
  width: min(100vw, 941px);
  padding: 18px 16px 30px;
  line-height: 1.45;
  text-align: center;
  background: #020302;
}
.below-note h1 {
  margin: 0 0 8px;
  color: #b8ff00;
  font-size: 1.35rem;
}
.below-note p {
  margin: 0;
  color: #b8b8b8;
  font-size: .95rem;
}

@media (max-width: 941px) {
  .below-note { padding-inline: 14px; }
}