$fontsize: 14px;

// --- Colors ---
$black: #000;
$white: #fff;
$tongue: red;
$wall: #F0A202;

// --- Mixins ---

@mixin absoluteCenter {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@mixin absolute-horizontal-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%); 
}

// --- Classes to extend --- 

.pseudo {
	content: '';
	position: absolute;
}


// --- Style declarations ---

body {
	font-size: $fontsize;
	//background: #F0A202;
	background: #87A330;
}

.container {
	height: 40em;
	width: 40em;
	@include absoluteCenter;
}

.panda {
	height: 15em;
	width: 15em;
	position: relative;
	top: 16em;
	left: (20em - 15em / 2);
	
	background: $white;
	border-radius: 7em 7em 0 0;
	border: 0.5em solid $black;
	
	animation: peekWall;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 2s;
	animation-timing-function: ease-in-out;
	
	// Ears
	&:after, &:before {
		@extend .pseudo;
		background: $black;
		width: 4em;
		height: 5em;
		top: -2em;
		z-index: -1;
		
		// Shape
		border-radius: 3.5em 2.5em 2em 3em;
	}
	
	// Left ear
	&:before {
		left: 0.25em;
		transform: rotate(-10deg);
	}
	
	// Right ear
	&:after {
		transform: rotate(10deg) scaleX(-1); // Flip horizontally
		right: 0.25em;
	}
}

.nose, .ear, .eye, .mouth {
	background: $black;
}

.eye {
	width: 5em;
	height: 4em;
	position: absolute;
	top: 3em;
		
	&.left {
		left: 2em;
		transform: rotate(-20deg);
		border-radius: 2.8em 3em 4em 2em / 3em 2em;
	}
	
	&.right {
		right: 2em;
		transform: rotate(20deg);
		border-radius: 3em 2.8em 2em 4em / 2em 3em;
	}

	&:before {
		@extend .pseudo;
		height: 1.5em;
		width: 1.5em;
		background: $black;
		border: 0.1em solid $white;
		box-sizing: border-box;
		border-radius: 50%;
	}
		
	&.left:before {
		top: 1em;
		left: 2em;
	}
	
	&.right:before {
		top: 1em;
		left: 1.2em;
	}
	
	// Light in the eyes
	&:after {
		@extend .pseudo;
		height: 0.5em;
		width: 0.5em;
		background: $white;
		border-radius: 50%;
	}
	
	&.left:after {
		top: 1.3em;
		left: 2.7em;
	}
	
	&.right:after {
		top: 1.2em;
		left: 1.7em;
	}
}

.nose {
	@include absolute-horizontal-center;
}

.nose {
	height: 1em;
	width: 1.5em;
	top: 6.25em;
	
	border-radius: 1em 1em 1.5em 1.5em;
}

.mouth {
	height: 1.5em;
	width: 0.5em;
	
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 7.25em;
	
	border-top: none;
	border-left: 2em solid $white;
	border-right: 2em solid $white;
	
	&:before {
		@extend .pseudo;
		background: $black;
		height: 0.5em;
		width: 2.5em;
		top: 1.2em;
		@include absolute-horizontal-center;
		border-radius: 0.5em;
	}
}

.tongue {
	height: 1.5em;
	width: 1.4em;
	background: $tongue;
	@include absolute-horizontal-center;
	top: 7.25em;
	
	border-radius: 0 0 50% 50%;
	border: 0.2em solid $black;
	border-top: none;
	
	animation: showTongue;
	animation-duration: 2.5s;
	animation-delay: 3.5s;
	animation-iteration-count: infinite;
	//animation-timing-function: ease-in-out;
	
	&:before {
		@extend .pseudo;
		width: 0.25em;
		height: 1em;
		@include absolute-horizontal-center;
		background: $black;
		border-radius: 0 0 50% 50%;
	}
}

.wall {
	width: 80%;
	@include absolute-horizontal-center;
	height: 40%;
	position: absolute;
	bottom: 10%;
	background: $wall;
	border: 0.5em solid $black;
	box-sizing: border-box;
	
	// Hands
	&:before, &:after {
		@extend .pseudo;
		height: 3em;
		width: 4em;
		background: $black;
		top: -1.5em;
		
		border-radius: 3.5em 2.5em 5em 4em;
	}
	
	&:before {
		left: 7em;
		transform: rotate(-10deg);
	}
	
	&:after {
		transform: scaleX(-1) rotate(-10deg);
		right: 6em;
	}
}




// --- Animations ---

@keyframes peekWall {
	0% { top: 16em; }
	45% { top: 8.5em; }
	55% { top: 8.5em; }
	100% { top: 16em; }
}

@keyframes showTongue {
	0% { top: 7.25em; }
	45% { top: 8.75em; }
	55% { top: 8.75em; }
	100% { top: 7.25em; }
}