html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

@font-face {
  font-family: CervoNeue;
  src: url("/assets/fonts/CervoNeue-LightNeue.otf");
  font-weight: light;
}

@font-face {
  font-family: CervoNeue;
  src: url("/assets/fonts/CervoNeue-BoldNeue.otf");
  font-weight: bold;
}

:root {
  --font-cervo: "CervoNeue", sans-serif;
  --header-height: 20vh;
  --side-margin: 10%;
}


@keyframes handTap {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.9); }
  35%  { transform: scale(1.05); }
  40%  { transform: scale(1); }
  100% { transform: scale(1); }
}

#click-hand {
  position: absolute;
  width: 240px;
  height: 240px;
  pointer-events: none; /* important: click goes through */
  animation: handTap 3s ease-in-out infinite;
  z-index: 50;
}

/* #app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: black;
} */

/* #header-area {
  height: var(--header-height);
  width: 100%;
  position: relative;
  flex-shrink: 0;
} */

.logo-img {
  position: absolute;
  top: 40px;
  left: 50px;
  max-height: calc(var(--header-height) - 60px);
  width: auto;
}

/* SVG Wrapper: The available space */
/* #svg-wrapper {

  padding: 0 var(--side-margin); /* 10% margins */
  /* box-sizing: border-box; */

  /* Flex centering */
  /* display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; */
/* }  */

/* Container that holds the Ratio */
/* .aspect-ratio-box { */

  /* Logic to fit within parent without overflowing */
  /* max-width: 100%;
  max-height: 100%; */

  /* Default to width-based sizing */
  /* width: 100%;
  height: auto; */

  /* Shadow to lift it off the background */
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); */
/* } */

/* Switch to height-based sizing if the screen is wider than 16:9 */
/* Since available space scales with viewport, we can use viewport ratio approximation */
/* @media (min-aspect-ratio: 16/9) {
  .aspect-ratio-box {
    height: 100%;
    width: auto;
  }
} */

svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bottom-bar-wrapper, #bottom-bar {
  pointer-events: none;
}

.bottom-bar-button {
  pointer-events: auto;
}

#viewport-group *[id] {
  cursor: pointer;
}

/* --- Lightbox Styles --- */
#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}
#lightbox-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  max-width: 60%;
  max-height: 80%;
  overflow-y: auto;
  cursor: default;
}
#lightbox-close {
  position: absolute;
  top: -14px;
  right: 15px;
  font-size: 100px;
  font-weight: lighter;
  color: #c1c1c1;
  cursor: pointer;
}
#lightbox-content {
  padding-top: 20px;
}

.lightbox-styling {
  font-family: var(--font-cervo);
  display: flex;
  flex-direction: column;
  align-items: center;
  h1 {
    margin: 0;
    color: #0072bc;
    font-size: 3rem;
  }
  h2 {
    color: #7b7d80;
    font-size: 2.5rem;
  }
}

.lightbox-img  {
  max-width: 100%;
}

.lightbox-subheader {
  display: flex;
  align-items: baseline;
  h1 {
    margin: 0 0 0 5px;
  }
}


/*** Bottom Bar ***/

#bottom-bar {
  z-index: 10000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: var(--font-cervo);
  color: white;
  transition: background-color 0.2s;
  text-align: center;
}

.bottom-bar-wrapper {
  display: flex;
  padding-left: 20px;
  padding-bottom: 20px;
}

.bottom-bar-wrapper > div {
  background-color: #0169b4;
  margin: 10px;
  cursor: pointer;
  box-shadow: 2px 2px 20px rgb(98, 100, 103);
}

.home {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  svg {
    height: 44px;
    width: 44px;
  }
}

.back {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  padding: 0 40px;
  font-weight: bold;
  line-height: 40px;
}

.bottom-bar-wrapper > div:hover {
  background-color: #015a9c;
}