* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pageMargin: 2rem;
  --fontSize: 20px;
  --backgroundColor: rgba(255, 255, 255, 1);
  --fontColor: rgba(37, 37, 37, 0.8);
  --shadowColor: rgba(37, 37, 37, 0.2);
  --circleColorEmpty: rgba(255, 255, 255, 1);
  --circleColorFull: var(--backgroundColor);
  --animateCircleDuration: 16s;
}

@media screen and (max-width: 600px) {
  :root {
    --pageMargin: 1rem;
    --fontSize: 18px;
  }
}

html {
  overscroll-behavior: none;
}

html,
body {
  background-color: #fff;
  background-color: var(--backgroundColor);
  font-family: Barlow, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Avenir Next", Avenir, Noto, Roboto, sans-serif;
  color: rgba(37, 37, 37, 0.8);
  color: var(--fontColor);
  line-height: 1.5;
  font-size: 20px;
  font-size: var(--fontSize);
  height: 100dvh;
  width:  100dvw;
}

a,
a:visited {
  color: inherit;
}

.isHidden {
  display: none !important;
}

#animationContainer,
.menuContainer {
  top: 0;
  left: 0;
  height: 100dvh;
  width:  100dvw;
  position: absolute;
  overscroll-behavior: none;
}

#animationContainer {
  background-color: var(--backgroundColor);
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-rows: 100vh;
  grid-template-columns: 100vw;
  align-items: center;
  justify-items: center;
  overflow: hidden;
}

#circle {
  width: 300px;
  height: 300px;
  width: clamp(240px, 50vw, 60vh);
  height: clamp(240px, 50vw, 60vh);
  border-radius: 9999px;
  background-color: var(--circleColorEmpty);
  box-shadow: 0 0 30px 20px rgba(37, 37, 37, 0.2);
  box-shadow: 0 0 30px 20px var(--shadowColor);
  animation-name: animateCircle;
  animation-timing-function: cubic-bezier(.61, .39, .87, 1.21);
  animation-duration: 16s;
  animation-duration: var(--animateCircleDuration);
  animation-iteration-count: infinite;
  transform-style: flat;
}

.menuContainer {
  z-index: 100;
  background: rgba(250, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 8rem 4rem;
  padding: 8rem var(--pageMargin);
  overflow: scroll;
  display: none;
}

.menuContainer.isActive {
  display: block;
}

.menu {
  height: 100%;
  width: 24rem;
  max-width: 100%;
}

@media screen and (min-width: 60rem) and (min-height: 40rem) {
  .menu {
    width: 100%;
    max-width: 52rem;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2rem;
  }
}

.menu section {
  break-inside: avoid;
}

h1 {
  margin: 0 0 1.333rem;
  font-weight: normal;
  font-size: 1.5rem;
}

p {
  margin: 1.333rem 0;
}

#buttonCollection {
  position: absolute;
  right: var(--pageMargin);
  bottom: var(--pageMargin);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

#showMenuButton,
#closeMenuButton,
#enterFullScreenButton,
#exitFullScreenButton {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
}

#closeMenuButton {
  position: absolute;
  top: var(--pageMargin);
  right: var(--pageMargin);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

#closeMenuButton .buttonText {
  margin-left: 0.4rem;
}

@keyframes animateCircle {
  0% {
    transform: scale3d(1, 1, 1);
    /* background-color: var(--circleColorEmpty); */
  }

  23% {
    /* End color animation a little bit earlier to avoid ugly
        interpolation due to the vezier function exceeding 1.0. */
    /* background-color: var(--circleColorFull); */
  }

  25% {
    transform: scale3d(1.2, 1.2, 1.4);
  }

  50% {
    transform: scale3d(1.2, 1.2, 1.4);
    /* background-color: var(--circleColorFull); */
  }

  73% {
    /* background-color: var(--circleColorEmpty); */
  }

  75% {
    transform: scale3d(1, 1, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: normal;
  src:
        url("/assets/fonts/Barlow-Regular.woff2") format("woff2");
}