body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background: linear-gradient(90deg, #000000, #130518, #22072c, #480655, #22072c, #130518, #000000);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease-in-out infinite;
  margin: 0;
  font-size: 14px;
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.glass{
  border: 1px solid #5f566788;
}

main {
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 700px) {
  body {
    font-size: 16px;
  }

  main {
    max-width: 1000px;
    padding: 24px;
    gap: 32px;
  }
}