<div class='cloud1'>
  <div class="cloud1__face"><span></span><span></span></div>
  <div class="cloud1__clouds1">
    <span></span>
  </div>
  <div class="cloud1__clouds2">
    <span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud1__clouds3">
    <span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud1__clouds4">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud1__clouds5">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud1__rain">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud1__lightning">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class='cloud2'>
  <div class="cloud1__face"><span></span><span></span></div>
  <div class="cloud2__clouds1">
    <span></span>
  </div>
  <div class="cloud2__clouds2">
    <span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud2__clouds3">
    <span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud2__clouds4">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud2__clouds5">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud2__rain">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud2__lightning">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div class='cloud3'>
  <div class="cloud1__face"><span></span><span></span></div>
  <div class="cloud3__clouds1">
    <span></span>
  </div>
  <div class="cloud3__clouds2">
    <span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud3__clouds3">
    <span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud3__clouds4">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud3__clouds5">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud3__rain">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="cloud3__lightning">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

//*** Mixins ***//
@mixin mediaMaxW($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

@mixin clouds {
  display: inline-block;
  position: absolute;
  transform: translateX(-45px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #A586FF;
}

//*** Vars ***//
$cloud1Speed: 6s;
$cloud2Speed: 8s;
$cloud3Speed: 7s;
body {
  overflow: hidden;
  background-color: #554091;
}

.cloud1,
.cloud2,
.cloud3 {
  position: absolute;
  left: 75px;
  width: 420px;
  height: 100vh;
  overflow: hidden;
  animation: moveCloud1 $cloud1Speed alternate infinite ease-in-out;
  &__face {
    position: absolute;
    top: 115px;
    left: 150px;
    width: 100px;
    height: 50px;
    z-index: 10;
    span:first-child {
      position: absolute;
      top: 20px;
      left: 18px;
      transform: rotate(55deg);
      width: 25px;
      height: 15px;
      border-radius: 50%;
      background-color: #000;
      &:after {
        content: '';
        display: block;
        position: absolute;
        top: -2px;
        left: -9px;
        transform: rotate(-30deg);
        width: 25px;
        height: 8px;
        border-radius: 10px;
        background-color: #7e54ff;
      }
    }
    span:last-child {
      position: absolute;
      top: 20px;
      right: 18px;
      transform: rotate(-55deg);
      width: 25px;
      height: 15px;
      border-radius: 50%;
      background-color: #000;
      &:after {
        content: '';
        display: block;
        position: absolute;
        top: -2px;
        left: 9px;
        transform: rotate(30deg);
        width: 25px;
        height: 8px;
        border-radius: 10px;
        background-color: #7e54ff;
      }
    }
  }
  &__clouds1 {
    position: relative;
    padding-top: 100px;
    top: -50px;
    left: 185px;
    z-index: 1;
    span {
      @include clouds;
      left: 40px;
      animation: scale random(2) + s infinite alternate ease-in-out;
      animation-delay: .4s;
    }
  }
  &__clouds2 {
    position: relative;
    top: -30px;
    left: 145px;
    z-index: 1;
    @for $i from 1 to 4 {
      span:nth-child(#{$i}) {
        @include clouds;
        left: 40px * $i;
        animation: scale random(2) + s infinite alternate ease-in-out, lightCloud 1.5s + $i infinite;
        animation-delay: .1s;
      }
    }
  }
  &__clouds3 {
    position: relative;
    top: 0px;
    left: 110px;
    z-index: 1;
    @for $i from 1 to 6 {
      span:nth-child(#{$i}) {
        @include clouds;
        left: 40px * $i;
        animation: scale random(2) + s infinite alternate ease-in-out, lightCloud 3s + $i infinite;
        animation-delay: .2s;
      }
    }
  }
  &__clouds4 {
    position: relative;
    top: 30px;
    left: 75px;
    z-index: 1;
    @for $i from 1 to 8 {
      span:nth-child(#{$i}) {
        @include clouds;
        left: 40px * $i;
        animation: scale random(2) + s infinite alternate ease-in-out;
        animation-delay: .5s;
      }
    }
  }
  &__clouds5 {
    position: relative;
    left: 30px;
    top: 60px;
    @for $i from 1 to 10 {
      span:nth-child(#{$i}) {
        @include clouds;
        left: 40px * $i;
        background-color: #8E69F7;
        animation: scale random(2) + s infinite alternate ease-in-out;
      }
    }
  }
  &__rain {
    position: relative;
    height: 100%;
    z-index: -1;
    @for $i from 1 to 30 {
      span:nth-child(#{$i}) {
        position: absolute;
        top: 59px;
        left: 30px * $i;
        width: 5px;
        height: 40px;
        border-radius: 30%;
        background-color: #4f9eff;
        animation: rainCloud1 6s infinite linear;
        animation-delay: random(5) - 2 + s;
      }
    }
    span:last-child,
    span:first-child {
      display: none;
    }
  }
  &__lightning {
    position: absolute;
    left: 50px;
    top: 200px;
    height: 100%;
    width: 100px;
    opacity: 0;
    z-index: -1;
    animation: lightning 5s infinite, moveLightning 10s infinite alternate;
    animation-delay: random(3);
    div:first-child {
      position: absolute;
      width: 50px;
      height: 300px;
      transform: skew(-10deg, -10deg);
      background-color: #f2f2f2;
    }
    div:nth-child(2) {
      position: absolute;
      top: 230px;
      left: -15px;
      width: 50px;
      height: 300px;
      transform: skew(-10deg, -10deg);
      background-color: #f2f2f2;
    }
    div:last-child {
      position: absolute;
      top: 460px;
      left: -30px;
      width: 50px;
      height: 300px;
      transform: skew(-10deg, -10deg);
      background-color: #f2f2f2;
    }
  }
}

.cloud2 {
  top: 100px;
  left: 300px;
  animation: moveCloud2 $cloud2Speed alternate infinite ease-in-out;
  &__clouds2 {
    @for $i from 1 to 4 {
      span:nth-child(#{$i}) {
        @include clouds;
        background-color: #9674fc;
        animation: scale random(2) + s infinite alternate ease-in-out, lightCloud 1.9s + $i infinite;
        animation-delay: .7s;
      }
    }
  }
  &__rain {
    @for $i from 1 to 30 {
      span:nth-child(#{$i}) {
        animation-delay: random(5) - 2 + s;
      }
    }
  }
  &__lightning {
    animation: lightning 6s infinite, moveLightning 7s infinite alternate;
    animation-delay: random(2);
  }
}

.cloud3 {
  top: 25px;
  left: 450px;
  animation: moveCloud3 $cloud3Speed alternate infinite ease-in-out;
  animation-delay: random(5);
  &__clouds3 {
    @for $i from 1 to 6 {
      span:nth-child(#{$i}) {
        @include clouds;
        animation: scale random(2) + s infinite alternate ease-in-out, lightCloud .9s + $i infinite;
        animation-delay: 1.6s;
      }
    }
  }
  &__rain {
    @for $i from 1 to 30 {
      span:nth-child(#{$i}) {
        animation-delay: random(7) - 3 + s;
      }
    }
  }
  &__lightning {
    animation: lightning 4s infinite, moveLightning 3.5s infinite alternate;
    animation-delay: random(4);
  }
}

@keyframes scale {
  to {
    transform: translateX(-45px) scale(1.5, 1.5)
  }
}

@keyframes lightCloud {
  50% {
    background-color: #A586FF;
  }
  52% {
    background-color: #f2f2f2;
  }
  54% {
    background-color: #A586FF;
  }
}

@keyframes moveCloud1 {
  to {
    transform: translateX(600px)
  }
}

@keyframes moveCloud2 {
  to {
    transform: translateX(600px)
  }
}

@keyframes moveCloud3 {
  to {
    transform: translateX(600px)
  }
}

@include mediaMaxW(1400px) {
  @keyframes moveCloud1 {
    to {
      transform: translateX(300px)
    }
  }
  @keyframes moveCloud2 {
    to {
      transform: translateX(300px)
    }
  }
  @keyframes moveCloud3 {
    to {
      transform: translateX(300px)
    }
  }
}

@keyframes rainCloud1 {
  to {
    transform: translateY(960px)
  }
}

@keyframes lightning {
  50% {
    opacity: 0
  }
  51% {
    opacity: 1
  }
  52% {
    opacity: 0
  }
}

@keyframes moveLightning {
  to {
    transform: translateX(200px)
  }
}