html {
	height: 100%;
}
body {
	background: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6)), linear-gradient(#EEE, #FFF, #FFF, #999);
}
.creature {
	width: 250px;
	height: 250px;
	background: rgb(188, 37, 37);
	border-radius: 10% 10% 30% 30%;
	border-bottom: 20px solid rgb(140, 23, 23);
	border-right: 5px solid rgb(140, 23, 23);
	border-left: 5px solid rgb(140, 23, 23);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -125px;
	-webkit-animation: jump 2s ease-in-out 0s infinite;
	animation: jump 2s ease-in-out 0s infinite;
}
.creature:after, .creature:before {
	content: "";
	width: 30%;
	height: 60%;
	position: absolute;
	bottom: -30%;
	left: -5px;
	background: rgb(188, 37, 37);
	border-right: 5px solid rgb(140, 23, 23);
	border-bottom: 5px solid rgb(140, 23, 23);
	border-top: 5px solid transparent;
	border-radius: 0px 0px 12px 12px;
}
.creature:before {
	border-right: none;
	border-left: 5px solid rgb(140, 23, 23);
}
.creature:after {
	left: auto;
	right: -5px;
}
.creature .eyes>div:first-child, .creature .eyes>div:last-child {
	width: 50px;
	height: 50px;
	background: black;
	border-radius: 50%;
	position: absolute;
	top: 25%;
	left: 15%;
}
.creature .eyes>div:first-child:after, .creature .eyes>div:last-child:after {
	content: "";
	width: 40%;
	height: 20%;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 20%;
	left: 15%;
	transform: rotate(-20deg);
}
.creature .eyes>div:last-child:before {
	content: "";
	width: 15%;
	height: 15%;
	background: white;
	border-radius: 50%;
	position: absolute;
	bottom: 25%;
	right: 20%;
}
.creature .eyes>div:first-child:before {
	content: "";
	width: 110%;
	height: 60%;
	background: rgb(129, 32, 32);
	border-radius: 38%;
	position: absolute;
	bottom: -24%;
	right: -10%;
	transform: rotate(-15deg);
}
.creature .eyes>div:last-child {
	left: auto;
	right: 15%;
}
.creature .mouth {
	position: absolute;
	bottom: 18%;
	left: 10%;
	width: 80%;
	border-radius: 50%;
	height: 60px;
	border-bottom: 60px solid #FFF;
	z-index: 999;
}
.creature .mouth:before {
	content: "";
	position: absolute;
	top: 101%;
	left: 28%;
	width: 14%;
	height: 43%;
	background: black;
	border-radius: 7px;
	border-top: 5px solid #FF9898;
}
.creature .sticks:after, .creature .sticks:before {
	content: "";
	position: absolute;
	top: 10%;
	left: 20%;
	width: 15%;
	height: 5%;
	background: white;
	border-radius: 4px;
	border: 2px solid #000;
	transform: rotate(45deg);
}
.creature .sticks:before {
	transform: rotate(-45deg);
	background: #DDD;
}
.creature .hands .left {
	width: 41%;
	height: 30%;
	background: rgb(188, 37, 37);
	border-top: 6px solid rgb(140, 23, 23);
	position: absolute;
	top: 48%;
	left: -27%;
	border-radius: 10px 2px 5px 10px;
	transform: rotate(-42deg);
	z-index: -1
}
.creature .hands .right {
	width: 41%;
	height: 30%;
	background: rgb(188, 37, 37);
	border-bottom: 6px solid rgb(140, 23, 23);
	position: absolute;
	top: 28%;
	right: -26%;
	border-radius: 2px 10px 10px 5px;
	transform: rotate(-42deg);
	z-index: -1;
	-webkit-animation: handshake 2s ease-in-out 0s infinite;
	animation: handshake 2s ease-in-out 0s infinite;
}
.shadow {
	width: 400px;
	height: 80px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 200px;
	position: absolute;
	background: rgba(0,0,0,0.3);
	border-radius: 50%;
	/*-webkit-filter: blur(20px);*/
	z-index: -1;
	-webkit-animation: shadow 2s ease-in-out 0s infinite;
	animation: shadow 2s ease-in-out 0s infinite;
}
p {
	font-family: Segoe UI;
	color: black;
	font-size: 15px;
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 5px;
	opacity: 0.5;
	text-shadow: 0px 1px 5px rgba(0,0,0,0.4);
	transition-duration: 0.3s;
	cursor: default;
	left: 0;
}
p:hover { opacity: 1; }
p a {
	text-decoration: none;
	transition-duration: 0.3s;
	opacity: 0.8;
}
p a:hover {
	opacity: 1;
}
p span:nth-of-type(1){
	color: rgb(237, 117, 117);
	font-weight: bold;
}
p span:nth-of-type(2){
	color: rgb(237, 117, 117);
}
p span:nth-of-type(3){
	font-weight: bold;
}

@-webkit-keyframes handshake {
	0% { transform: rotate(-22deg); top: 34%; }
	5% { transform: rotate(-42deg); top: 28%; }
	10% { transform: rotate(-22deg); top: 34%; }
	15% { transform: rotate(-42deg); top: 28%; }
	20% { transform: rotate(-22deg); top: 34%; }
	25% { transform: rotate(-42deg); top: 28%; }
	30% { transform: rotate(-22deg); top: 34%; }
	100% { transform: rotate(-22deg); top: 34%; }
}
@-webkit-keyframes jump {
	20% {
		top: 30%;
		transform: scaleY(1.1);
	}
	35% {
		top: 53%;
	}
	40% {
		top: 53%;
		transform: scaleY(0.9);
	}
	50% {
		top: 50%;
		transform: scaleY(1);
	}
}
@-webkit-keyframes shadow {
	20% {
		width: 500px;
	}
	40% {
		width: 400px;
	}
}




@keyframes handshake {
	0% { transform: rotate(-22deg); top: 34%; }
	5% { transform: rotate(-42deg); top: 28%; }
	10% { transform: rotate(-22deg); top: 34%; }
	15% { transform: rotate(-42deg); top: 28%; }
	20% { transform: rotate(-22deg); top: 34%; }
	25% { transform: rotate(-42deg); top: 28%; }
	30% { transform: rotate(-22deg); top: 34%; }
	100% { transform: rotate(-22deg); top: 34%; }
}
@keyframes jump {
	20% {
		top: 30%;
		transform: scaleY(1.05);
	}
	35% {
		top: 53%;
	}
	40% {
		top: 53%;
		transform: scaleY(0.9);
	}
	50% {
		top: 50%;
		transform: scaleY(1);
	}
}
@keyframes shadow {
	20% {
		width: 500px;
	}
	40% {
		width: 400px;
	}
}