main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: var(--navbarblur);
   font-family: "Press Start 2P", system-ui;
}

main h1 {
   font-size: 3rem;
   color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
   text-align: center;
}

@media (max-width: 768px) {
   main h1 {
      font-size: 2.2rem;
   }
}

@media (max-width: 480px) {
   main h1 {
      font-size: 1.7rem;
   }
}

main p {
   font-size: 1.5rem;
   color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
   text-align: center;
}

@media (max-width: 768px) {
   main p {
      font-size: 1rem;
      margin-left: 10px;
      margin-right: 10px;
   }
}

@media (max-width: 480px) {
   main p {
      font-size: 0.9rem;
      margin-left: 10px;
      margin-right: 10px;
   }
}

main a {
   font-size: 1.5rem;
   color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   margin-top: 1rem;
   flex-wrap: wrap;
   text-align: center;
   transition: all 0.2s ease;
}

main a:hover {
   text-decoration: underline var(--btn3);
   color: var(--btn3);
}

@media (max-width: 768px) {
   main a {
      font-size: 1.2rem;
   }
}

@media (max-width: 480px) {
   main a {
      font-size: 1rem;
   }
}

body {
   margin: auto;
   overflow: auto;
   background: linear-gradient(
      315deg,
      rgba(101, 0, 94, 1) 3%,
      rgba(60, 132, 206, 1) 38%,
      rgba(48, 238, 226, 1) 68%,
      rgba(255, 25, 25, 1) 98%
   );
   animation: gradient 15s ease infinite;
   background-size: 400% 400%;
   background-attachment: fixed;
}

@keyframes gradient {
   0% {
      background-position: 0% 0%;
   }
   50% {
      background-position: 100% 100%;
   }
   100% {
      background-position: 0% 0%;
   }
}

.wave {
   background: rgb(255 255 255 / 25%);
   border-radius: 1000% 1000% 0 0;
   position: fixed;
   width: 200%;
   height: 12em;
   animation: wave 10s -3s linear infinite;
   transform: translate3d(0, 0, 0);
   opacity: 0.8;
   bottom: 0;
   left: 0;
   z-index: -1;
}

.wave:nth-of-type(2) {
   bottom: -1.25em;
   animation: wave 18s linear reverse infinite;
   opacity: 0.8;
}

.wave:nth-of-type(3) {
   bottom: -2.5em;
   animation: wave 20s -1s reverse infinite;
   opacity: 0.9;
}

@keyframes wave {
   2% {
      transform: translateX(1);
   }

   25% {
      transform: translateX(-25%);
   }

   50% {
      transform: translateX(-50%);
   }

   75% {
      transform: translateX(-25%);
   }

   100% {
      transform: translateX(1);
   }
}

footer {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 7vh;
   background-color: var(--navbarblur);
   font-family: "Press Start 2P", system-ui;
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 1;
   text-align: center;
}

@media screen and (max-width: 768px) {
   footer {
      height: 10vh;
      font-size: 0.8rem;
   }
}