- 100.times do
  .particle

html, body { height: 100%; }

body {
  background: #262546;
  overflow: hidden;
}

.particle {
  position: absolute;
  animation: shoot 3s ease-out infinite;
  animation-name: shoot, fade;
  border-radius: 50%;
  
  @for $i from 0 to 400 {
    $t: (1 + .01 * random(100)) * 1s;
    
    &:nth-child(#{ $i + 1 }) {
      $d: random(100) + px;
      width: $d; height: $d;
      transform: translate(random(100)*1vw, 
                           random(100)*1vh);
      background: hsl(random(360deg), 80%, 80%);
      animation-duration: $t;
      animation-delay: -.01 * random(100) * $t;
    }
  }
}

@keyframes shoot {
  0% { transform: translate(50vw, 50vh); }
}

@keyframes fade { 
  to { opacity: 0 } 
}