.container--center
	h2 Dancing pug
	.dancing-pug
		ul
			li.ear
			li.ear
			li.eye
			li.eye
			li

/* Import Font */

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


/* Color palette */

$pug-skin: #FFDBB2;
$pug-skin--darker: #FFD6A8;
$pug-details: #794932;
$pug-details--darker: #4F200A;
$main-color: #ED5754;


/* General Styles */

body {
	background-color: $main-color;
	font-family: 'Lato', sans-serif;
}

h2 {
	color: $pug-skin;
	text-transform: uppercase;
}


/* Common Styles */

.absolute-center {
	display: block;
	position: absolute;
	margin: auto;
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}

.absolute-auto {
	display: block;
	position: absolute;
	margin: auto;
}

.container--center {
	@extend .absolute-center;
	position: absolute;
	height: 240px;
	width: 240px;
	text-align: center;
}


/* Pug */

.dancing-pug {
	@extend .absolute-center;
	height: 100px;
	width: 100px;
	&:before {
		display: block;
		content: '';
		position: absolute;
		bottom: 0;
		height: 40px;
		width: 100%;
		border-radius: 40px 40px 0 0;
		background-color: $pug-skin--darker;
	}
}

ul {
	@extend .absolute-auto;
	height: 80px;
	width: 80px;
	padding: 0;
	left: 10px;
	background-color: $pug-skin;
	border-radius: 50px;
	list-style: none;
	animation: pugdancing 1s ease-in-out infinite;
	&:after {
		display: block;
		content: '•	';
		color: $pug-details--darker;
		position: absolute;
		z-index: 2;
		margin: auto;
		bottom: 14px;
		left: 0;
		right: 0;
		height: 30px;
		width: 40px;
		border-radius: 20px;
		background-color: $pug-details;
	}
}

li {
	@extend .absolute-auto;
}

.ear {
	width: 0;
	z-index: 3;
	border-color: transparent;
	border-style: solid;
	border-width: 20px 16px;
}

li:nth-child(1) {
	border-top-color: $pug-details;
	top: 6px;
	left: -14px;
}

li:nth-child(2) {
	border-top-color: $pug-details;
	top: 6px;
	right: -14px;
}

.eye {
	background-color: $pug-details--darker;
	height: 18px;
	width: 18px;
	z-index: 3;
	border-radius: 9px;
}

li:nth-child(3) {
	left: 4px;
	top: 30px;
}

li:nth-child(4) {
	right: 4px;
	top: 30px;
}

li:nth-child(5) {
	height: 20px;
	width: 20px;
	background-color: $main-color;
	border-radius: 0 0 10px 10px;
	z-index: 5;
	bottom: 4px;
	left: 50%;
	margin-left: -10px;
}


/* Pug animation */

@keyframes pugdancing {
	0% { left: 5px; top: 0 }
	25% { left: 10px; top: 10px }
	50% { left: 15px; top: 0px }
	75% { left: 10px; top: 10px }
	100% { left: 5px; top: 0px }
}

// Design made by Angela Velasquez, me :D.

// It also was a challenge accepted on the UX Enpterprise Team: PUX

//I took the original idea from https://www.goabstract.com 

// July 2017.