.bottom-particles
  - var n = 1;
  - var bubbles = 200;
  while n <= bubbles 
    .bubble
    - n++;

// Background 
$white: #fff;
$orange: #FF7644;
$green: #7FB069;
$blue: #556270;
$tran-speed: 60s;

// Particle setting
$particle-count: 200;
$particle-size: 1rem;
$particle-distance: 100vh;
$particle-min-speed: 5000;  // ms
$particle-max-speed: 15000; // ms
$particle-max-delay: 12000; // ms



/*** <--- CONTAINER ---> ***/

body{
  font-size: 16px;
  overflow: hidden;
  background: $blue;
  animation: changeBg $tran-speed infinite alternate;
}

@keyframes changeBg{
  0%{
    background: $blue;
  }
  33.33333333%{
    background: $green;
  }
  66.66666666%{
    background: $orange;
  }
}



/*** <--- PARTICLES ---> ***/

.bottom-particles{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  .bubble{
    opacity:0;
    position: absolute;
    bottom: -$particle-size;
    width: $particle-size;
    height: $particle-size;
    background-color:rgba($white ,0.5);
    border-radius:50%;
    
    // Randomize bubles
    @for $i from 1 through $particle-count{
      
      // random animation speed
      $speed: random($particle-max-speed) + 0ms;
      @if $speed < $particle-min-speed{
        $speed: $particle-min-speed + 0ms;
      }
        
      &:nth-child(#{$i}){
        left: random(100) + 0%;
        animation: blow $speed infinite;
        animation-delay: random($particle-max-delay) + 0ms;
      }
    }
      
  }
}

@keyframes blow {
   0% {
      opacity: 0;
      transform:translate(0, 0);
   }
   20% { 
      opacity: 1;
   }
   100% {
      opacity: 0;
      transform:translate(0, -$particle-distance) scale(.2);
   }
}