body {
  margin: 0;
  color: #fff;
  background-color: #000;
  padding: 0;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: blur(230px);
}

.gradient {
  position: absolute;
  border-radius: 100%;
  opacity: 0.31;
  mix-blend-mode: screen;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}

.gradient-1 {
  background: rgb(60, 250, 245);
  width: 700px;
  height: 700px;
  animation-duration: 13s;
  opacity: 0.31;
  left: 60%;
  top: 40%;
  z-index: -2;
  animation-name: animation-gradient-1;
}

.gradient-2 {
  background: rgb(33, 108, 235);
  width: 600px;
  height: 600px;
  animation-duration: 13s;
  opacity: 0.31;
  left: 40%;
  top: 60%;
  z-index: -1;
  animation-name: animation-gradient-2;
}

.gradient-3 {
  background: rgb(165, 19, 246);
  width: 500px;
  height: 500px;
  animation-duration: 13s;
  opacity: 0.31;
  left: 50%;
  top: 50%;
  z-index: -3;
  animation-name: animation-gradient-3;
}

@keyframes animation-gradient-1 {
  0% {
    transform: translateY(-50%) translateX(-50%) rotate(-20deg) translateX(20%);
  }

  25% {
    transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg)
      rotate(80deg) translateX(30%);
  }

  50% {
    transform: translateY(-50%) translateX(-50%) rotate(180deg) translateX(25%);
  }

  75% {
    transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg)
      rotate(240deg) translateX(15%);
  }

  100% {
    transform: translateY(-50%) translateX(-50%) rotate(340deg) translateX(20%);
  }
}

@keyframes animation-gradient-2 {
  0% {
    transform: translateY(-50%) translateX(-50%) rotate(40deg) translateX(-20%);
  }

  25% {
    transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg)
      rotate(110deg) translateX(-5%);
  }

  50% {
    transform: translateY(-50%) translateX(-50%) rotate(210deg) translateX(-35%);
  }

  75% {
    transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg)
      rotate(300deg) translateX(-10%);
  }

  100% {
    transform: translateY(-50%) translateX(-50%) rotate(400deg) translateX(-20%);
  }
}

@keyframes animation-gradient-3 {
  0% {
    transform: translateY(-50%) translateX(-50%) translateX(-15%)
      translateY(10%);
  }

  20% {
    transform: translateY(-50%) translateX(-50%) translateX(20%)
      translateY(-30%);
  }

  40% {
    transform: translateY(-50%) translateX(-50%) translateX(-25%)
      translateY(-15%);
  }

  60% {
    transform: translateY(-50%) translateX(-50%) translateX(30%) translateY(20%);
  }

  80% {
    transform: translateY(-50%) translateX(-50%) translateX(5%) translateY(35%);
  }

  100% {
    transform: translateY(-50%) translateX(-50%) translateX(-15%)
      translateY(10%);
  }
}

.content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.glass-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}