- var groundRocks = 15

	.wrapper
		.zombie
			.zombie__head
				.zombie__brain
				.zombie__cheeks
				.zombie__chin

				.zombie__eyes
					.eye.left
						.eyebrow

					.eye.right
						.eyebrow

				.zombie__nose

				.zombie__mouth
					.tooth
						.tooth__top
						.tooth__bottom

			.zombie__body
				.zombie__chest
					.zombie__arms
						.arm.left
							.arm__bone
							.arm__sleeve

						.arm.right
							.arm__details
								.arm__biceps
								.arm__forearm

								.hands
									.fingers
										.finger.thumb
										.finger.middle
										.finger.index
										.finger.ring
										.finger.pinky

							.arm__sleeve

		.ground
			.ground__hole

			.ground__rocks
				while groundRocks--
					.rock

			.tomb
				.tomb__info
					h1.headers RIP
					h4.headers "A dev who drank a lot of coffee."
					h5.headers Daily CSS Images Challenge | 17.
			.brains-comic-box
				h1.brains__text Braaains !

@import url('https://fonts.googleapis.com/css?family=Creepster|Rye');

// Variables
// ----
$body-bg:            #3a4c5f;

// zombie colors
$zombie-bg:          #05d8ae;
$zombie-head-size:   150px;
$zombie-cheeks-size: $zombie-head-size / 3;
$eye-size:           50px;
$eye-color:          #2c3e50;
$eye-iris-color:     #ff9800;
$nose-color:         darken($zombie-bg, 10%);
$mouth-color:        #1a252f;
$hair-color:         #1a252f;
$shirt-color:        #844e3b;
$arm-size:           100px;
$finger-size:        16px;
$tomb-color:         #b3bbbb;
$brain-color:        #ff337a;

// common colors
$color-white:        #fff;

html, body {
	height: 100vh;
}

body {
	background: $body-bg;
	font-family: 'Rye', cursive;
}

// Placeholders
// ----
// /!\ safari render fix
%render-fix {
	-webkit-transform-style: flat;
	-webkit-transform: translateZ(0);
}

%common-zombie-cheeks {
	content: '';
	border-radius: 50% 0 0 50%;
	box-shadow: 4px 7px 6px 1px rgba(0, 0, 0, 0.09);
	background: $zombie-bg;
	width: $zombie-cheeks-size;
	height: $zombie-cheeks-size;
}

%common-nose-details {
	content: '';
	width: 15px;
	height: 15px;
	border-radius: 50% 50% 10px 10px;
	background: darken($nose-color, 20%);
	box-shadow: inset 0 8px 0 2px $nose-color;
	align-self: flex-end;
}

%common-tooth-details {
	content: '';
	background: $color-white;
	width: 10px;
	height: 10px;
	display: block;
	border-radius: 2px;
	margin: 5px 20px 0 0;
	display: inline-block;
}

%common-arm-sleeve {
	width: 50px;
	height: 60px;
	background: linear-gradient(to bottom, darken($shirt-color, 10%), $shirt-color);;
	border-radius: 20px 20px 0 0;
}

// Wrappers
// ----
.wrapper {
	display: flex;
	height: 100vh;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
}

// Zombie
// ----
.zombie {
	position: relative;
	z-index: 1;
}

// Head
.zombie__head {
	width: $zombie-head-size;
	height: $zombie-head-size;
	background: $zombie-bg;
	border-radius: 70% 70% 35% 35%;
	display: flex;
  justify-content: center;
	position: relative;
	z-index: 1; // relative to zombie body
	animation: moveHead 5s ease-in-out infinite;
	
	&::before {
		content: '';
    width: 49px;
    height: 22px;
    border-radius: 50%;
    box-shadow: 0 -2px 0 1px $hair-color;
    transform: translateX(24px) rotateZ(-53deg);
		position: absolute;
		right: 40px;
	}
	
	&::after {
		content: '';
    width: 29px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 -2px 0 1px $hair-color;
    transform: translateX(38px) rotateZ(-13deg);
		position: absolute;
		top: 5px;
		right: 50px;
	}
}

// Brain
.zombie__brain {
	width: 30px;
	height: 60px;
	background: $body-bg;
	border-radius: 50%;
	transform: rotateZ(55deg);
	position: absolute;
	top: -2px;
	left: 30px;
	overflow: hidden;
	
	&::before {
		content: '';
		width: 30px;
		height: 80px;
		background: $brain-color;
		position: absolute;
		border-radius: 50%;
		left: 15px;
	}
	
	&::after {
		content: '';
		background: $brain-color;
		width: 15px;
		height: 15px;
		border-radius: 40%;
		position: absolute;
		top: 35px;
		left: 5px;
		box-shadow: -14px -8px 0 0px $brain-color,
			          -28px -10px 0 0px $brain-color;
		transform: rotateZ(80deg);
	}
}

// Cheeks
.zombie__cheeks {
	width: inherit;
	height: $zombie-cheeks-size;
	display: flex;
	justify-content: space-between;
	align-self: center;
	position: absolute;
	left: 0;
	top: 75px;
	
	&::before {
		@extend %common-zombie-cheeks;
		margin-left: -12px;
	}
	
	&::after {
		@extend %common-zombie-cheeks;
		transform: rotateY(180deg);
		margin-right: -12px;
	}

}

// Eyes
.zombie__eyes {
	width: inherit;
	height: $eye-size;
	display: flex;
	justify-content: space-between;
	align-self: center;
	position: absolute;
	left: 0;
	top: 50px;
	
	.eye {
		background: #fff;
		border-radius: 50%;
		box-shadow: 0 5px 0px 1px rgba(0, 0, 0, 0.22), 
			          0 13px 0px 0px rgba(0, 0, 0, 0.22);
		width: $eye-size;
		height: $eye-size;
		position: relative;
		
		// iris
		&::before {
			content: '';
			width: $eye-size / 3;
			height: $eye-size / 3;
			background: #fff;
			border-radius: 50%;
			display: table;
			margin: 20px auto;
			box-shadow: inset 0 -5px 0 5px $eye-color, 
				          0 0 0 3px $eye-iris-color;
		}
		
		.eyebrow {
			width: inherit;
			height: 20px;
			background: $zombie-bg;
			position: absolute;
			border-radius: 10px;
			box-shadow: 0 2px 0 1px darken($zombie-bg, 15%);
			top: -15px;
			animation: moveEyebrow 5s ease-in-out infinite;
			
		}
	}
}

// Chin
.zombie__chin {
	width: $zombie-head-size / 1.5;
	height: 80px;
	background: $zombie-bg;
	border-radius: 0 0 30% 30%;
	align-self: flex-end;
	position: absolute;
	left: 26px; // safari and firefox needs this
	top: 100px; // safari and firefox needs this
}

// Nose
.zombie__nose {
	width: $zombie-head-size / 6;
	height: 80px;
	background: linear-gradient(to top, $nose-color , $zombie-bg);
	border-radius: 0 0 10px 10px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 63px;
	top: 35px;
	
	&::before {
		@extend %common-nose-details;
		margin-left: -8px;
	}
	
	&::after {
		@extend %common-nose-details;
		margin-right: -8px
	}
}

// Mouth
.zombie__mouth {
	width: $zombie-head-size / 2;
	background: $mouth-color;
	border-radius: 20%/10% 10% 50% 50%;
	box-shadow: inset 0 6px 0 0px lighten($brain-color, 10%),
		          0 0 0 4px $nose-color;
	align-self: flex-end;
	position: absolute;
	left: 38px;
	bottom: -18px;
	overflow: hidden;
	animation: moveMouth 5s ease-in-out infinite;
}

// Tooth
.tooth {
	width: inherit;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;

	.tooth__top {
		position: relative;
		left: 10px;
		&::before {
			@extend %common-tooth-details;
			box-shadow: 15px 0px 0 0 $color-white,
		              30px 0px 0 0 $color-white,
							    45px 0px 0 0 $color-white;
		}
	}
	
	.tooth__bottom {
		position: relative;
		right: -18px;
		bottom: -6px;
		
		&::before {
			@extend %common-tooth-details;
			box-shadow: 15px 0px 0 0 $color-white,
		              30px 0px 0 0 $color-white;
		}
	}
}

// Zombie Body
//---

// Chest
.zombie__chest {
	width: $zombie-head-size;
	height: $zombie-head-size / 1.5;
  background: linear-gradient(to bottom, darken($shirt-color, 10%) 40%, $shirt-color );
  border-radius: 20px 20px 0 0;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	position: relative;
  top: -10px;
}

// Arms
.zombie__arms {
	display: inline-flex;
  width: 100%;
	
	.left {
		position: relative;
		animation: moveLeftArm 5s ease-in-out infinite;
		
		.arm__sleeve {
			@extend %common-arm-sleeve;
			transform: translateX(-25px) rotateZ(80deg);
		}
		
		.arm__bone {
			width: $arm-size;
			height: 20px;
			background: darken($color-white, 25%);
			position: absolute;
			left: -100px;
			top: 25px;
			transform: rotateZ(-10deg);
			
			&::before {
				content: '';
				background: inherit;
				width: 20px;
				height: 20px;
				position: absolute;
				left: -15px;
				top: -8px;
				border-radius: 40%/50% 0 30% 40%;
				transform: rotateZ(40deg);		
			}
			
			&::after {
				content: '';
				background: inherit;
				width: 20px;
				height: 20px;
				position: absolute;
				left: -10px;
				bottom: -6px;
				border-radius: 40%/50% 0 30% 40%;
				transform: rotateZ(40deg);
			}
		}
	}
	
	.right {
		position: relative;
		
		.arm__sleeve {
			@extend %common-arm-sleeve;
			transform: translateX(79px) rotateZ(-63deg);
		}
	}
	
	.arm__biceps {
		width: $arm-size;
		height: 20px;
		position: absolute;
		background: $zombie-bg;
		left: 95px;
		top: 40px;
		transform: rotateZ(25deg);;
	}
	
	.arm__forearm {
		width: 38px;
		height: 45px;
		position: absolute;
		background: linear-gradient(to bottom, $nose-color , $zombie-bg);
		left: 160px;
		top: 55px;
		border-radius: 40%/90% 90% 0 0;
		transform: skewX(-10deg);
		box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.18);
	}
}

.hands {
	background: $zombie-bg;
	width: 75px;
	height: 30px;
	border-radius: 30%/80% 40% 40% 40%;
	position: absolute;
	left: 135px;
	top: 90px;
	animation: moveHand 5s ease-in-out infinite;
	
	.finger {
		width: $finger-size;
		height: $finger-size * 2;
		display: inline-block;
		background: $zombie-bg;
		border-radius: 50%/80% 40% 40% 40%;
		position: absolute;
		
		// nails
		&::before {
			content: '';
			background: $color-white;
			opacity: .6;
			width: $finger-size / 1.8;
			height: $finger-size / 1.8;
			position: relative;
			top: 18px;
			left: 2px;
			border-radius: 50% 50% 0 0;
			box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.44);
			display: block;
		}
		
		&.thumb {
			transform: rotateZ(90deg);
			left: -15px;
			top: -8px;
		}
		
		&.index {
			transform: rotateZ(20deg);
			top: 20px;
			left: -6px;
		}
		
		&.middle {
			top: 25px;
			left: 22px;
		}
		
		&.ring {
			transform: rotateZ(-10deg) scale(.9);
			top: 20px;
			left: 50px;
		}
		
		&.pinky {
			transform: rotateZ(-50deg) scale(.8);
			top: 8px;
			left: 68px;
		}
	}
}

// Ground
.ground {
	position: relative;
}

.ground__hole {
	width: $zombie-head-size * 1.5;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .39);
	box-shadow: 0 11px 34px 20px rgba(0, 0, 0, 0.25);
	position: relative;
	top: -42px;
}

.ground__rocks {	
	position: absolute;
	top: 0;
	z-index: 2;
	
	.rock {
		background: lighten($body-bg, 10%);
		border-radius: 40%/80% 20% 70% 20%;
		box-shadow: 3px 4px 0 5px darken($body-bg, 10%);
		width: 40px;
		height: 20px;
		display: block;
		position: absolute;
		top: 0;
	}
	
	:nth-child(2) {
		left: -25px;
		top: -25px;
		transform: scale(1.2) rotateZ(-10deg);
		z-index: -1;
	}
	
	:nth-child(3) {
		left: -3px;
    top: -53px;
    transform: scale(0.4);
	}
	
	:nth-child(4) {
		left: 30px;
		top: -20px;
		transform: scale(.5);
	}
	
	:nth-child(5) {
		left: 55px;
		top: -15px;
		transform: scale(.8);
	}
	
	:nth-child(6) {
		left: 55px;
		top: -15px;
		transform: scale(.8);
	}
	
	:nth-child(7) {
		left: 95px;
		top: -15px;
		transform: scale(.6) rotateY(180deg);
	}
	
	:nth-child(8) {
		left: 85px;
		top: 20px;
		transform: scale(.4) rotateY(180deg);
	}
	
	:nth-child(9) {
		left: 165px;
		top: 10px;
		transform: scale(.2);
	}
	
	:nth-child(10) {
		left: 125px;
		top: -15px;
		transform: scale(1.1) rotateY(180deg);
	}
	
	:nth-child(11) {
		left: 165px;
		top: -12px;
		transform: scale(.8) rotateY(180deg) rotateZ(-20deg);
	}
	
	:nth-child(12) {
		left: 265px;
		top: -90px;
		transform: scale(.7);
	}
	
	:nth-child(13) {
		left: 300px;
		top: -90px;
		transform: scale(1);
	}
	
	:nth-child(14) {
		left: 350px;
		top: -90px;
		transform: scale(.5) rotateY(180deg);
	}
	
	:nth-child(15) {
		left: 390px;
		top: -90px;
		transform: scale(.8) rotateY(180deg) rotateZ(-10deg);
	}
	
}

// Rip tomb
.tomb {
	width: 200px;
	height: 200px;
	background: $tomb-color;
	border-radius: 50% 50% 0 0;
	box-shadow: 18px 1px 0 0px darken($tomb-color, 15%),
							12px 26px 39px 7px rgba(0, 0, 0, 0.25);
	position: absolute;
	top: -280px;
	left: 200px;
	
	.tomb__info {
		text-align: center;
		margin: 20px;
		color: darken($tomb-color, 35%);
		
		.headers {
			font-weight: normal;
			line-height: 1.3em;
			margin: 15px 0;
		}
	}
}

// Brains text
.brains-comic-box {
	font-family: 'Creepster', cursive;
	font-size: 1.4em;
	letter-spacing: .2em;
	color: $brain-color;
	position: absolute;
	top: -360px;
	left: -200px;
	transform: rotateZ(-10deg);
	position: relative;
	animation: moveBrainsBox 5s ease-in-out infinite;
	
	.brains__text {
		background: #fff;
		border-radius: 40px;
		padding: 15px 20px;
		animation: moveBrainsText 5s ease-in-out infinite;
		
		&::before {
			width: 0;
			height: 0;
			content: '';
			border-top: 1em solid $color-white;
			border-left: .5em solid transparent;
			border-right: .5em solid transparent;
			position: absolute;
			bottom: -20px;
			left: 160px;
			transform: rotateZ(-30deg);
		}
	}
}

// Animations
// -----
@keyframes moveLeftArm {
	0%, 50%, 90%, 100% {
		transform: rotateZ(22deg);
	}
	
	10%, 20%, 40% {
    transform: rotateZ(0);
  }
}

@keyframes moveHead {
	0%, 50%, 90%, 100% {
		transform: rotateZ(-10deg);
	}
	
	30% {
		transform: translateX(6px) translateY(2px);
	}
	
	35% {
		transform: translateX(-6px);
	}
	
	10%, 20%, 40% {
    transform: rotateZ(0);
  }
}

@keyframes moveMouth {
	0%, 50%, 90%, 100% {
		height: 20px;
		transform: translateY(-10px);
	}
	
	10%, 20%, 40% {
    height: 40px;
		transform: translateY(0);
  }
}

@keyframes moveEyebrow {
	0%, 50%, 90%, 100% {
		transform: translateY(8px);
	}
	
	10%, 20%, 40% {
		transform: translateY(-10px);
  }
}

@keyframes moveHand {
	0%, 50%, 90%, 100% {
		transform: translateY(0);
	}
	
	10%, 20%, 40% {
		transform: translateY(-10px) rotateZ(15deg);
  }
}

@keyframes moveBrainsText {
	0%, 20%, 40%, 60%, 80%, 100% {
		transform: translateX(20px);
	}
	
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-20px);
  }
}

@keyframes moveBrainsBox {
	0%, 50%, 90%, 100% {
		opacity: 0;
	}
	
	10%, 20%, 40% {
		opacity: 1;
  }
}

/* Zombie Illustration by me <3 */