html, body {
  margin: 0;
  padding: 0;
  background: #f7f8f1;
}

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.page {
  position: relative;
  width: 100%;
}

.page-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Transparent clickable areas */
.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  z-index: 10;
}

/*
  TOP NAVIGATION
  These areas are deliberately kept narrow and separated so that
  clicking one menu item cannot accidentally activate another.
*/
.nav-home {
  top: 0;
  right: 20.5%;
  width: 4.2%;
  height: 3%;
}

.nav-about {
  top: 0;
  right: 13.2%;
  width: 5.2%;
  height: 3%;
}

.nav-registration {
  top: 0;
  right: 5.1%;
  width: 7.1%;
  height: 3%;
}

.nav-faqs {
  top: 0;
  right: 0.7%;
  width: 3.5%;
  height: 3%;
}

/* Home page cards */
.home-about {
  top: 52%;
  left: 3%;
  width: 29%;
  height: 18%;
}

.home-registration {
  top: 52%;
  left: 35.5%;
  width: 29%;
  height: 18%;
}

.home-faqs {
  top: 52%;
  left: 68%;
  width: 29%;
  height: 18%;
}

/* Registration QR code area */
.registration-link {
  top: 8%;
  right: 7%;
  width: 40%;
  height: 38%;
}

/* Bottom CTA buttons */
.see-faqs {
  bottom: 1.5%;
  right: 25%;
  width: 19%;
  height: 7%;
}

.email-link {
  bottom: 1.5%;
  right: 4%;
  width: 19%;
  height: 7%;
}

/* Keep navigation easy to click on smaller screens,
   while preserving separation between links. */
@media (max-width: 700px) {
  .nav-home {
    right: 20%;
    width: 6%;
    height: 5%;
  }

  .nav-about {
    right: 12%;
    width: 7%;
    height: 5%;
  }

  .nav-registration {
    right: 4%;
    width: 8%;
    height: 5%;
  }

  .nav-faqs {
    right: 0;
    width: 4%;
    height: 5%;
  }
}