%svg{:version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
  %defs
    %filter#goo
      %fegaussianblur{:in => "SourceGraphic", :result => "blur", :stddeviation => "10"}
      %fecolormatrix{:in => "blur", :mode => "matrix", :result => "goo", :values => "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"}
      %feblend{:in => "SourceGraphic", :in2 => "goo"}
      
- (1..200).each do |i|
  %span.particle
  
  
  

@import "compass"

body
  overflow-x: hidden
  background-image: linear-gradient(120deg, rgba(#e0c3fc,0.75) 0%, rgba(#8ec5fc,0.75) 100%)
  margin: 0
  padding: 0
  height: 100vh
  overflow: hidden
  filter: url('#goo')
  
  @-moz-document url-prefix()
    filter: none

.particle 
  position: absolute
  border-radius: 50%
  
  
@include keyframes(float)
  0%,100%
    transform: translateY(0)
  50%
    transform: translateY(180px)

@include keyframes(floatReverse)
  0%,100%
    transform: translateY(0)
  50%
    transform: translateY(-180px)
  
@include keyframes(float2)
  0%,100%
    transform: translateY(0)
  50%
    transform: translateY(280px)

@include keyframes(floatReverse2)
  0%,100%
    transform: translateY(0)
  50%
    transform: translateY(-280px)    
 
@mixin animation ($delay, $duration, $animation)
  animation-delay: $delay
  animation-duration: $duration
  animation-name: $animation
  animation-iteration-count: infinite
  animation-fill-mode: forwards
  
$anims: float, floatReverse,float2, floatReverse2

@for $i from 1 through 400
  .particle:nth-child(#{$i})
    $width: random(15)+10
    $speed: random(20)+20
    $delay: random(10)*0.1
    $opacity: random(10)*0.1
    $anim: nth($anims, random(length($anims)))
    height: $width + px
    width: $width + px
    left: percentage(random(100)) /100 
    top: percentage(random(100)) /100
    background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)
    @include animation($delay+s, $speed+s, $anim)

//Nothing to see here