body {
  background: linear-gradient(
    -45deg,
    #eeff99,
    #b4faa9,
    #7af1c0,
    #3ee4d8,
    #00d4ea,
    #00c7ef,
    #00b9f1,
    #24aaef,
    #1a9ded,
    #2490ea,
    #3781e5,
    #4b72dd
  );
  background-size: 400% 400%;
  animation: body-gradient 30s ease-in-out infinite alternate;
  height: 100vh;
  overflow: hidden;
  color: #07080a !important;
}

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

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  letter-spacing: -4px;
  font-variation-settings: "wght" 800;
  position: relative;
}

.cloud-1 {
  position: absolute;
  bottom: 50px;
  transform: translateX(2600px);
  animation-name: cloud-animation-1;
  animation-duration: 80s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes cloud-animation-1 {
  to {
    transform: translateX(-3000px);
  }
}

.cloud-1 img {
  min-width: 4000px;
}

.cloud-2 img {
  min-width: 2600px;
}

.cloud-2 {
  position: absolute;
  bottom: 10px;
  transform: translateX(2400px);
  animation-name: cloud-animation-2;
  animation-duration: 120s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: -999;
  opacity: 0.7;
}

@keyframes cloud-animation-2 {
  to {
    transform: translateX(-2000px);
  }
}

.logo {
  background-image: linear-gradient(
    45deg,
    #fff199,
    #b4faa9,
    #7af1c0,
    #3ee4d8,
    #00d4ea,
    #00c7ef,
    #00b9f1,
    #24aaef,
    #1a9ded,
    #2490ea,
    #3781e5,
    #4b72dd
  );
  color: transparent;
  -webkit-background-clip: text;
  animation: text-gradient 20s ease-in-out infinite alternate;
  animation-direction: alternate;
  background-size: 400% 100%;
  opacity: 0.8;
}

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