body {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(#4b5d6e, #1a252f);
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* CLOUDS */

.clouds {
  position: absolute;
  top: 0;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.clouds::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;

  background:
    radial-gradient(circle at 10% 70%, #6e767d 70px, transparent 71px),
    radial-gradient(circle at 18% 60%, #7d858c 90px, transparent 91px),
    radial-gradient(circle at 28% 75%, #6e767d 80px, transparent 81px),

    radial-gradient(circle at 45% 65%, #7d858c 100px, transparent 101px),
    radial-gradient(circle at 55% 75%, #6e767d 85px, transparent 86px),

    radial-gradient(circle at 70% 60%, #7d858c 95px, transparent 96px),
    radial-gradient(circle at 80% 75%, #6e767d 80px, transparent 81px),

    radial-gradient(circle at 95% 65%, #7d858c 90px, transparent 91px);

  background-repeat: no-repeat;

  animation: cloudMove 90s linear infinite;
}

.clouds::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;

  background:
    radial-gradient(circle at 15% 75%, #8a9198 80px, transparent 81px),
    radial-gradient(circle at 35% 65%, #8a9198 100px, transparent 101px),
    radial-gradient(circle at 60% 75%, #8a9198 90px, transparent 91px),
    radial-gradient(circle at 85% 65%, #8a9198 95px, transparent 96px);

  opacity: 0.6;

  animation: cloudMove 80s linear infinite reverse;
}

@keyframes cloudMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes cloudFade {
  0%   { opacity: 0; }
  50%  { opacity: 0.7; }
  100% { opacity: 0; }
}


/* RAIN */

.rain span {
  position: absolute;
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.5);
  animation: fall linear infinite;
}

.rain span:nth-child(1) { left: 10%; animation-duration: 0.8s; }
.rain span:nth-child(2) { left: 25%; animation-duration: 1s; }
.rain span:nth-child(3) { left: 40%; animation-duration: 0.7s; }
.rain span:nth-child(4) { left: 55%; animation-duration: 1.2s; }
.rain span:nth-child(5) { left: 70%; animation-duration: 0.9s; }
.rain span:nth-child(6) { left: 85%; animation-duration: 1.1s; }
.rain span:nth-child(7) { left: 95%; animation-duration: 0.8s; }

@keyframes fall {
  0% {
    top: -20px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 0;
  }
}

/* WATER */

.water {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: rgba(0, 120, 255, 0.4);
  animation: rise 12s ease-in-out infinite alternate;
}

@keyframes rise {
  from { height: 0%; }
  to { height: 60%; }
}