* {
  box-sizing: border-box;
}

:root {
  --page-bg: #f6f0e5;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.page-card {
  position: relative;
  width: 100vw;
  max-width: calc(100vh * var(--ratio));
  aspect-ratio: var(--aspect);
  overflow: hidden;
  background: var(--page-bg);
}

body.home {
  --aspect: 1500 / 1000;
  --ratio: 1.50000000;
}

body.about {
  --aspect: 1500 / 1000;
  --ratio: 1.50000000;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  display: block;
  z-index: 10;
  cursor: pointer;
  border-radius: 14px;
}

.hotspot:focus-visible {
  outline: 3px solid #b99a2d;
  outline-offset: 3px;
}

/*
  TESTING MODE:
  Uncomment this block to see clickable areas.
*/
/*
.hotspot {
  border: 2px solid red;
  background: rgba(255, 0, 0, 0.10);
}
*/

/* HOME PAGE - DESKTOP */
body.home .nav-home {
  left: 76.5%;
  top: 8.0%;
  width: 5.8%;
  height: 4.0%;
}

body.home .nav-about {
  left: 83.6%;
  top: 8.0%;
  width: 9.0%;
  height: 4.0%;
}

body.home .schedule-link {
  left: 34.0%;
  top: 62.0%;
  width: 32.0%;
  height: 9.5%;
}

body.home .email-link {
  left: 16.0%;
  top: 78.0%;
  width: 24.0%;
  height: 5.2%;
}

body.home .phone-link {
  left: 41.8%;
  top: 78.0%;
  width: 13.0%;
  height: 5.2%;
}

/* ABOUT PAGE - DESKTOP */
body.about .nav-home {
  left: 56.0%;
  top: 6.7%;
  width: 5.2%;
  height: 3.6%;
}

body.about .nav-about {
  left: 62.7%;
  top: 6.7%;
  width: 8.5%;
  height: 3.6%;
}

body.about .about-logo-home {
  left: 10.3%;
  top: 3.7%;
  width: 24.5%;
  height: 9.2%;
}

body.about .schedule-link {
  left: 71.7%;
  top: 4.6%;
  width: 19.8%;
  height: 6.8%;
}

body.about .email-link {
  left: 17.8%;
  top: 87.0%;
  width: 20.5%;
  height: 4.8%;
}

body.about .phone-link {
  left: 41.3%;
  top: 86.9%;
  width: 12.5%;
  height: 4.8%;
}

/* Search-readable and screen-reader accessible text that mirrors the image content */
.sr-only {
  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: 768px) {
  body {
    display: block;
    min-height: 100vh;
    overflow-y: auto;
  }

  .page-card {
    width: 100vw;
    max-width: none;
    height: auto;
    overflow: visible;
    box-shadow: none;
  }

  body.home {
    --aspect: 850 / 1795;
    --ratio: 0.47353760;
  }

  body.about {
    --aspect: 850 / 1838;
    --ratio: 0.46245919;
  }

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

  /* HOME PAGE - PHONE */
  body.home .nav-home {
    left: 36.8%;
    top: 6.2%;
    width: 10.0%;
    height: 2.8%;
  }

  body.home .nav-about {
    left: 52.0%;
    top: 6.2%;
    width: 16.0%;
    height: 2.8%;
  }

  body.home .schedule-link {
    left: 18.0%;
    top: 47.1%;
    width: 64.0%;
    height: 7.2%;
  }

  body.home .email-link {
    left: 21.0%;
    top: 58.6%;
    width: 61.0%;
    height: 4.7%;
  }

  body.home .phone-link {
    left: 21.0%;
    top: 66.0%;
    width: 40.0%;
    height: 4.5%;
  }

  /* ABOUT PAGE - PHONE */
  body.about .nav-home {
    left: 36.8%;
    top: 5.7%;
    width: 10.0%;
    height: 2.5%;
  }

  body.about .nav-about {
    left: 52.0%;
    top: 5.7%;
    width: 16.0%;
    height: 2.5%;
  }

  body.about .about-logo-home,
  body.about .schedule-link,
  body.about .email-link,
  body.about .phone-link {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
  }
}