@font-face {
  font-family: "font1";
  src: url(../fonts/ABCDiatypeEdu-Medium.woff2);
}
@font-face {
  font-family: "font2";
  src: url(../fonts/ABCDiatypeEdu-Regular.woff);
}

html {
  overflow-x: hidden;
}

body {
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  filter: blur(25px);
  animation: appear_blur 3.5s ease-out forwards;
}

.container-menu {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  gap: 2%;
  background-color: white;
  transition: opacity 1.5s ease-in-out;
  z-index: 10;
}

.menu-invisible {
  opacity: 0;
  z-index: -1;
}

.container-sound {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 1.5rem;
  cursor: pointer;
  opacity: 1;
  z-index: 20;
  transition: opacity 0.1s ease-in;
}

.container-sound:hover {
  opacity: 0.5;
}

.container-sound-on,
.sound-invisible {
  display: none;
}

.sound-visible {
  display: block;
}

#subtitle {
  font-family: font2;
}

#container-title {
  opacity: 1;
  width: 75vw;
  max-width: 65rem;
  padding: 1rem 1rem 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
  animation: grow 3s ease-out forwards;
}

#container-title:hover {
  opacity: 0.5;
}

#title {
  width: 100%;
  opacity: 0;
  animation: blur 5s linear infinite alternate,
    appear 3s cubic-bezier(0.44, -0.11, 0.23, 1) forwards;
}

#subtitle,
.gonext {
  color: rgba(79, 106, 126, 0.85);
}

#subtitle {
  opacity: 0;
  overflow: visible;
  font-size: clamp(1rem, 2vw, 1.3rem);
  animation: blur 5s linear infinite alternate,
    appear 3.5s cubic-bezier(0.44, -0.11, 0.23, 1) 0.2s forwards;
  cursor: default;
}

@keyframes appear {
  to {
    opacity: 1;
  }
}

@keyframes appear_blur {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes grow {
  to {
    width: 85vw;
  }
}

@keyframes blur {
  0% {
    filter: blur(0);
  }
  25% {
    filter: blur(1.5px);
  }
  50% {
    filter: blur(0.5px);
  }
  75% {
    filter: blur(1px);
  }
  100% {
    filter: blur(0.5px);
  }
}

@media (max-width: 800px) {
  #subtitle {
    text-align: center;
    width: 50vw;
  }
}