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;
}

@keyframes body-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.wrapper {
  color: var(--black);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-family: Alaska;
  font-variation-settings: "wdth" 100, "wght" 400, "ital" 0, "CNTR" 0;
}

.plane {
  width: 1200px;
  transform: translateY(-200px);
  position: relative;
  animation: plane 4s alternate ease-in-out infinite;
}

@keyframes plane {
  from {
    transform: translateY(-100px) rotate(4deg) translateX(-50px);
  }
  to {
  }
}

.pos-rotor-1 {
  position: absolute;
  top: 275px;
  left: 194px;
}

.pos-rotor-2 {
  position: absolute;
  top: 289px;
  left: 345px;
}

.pos-rotor-3 {
  position: absolute;
  top: 289px;
  right: 345px;
}

.pos-rotor-4 {
  position: absolute;
  top: 275px;
  right: 194px;
}

.rotor {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotor 1s infinite linear;
}

.turbine {
  position: absolute;
}

.clouds {
  position: absolute;
  bottom: -100px;
  width: 140%;
}

@keyframes rotor {
  from {
  }
  to {
    transform: rotate(-3600deg);
  }
}