%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);
		}
	}
}