%h1
  Merry Christmas!
- (1..20).each do |i|
  .flake
    - 12.times do
      %span
        - 4.times do
          %span

@import 'compass';

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: 300px;
  width: 100%;
  margin: auto;
  
  h1 {
    font-family: 'Mountains of Christmas', cursive;
    font-size: 130px;
    color: #FFFFFF;
    opacity: 0.3;
    margin: auto;
    line-height: 140px;
  }
}

html {
  background: #94D3D8;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  :before, :after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
  }
}

$flake-color: white;

@mixin feather($size, $no, $thickness, $position-start, $spacing, $ball-size, $ball-position, $rotate, $width1, $width2, $width3, $width4) {
  position: absolute;
  height: $size;
  width: $size;
  
  * {
    position: absolute;
  }
  
  > span {
    left: 40%;
    height: 50%;
    width: 20%;
    @include transform-origin(bottom,center);
    
    @for $i from 1 through $no {
      &:nth-of-type(#{$i}) {
        $section-rotate: (360 / $no) * $i + deg;
        @include transform(rotate($section-rotate));
      }
    }
    
    &:before {
      left: calc(50% - (#{$thickness} / 2));
      bottom: 0;
      width: $thickness;
      height: 95%;
      background: $flake-color;
    }

    &:after {
      bottom: $ball-position;
      left: calc(50% - ((#{$size} / #{$ball-size}) / 2));
      height: calc(#{$size} / #{$ball-size});
      width: calc(#{$size} / #{$ball-size});
      background: $flake-color;
      @include border-radius(50%);
    }

    $crystals: 4;

    span {
      width: 100%;
      left: 0;
      
      $widths-list: $width1, $width2, $width3, $width4;
      
      @each $current-width in $widths-list {
          $i: index($widths-list, $current-width);
          &:nth-of-type(#{$i}) {
          &:before, &:after {
            width: $current-width;
          }
        }
      }

      @for $i from 1 through $crystals {
        &:nth-of-type(#{$i}) {
          top: calc(#{$position-start} + (#{$spacing} / #{$crystals}) * (#{$i} - 1));
        }
      }
    
      &:before, &:after {
        bottom: 0;
        width: 60%;
        height: $thickness;
        background: $flake-color;
        @include border-radius(15px);
      }

      &:before {
        right: 50%;
        @include transform(rotate($rotate));
        @include transform-origin(center,right);
      }

      &:after {
        left: 50%;
        @include transform(rotate(-$rotate));
        @include transform-origin(center,left);
      }
    }
  }
}

/* Animation */

@keyframes flakes {
  0% {
    @include transform(translateY(0) rotate(0));
    opacity: 0;
  }
  10% {
    opacity: (50 + random(50)) * 0.01;
  }
  100% {
    @include transform(translateY(1000px) rotate(40 + random(180) + deg));
  }
}

.flake {
  @for $i from 1 through 20 {
    &:nth-of-type(#{$i}) {
      $random-size: random(80) + 20 + px;
      $random-no: random(6) + 6;
      $random-thickness: random(3) + px;
      $random-rotate: random(30) + 30 + deg;
      $random-ball-size: random(10) + 10;
      $random-crystal-size1: random(20) + 40 * 1%;
      $random-crystal-size2: random(70) + 40 * 1%;
      $random-crystal-size3: random(70) + 40 * 1%;
      $random-crystal-size4: random(20) + 40 * 1%;
      $random-position-start: random(20) * 1%;
      $random-spacing: random(40) + 50 * 1%;
      $random-ball-position: random(90) * 1%;
      
      @include feather($random-size, $random-no, $random-thickness, $random-position-start, $random-spacing, $random-ball-size, $random-ball-position, $random-rotate, $random-crystal-size1, $random-crystal-size2, $random-crystal-size3, $random-crystal-size4);
      
      /* Animation */

      top: -700 + random(700) + px;
      left: random(90) * 1%;
      
      $random-delay: 15 + random(55) + s;
      @include animation(#{$random-delay} flakes linear infinite);
    }
  }
}