.header
	.header__text
		p We love donuts.
	.header__donuts
		- for (var i = 0; i < 3; ++i) {
			.donut
			.donut.donut--pink
			.donut
			.donut.donut--pink
			.donut
			.donut.donut--pink
			.donut
		- }

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,800")
body
	margin 0
	background white
	font-family 'Open Sans'
.header
	position relative
	width 100vw
	height 100vh
	background #ff5f5f
	overflow hidden
	&__text
		height 100%
		text-align center
		z-index 2
		color #460b0b
		font-size 80px 
		font-weight 900
		position absolute
		display flex
		align-items center
		justify-content center
		left 0
		right 0
	&__donuts
		width 100%
		bottom 160px
		right 130px
		position relative
		display grid
		grid-template 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr
.donut
	@keyframes float
		0%
			margin-top 0
		50%
			margin-top 50px
		100%
			margin-top 0
	animation-name float
	animation-duration 5s
	animation-iteration-count infinite
	animation-timing-function ease-in-out
	margin 0 auto
	width 300px
	height 336px
	background url('https://image.ibb.co/c2S2U6/donut.png') center 100% / 100% no-repeat
	for num in (1..12)
		&:nth-child({num})
			animation-delay num*0.12s	
	&--pink
		animation-duration 4s
		background url('https://image.ibb.co/fgK2wm/donut2.png') center 100% / 100% no-repeat