CSS quests

.owl {
	position: absolute;
	left: 50%;
	top: 50%;
}

.head {
	height: 100px;
	width: 100px;
	border-radius: 50px;
	background-color: #369479;
	position: relative;
	z-index: 2;
	animation: headBob 4s infinite;
}

.leftEye {
	height: 60px;
	width: 60px;
	border-radius: 30px;
	background-color: #FFF0C7;
	position: relative;
	top: 20px;
	left: 5px;
	overflow: hidden;
}

.blinker1 {
	height: 60px;
	width: 60px;
	background-color: #FFF0C7;
	position: absolute;
	top: -70px;
	left: -20px;
	z-index: 20;
	animation: topLeftBlink 4s infinite;
}

.blinker2 {
	height: 60px;
	width: 60px;
	background-color: #FFF0C7;
	position: absolute;
	top: 35px;
	left: -20px;
	z-index: 20;
	animation: bottomLeftBlink 4s infinite;
}

.blinker3 {
	height: 60px;
	width: 60px;
	background-color: #FFF0C7;
	position: absolute;
	top: -70px;
	left: -5px;
	z-index: 20;
	border-bottom: 1px solid black;
	animation: bottomRightBlink 4s infinite;
}

.blinker4 {
	height: 60px;
	width: 60px;
	background-color: #FFF0C7;
	position: absolute;
	top: 35px;
	left: -5px;
	z-index: 20;
	border-top: 1px solid black;
	animation: topRightBlink 4s infinite;
}

.rightEye {
	height: 60px;
	width: 60px;
	border-radius: 30px;
	background-color: #FFF0C7;
	position: relative;
	top: -40px;
	left: 35px;
	overflow: hidden;
}

.leftInnerEye {
	height: 35px;
	width: 35px;
	background-color: #A588A6;
	border-radius: 20px;
	position: relative;
	top: 12px;
	left: 10px;
	z-index: 2;
}

.rightInnerEye {
	height: 35px;
	width: 35px;
	background-color: #A588A6;
	border-radius: 20px;
	position: relative;
	top: 12px;
	left: 15px;
	z-index: 2;
}

.leftIris {
	background-color: #000;
	width: 25px;
	height: 25px;
	border-radius: 20px;
	position: relative;
	top: 5px;
	left: 5px;
}

.rightIris {
	background-color: #000;
	width: 25px;
	height: 25px;
	border-radius: 20px;
	position: relative;
	top: 5px;
	left: 5px;
	z-index: 3;
}

.Highlight {
 	height: 10px;
	width: 10px;
	background-color: #fff;
	border-radius: 10px;
}

.beak {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid yellow;
	transform: rotate(180deg);
	position: relative;
	top: -45px;
	left: 40px;
}

.body {
	background-color: #89CDB4;
	height: 100px;
	width: 100px;
	border-radius: 100px;
	position: relative;
	top: -40px;
	z-index: 0;
}

.wing1 {
	height: 60px;
	width: 40px;
	border-radius: 40px 20px/60px;
	background-color: #369479;
	position: relative;
	top: 20px;
	left: -5px;
}

.wing2 {
	height: 60px;
	width: 40px;
	border-radius: 40px 20px/60px;
	background-color: #369479;
	position: relative;
	top: -40px;
	left: 65px;
	transform: scaleX(-1);
}

.oval1 {
	background-color: #369479;
	height: 8px;
	width: 5px;
	position: relative;
	z-index: 5;
	left: 50px;
	top: -75px;
	border-radius: 5px/8px;
}

.oval2 {
	background-color: #369479;
	height: 8px;
	width: 5px;
	position: relative;
	z-index: 5;
	left: 55px;
	top: -65px;
	border-radius: 5px/8px;
}

.oval3 {
	background-color: #369479;
	height: 8px;
	width: 5px;
	position: relative;
	z-index: 5;
	left: 35px;
	top: -80px;
	border-radius: 5px/8px;
}

.oval4 {
	background-color: #369479;
	height: 8px;
	width: 5px;
	position: relative;
	z-index: 5;
	left: 40px;
	top: -70px;
	border-radius: 5px/8px;
}

.oval5 {
	background-color: #369479;
	height: 8px;
	width: 5px;
	position: relative;
	z-index: 5;
	left: 60px;
	top: -80px;
	border-radius: 5px/8px;
}

.leftFoot {
	transform: rotate(5deg);
	position: relative;
	top: 3px;
	left: -10px;
}

.leftToe1 {
	background-color: yellow;
	height: 10px;
	width: 4px;
	position: relative;
	top: -50px;
	left: 30px;
	border-radius: 10px/8px;
	transform: rotate(10deg);
}

.leftToe2 {
	background-color: yellow;
	height: 10px;
	width: 4px;
	position: relative;
	top: -60px;
	left: 34px;
	border-radius: 10px/8px;
	transform: rotate(0deg);
}

.leftToe3 {
	background-color: yellow;
	height: 10px;
	width: 4px;
	position: relative;
	top: -70px;
	left: 38px;
	border-radius: 10px/8px;
	transform: rotate(0deg);
}

.rightFoot {
	transform: rotate(-5deg);
	position: relative;
	top: -30px;
	left: 40px;
}

.rightToe1 {
	background-color: yellow;
	height: 10px;
	width: 4px;
	position: relative;
	top: -50px;
	left: 30px;
	border-radius: 10px/8px;
	transform: rotate(-10deg);
}

.rightToe2 {
	background-color: yellow;
	height: 10px;
	width: 4px;
	position: relative;
	top: -60px;
	left: 34px;
	border-radius: 10px/8px;
	transform: rotate(0deg);
}

.rightToe3 {
	background-color: yellow;
	height: 10px;
	width: 4px;
	position: relative;
	top: -70px;
	left: 38px;
	border-radius: 10px/8px;
	transform: rotate(0deg);
}

.crescent1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: inset 16px 0px #89CDB4, inset 16px 0px 1px 2px #369479;
	position: relative;
	top: -130px;
	left: 5px;
	transform: rotate(110deg);
	z-index: 10;
}

.crescent2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: inset 16px 0px #89CDB4, inset 16px 0px 1px 2px #369479;
	position: relative;
	top: -180px;
	left: 45px;
	transform: rotate(85deg);
	z-index: 9;
}

@keyframes headBob {
	0% {left: 0px; top: 0px;}
	10% {left: 10px; top: 10px;}
	20% {left: 0px; top: 0px;}
	30% {left: -20px; top: 0px;}
	40% {left: 10px; top: 0px;}
	50% {left: 0px; top: 0px;}
	60% {left: 0px; top: -10px;}
	70% {left: -5px; top: 5px;}
	80% {left: 2px; top: 0px;}
	90% {left: 0px; top: 5px;}
	100% {left: 0px; top: 0px;}
}

@keyframes topLeftBlink {
	0% {top: -70px;}
	10% {top: -45px;}
	20% {top: -70px;}
	100% {top: -70px;}
}

@keyframes bottomLeftBlink {
	0% {top: 35px;}
	10% {top: 15px;}
	20% {top: 35px;}
	100% {top: 35px;}
}

@keyframes topRightBlink {
	0% {top: -70px;}
	20% {top: -70px;}
	30% {top: -45px;}
	40% {top: -70px;}
	100% {top: -70px;}
}

@keyframes bottomRightBlink {
	0% {top: 35px;}
	20% {top: 35px;}
	30% {top: 15px;}
	40% {top: 35px;}
	100% {top: 35px;}
}