.flex-container
	.unit
		.heart
			- for (var i = 0; i < 9; i++)
				div(class='heart-piece-'+[i])
		p| love is love

@import url('https://fonts.googleapis.com/css?family=Lato:100')

size(w=100%,h=100%)
	width w
	height h

html
body
	size()

.flex-container
	size()
	position relative
	display flex
	flex-wrap wrap 
	justify-content center
	align-items center

// -------- Variables --------//

$background = #262e6f

$red = #ec2d73
$orange = #eb5324
$yellow = #fdc800
$green = #47b264
$blue = #1470bd
$purple = #76469a

// -------- Style --------//

body
	background-color $background

.unit
	text-align center
	p
		margin-top 100px
		font-family 'Lato', sans-serif
		font-weight 100
		text-transform uppercase
		letter-spacing 2px
		color white

.heart
	position relative
	font-size 0
	width 138px
	
[class*="heart-piece-"]
	position absolute
	top -5px
	size(10px,10px)
	border-radius 5px
	
$Colors = $red, $orange, $yellow, $green, $blue, $purple, $red, $orange, $yellow 
		
.heart-piece-4
	animation piece-4 3.2s infinite

.heart-piece-3
.heart-piece-5
	animation piece-3 3.2s infinite

.heart-piece-2
.heart-piece-6
	animation piece-2 3.2s infinite

.heart-piece-1
.heart-piece-7
	animation piece-1 3.2s infinite

.heart-piece-0
.heart-piece-8
	animation piece-0 3.2s infinite
		
for num in (0 .. 8)
	.heart-piece-{num}
		left 16px * num
		animation-delay 0.15s * num
		background-color $Colors[num]

@keyframes piece-4 {
  0%, 10%, 90%, 100%{
	height 10px
	top -5px
 }
 45%, 55%{
	height 94px
	top -23px
 }
}

@keyframes piece-3 {
 0%, 10%, 90%, 100%{
	height 10px
	top -5px
 }
 45%, 55%{
	height 90px
	top -31px
 }
}

@keyframes piece-2 {
 0%, 10%, 90%, 100%{
	height 10px
	top -5px
 }
 45%, 55%{
	height 80px
	top -37px
 }
}

@keyframes piece-1 {
 0%, 10%, 90%, 100%{
	height 10px
	top -5px
 }
 45%, 55%{
	height 60px
	top -31px
 }
}

@keyframes piece-0 {
 0%, 10%, 90%, 100%{
	height 10px
	top -5px
 }
 45%, 55%{
	height 30px
	top -15px
 }
}