Animal Quiz

animal-quiz.markdown

Animal Quiz

A Pen by David Jenner on CodePen.

License.

index.html

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<!-- main - right & answer - left -->
<div class="main">
  <!-- The animal to the left -->
  <div class="animal">
    <div class="cat body bodySlant earsBasic">
  <div class="face"></div>
  <div class="features"></div>
</div>

<div class="sheep body">
  <div class="face"></div>
  <div class="features"></div>
</div>

<div class="dog body bodySlant earsBasic">
  <div class="face"></div>
  <div class="features"></div>
</div>
    
  </div>

  <!-- The answer to the right -->
  <div class="answer">
    
   <!-- Answer 1 -->
  <div class="answer1">
    <button class="answer1btn">Meoooooow!</button>
  </div>  
  
   <!-- Answer 2 -->
  <div class="answer2">
    <button class="answer2btn">Woof Woof!</button>
  </div>   
    
  </div>
 
  
</div>

  <!-- The selection along the bottom -->
  <div class="selection">
    <button class="catbtn">Cat</button>
    <button class="sheepbtn">Sheep</button>
    <button class="dogbtn">Dog</button>
  </div>
  

style.scss

*{
  font-family: 'Fredoka One', cursive;
  font-size: 20pt;
  color: #333;
}
button{
  background: #fff;
  border-radius: 40px;
  margin: 10px;
}

.main{
  float: clear;
}
.animal{
  float: left;
  border: 0px solid red;
  width: 50%;
  height: 300px;
}
.answer{
  float: right;
  border: 0px solid blue;
  width: 45%;
  height: 300px;
}
.answer1btn, .answer2btn{
  padding: 40px 80px 40px 80px;
  border-radious: 60px;
}
.selection{
  border: 0px solid green;
  position: absolute;
  top: 320px;
  width: 100%;
  height: 100px;
}
.catbtn, .sheepbtn, .dogbtn{
  padding: 40px 80px 40px 80px;
  border-radious: 60px;
}
// all animals have this default setup for body, face and features elements
// saves setting it up each time
.body {
	width: 90px;
	height: 100px;

	&, &:before, &:after {
	position: absolute;
	}
	&:before, &:after {
	content: '';
	}
}
	.face,
	.features {
		&, &:before, &:after {
			position: absolute;
		}
		&:before, &:after {
			content: '';
		}
	}

// Specific styles

$defaultBodyColor: #e6ac4c;

//Slanted Body
.bodySlant {
	background-color: $defaultBodyColor;
	border-radius: 4px;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(20deg);
}

.earsBasic {
	// A basic style for Ears
	&:before,
	&:after {
		width: 0;
		height: 0;

		top: -25px;

		border-top: 28px solid transparent;
		border-bottom: 20px solid transparent;
	}

	&:before {
		border-left: 20px solid $defaultBodyColor;
		left: 0;
	}
	&:after {
		border-right: 20px solid $defaultBodyColor;
		right: 0;
	}
}


// Styling for the Cat
// uses bodySlant and earsBasic as a base
.cat {
	top: 60px;
	left: 50px;

	.face {
		// Eyes
		top: 22px;
		left: 20px;
		width: 6px;
		height: 6px;
		background-color: #000;

		border-radius: 50%;
		box-shadow: 44px 0 #000;
		animation: blink 8s infinite linear;

		// Mouth
		&:before,
		&:after {
			top: 14px;
			left: 6px;
			z-index: 5;
			width: 16px;
			height: 20px;
			border-radius: 50% / 40%;
			border-right: 2px solid #000;
			border-bottom: 2px solid #000;
			border-left: 2px solid transparent;
			border-top: 2px solid transparent;

			box-shadow: 0px 0px #000;
		}

		//Rotated to make other side of mouth
		&:after {
			left: 24px;
			transform: rotateY(180deg);
		}
	}
	.features {
		//Whiskers
		top: 44px;
		left: 11px;
		width: 20px;
		height: 1px;

		background-color: #000;
		box-shadow: 0 5px #000,
		48px 0 #000,
		48px 5px #000;

		//nose
		&:after {
			left: 30px;
			top: -6px;
			width: 6px;
			height: 6px;
			background-color: #000;

			border-radius: 50%;

			box-shadow: 2px 0 #000,
				1px 1px #000;

			animation: yawn 8s infinite linear;
		}
		&:before {
			//Tail
			top: 10px;
			left: 74px;
			width: 40px;
			height: 40px;

			border-radius: 50%;
			border: 5px solid $defaultBodyColor;
			border-left: 0;
			border-top: 0;
		}
	}
}


@keyframes blink {
	32% { height: 6px; }
	38% { height: 1px; }
	42% { height: 1px; }
	48% { height: 6px; }
}
@keyframes yawn {
	32% {
		box-shadow: 2px 0 #000,
				1px 1px #000,
				0px 16px transparent,
				2px 16px transparent,
				1px 18px transparent;
	}
	35% {
		box-shadow: 2px 0 #000,
				1px 1px #000,
				0px 16px #650000,
				2px 16px #650000,
				1px 18px transparent;
	}
	38% {
		box-shadow: 2px 0 #000,
				1px 1px #000,
				0px 16px #650000,
				2px 16px #650000,
				1px 18px #650000;
	}
	42% {
		box-shadow: 2px 0 #000,
				1px 1px #000,
				0px 16px #650000,
				2px 16px #650000,
				1px 18px #650000;
	}
	45% {
		box-shadow: 2px 0 #000,
				1px 1px #000,
				0px 16px #650000,
				2px 16px #650000,
				1px 18px transparent;
	}
	48% {
		box-shadow: 2px 0 #000,
				1px 1px #000,
				0px 16px transparent,
				2px 16px transparent,
				1px 18px transparent;
	}
}

// Sheep
// Doesn’t use the base body, he’s cooler than that…
$sheepBodyColor: #dbdbdb;
$sheepShadowColor: #b4b4b4;

.sheep {
	//Body
	top: 90px;
	left: 250px;

	width: 50px;
	height: 50px;

	border-radius: 50%;
	background-color: $sheepBodyColor;

	box-shadow:
	40px 0 $sheepBodyColor,
	-40px 0 $sheepBodyColor,

	41px 0 $sheepShadowColor,
	-41px 0 $sheepShadowColor,

	-23px -25px $sheepBodyColor,
	-24px -26px $sheepShadowColor,

	9px -28px $sheepBodyColor,
	8px -29px $sheepShadowColor,

	28px -25px $sheepBodyColor,
	28px -26px $sheepShadowColor,

	-23px 15px $sheepBodyColor,
	-24px 16px $sheepShadowColor,

	23px 15px $sheepBodyColor,
	24px 16px $sheepShadowColor,

	-1px 18px $sheepBodyColor;

	// Head
	&:before {
		left: 4px;
		top: 0;
		width: 40px;
		height: 70px;

		background-color: #000;
		transform: perspective(300px)	rotateX(-60deg);
		border-radius: 4px 4px 40% 40%;
	}
	//Not used atm
	&:after {
	}

	.face {
		// Eyes
		top: 25px;
		left: 16px;
		width: 4px;
		height: 4px;
		z-index: 5;

		background-color: #fff;
		border-radius: 50%;
		box-shadow: 12px 0 #fff;

		// Ears
		&:before,
		&:after {
			top: -25px;
			width: 0;
			height: 0;

			border-top: 15px solid transparent;
			border-bottom: 15px solid transparent;
			border-radius: 8px;
			transform: perspective(300px)	rotateX(-60deg);
		}
		&:before {
			border-left: 15px solid #000;
			left: -14px;
		}
		&:after {
			border-right: 15px solid #000;
			right: -26px;
		}
	}
	.features {
		// Grass
		&:after {
			top: 54px;
			left: -8px;
			width: 6px;
			height: 20px;

			border-radius: 50% 50% 0 0 / 100%;
			background-color: green;

			box-shadow: 5px 2px green,
				10px 0 green,
				15px 2px green,
				20px 0 green,
				25px 2px green,
				30px 0 green,
				35px 2px green,
				40px 0 green,
				45px 2px green,
				50px 0 green,
				55px 2px green,
				60px 0 green;
		}

	}
} //end of sheep


// dog
$dogBodyColor : #a3701d;

.dog {
	left: 400px;
	top: 60px;
	background-color: $dogBodyColor;

	// Ears
	&:before {
		top: -28px;
		left: 0;
		width: 0;
		height: 0;
		border-left: 30px solid $dogBodyColor;
		border-radius: 30% 0 0 / 40% 40% 0 0;

		border-top: 28px solid transparent;
		border-bottom: 20px solid transparent;
	}
	&:after {
		right: 0;
		z-index: -5;
		border-right: 30px solid #a3701d;
		border-radius: 0 15px 0 0;
	}

	.face {
		//eyes and nose
		top: 22%;
		left: 22%;
		width: 6px;
		height: 6px;

		background-color: #000;
		border-radius: 50%;

		box-shadow: 44px 0 #000,
			19px 15px #000,
			21px 15px #000,
			23px 15px #000,
			25px 15px #000,

			22px 18px #000;

		// Mouth
		&:before,
		&:after {
			top: 14px;
			left: 6px;
			width: 16px;
			height: 20px;
			border-radius: 50% / 40%;
			border-right: 2px solid #000;
			border-bottom: 2px solid #000;
			border-left: 2px solid transparent;
			border-top: 2px solid transparent;

			box-shadow: 0px 0px #000;
		}
		&:after {
			left: 24px;
			transform: rotateY(180deg);
		}
	}

	.features {
		// Patch over right eye
		right: 6px;
		top: 5px;
		z-index: -1;
		width: 30px;
		height: 35px;
		background-color: #d6d6d6;

		border-radius: 50% 40% 40% 50% / 30% 30% 30% 30%;

		//tongue
		&:after {
			top: 51px;
			right: 34px;
			width: 10px;
			height: 10px;

			background-color: #df4f4f;
			border-radius: 0 0 50% 50%;

			animation: tongue 1s infinite ease-in;
		}
		//tail
		&:before {
			top: 35px;
			right: -35px;
			z-index: -1;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 5px solid #a3701d;
			border-left: 0;
			border-top: 0;

			box-shadow: 3px 0 #f1f1f1,
			6px 5px #a3701d,
			9px 5px #f1f1f1,
			10px 12px #a3701d;

			animation: wag 5s infinite ease-in-out;
		}
	}
}


@keyframes tongue {
	0% { height: 10px; }
	50% { height: 13px; }
}
@keyframes wag {
	10% { top: 25px; right: -30px; transform: rotate(-20deg); }
	20% { top: 35px; right: -35px; transform: rotate(0); }
	30% { top: 25px; right: -30px; transform: rotate(-20deg); }
	40% { top: 35px; right: -35px; transform: rotate(0); }
	50% { top: 30px; right: -32px; transform: rotate(-10deg); }
	60% { top: 35px; right: -35px; transform: rotate(0); }
}



// Bear Styling
// Uses slanted body styling
$bearBodyColor: #5a3d0d;
$bearPatchesColor: #d0ba96;
$bearEyeColor: #2f1f05;

.bear {
	top: 40px;
	left: 590px;
	height: 120px;

	background-color: $bearBodyColor;

	&.alt {
		left: 60px;
		top: 230px;
		width: 70px;
		height: 70px;
		border-radius: 50% / 45% 45% 35% 35%;

		box-shadow:
			//body section and patch
			0 54px 0 -12px $bearPatchesColor,
			0 54px 0 2px $bearBodyColor,

			//ears
			-18px -23px 0 -25px $bearPatchesColor,
			18px -23px 0 -25px $bearPatchesColor,
			-18px -23px 0 -20px $bearBodyColor,
			18px -23px 0 -20px $bearBodyColor,

			//legs
			-17px 84px 0 -22px $bearBodyColor,
			17px 84px 0 -22px $bearBodyColor;

		&:before {
			//paws
			left: -16px;
			top: 56px;
			width: 30px;
			height: 25px;

			background-color: $bearBodyColor;
			border-radius: 50% / 40%;

			box-shadow:
				-1px 0 $bearPatchesColor,
				//right paw
				72px 0 $bearBodyColor,
				73px 0 $bearPatchesColor;
		}
		&:after {
			display: none;
		}

		.face {
			left: 20px;
		}
		.features {
			display: none;
		}
	}

	//ears
	&:before {
		top: -22px;
		left: 0;
		width: 35px;
		height: 26px;

		background-color: $bearBodyColor;

		border-radius: 50% 50% 0 0 / 70%;

		box-shadow: 55px 0 $bearBodyColor;
	}

	//paws
	&:after {
		top: 50px;
		left: -12px;
		width: 14px;
		height: 15px;

		background-color: $bearPatchesColor;
		border-radius: 40%;

		box-shadow:
			//right paw
			100px 0 $bearPatchesColor,
			97px 0px 0px 8px $bearBodyColor,

			//left paw
			3px 0px 0px 8px $bearBodyColor,

			18px 65px $bearPatchesColor,
			18px 65px 0px 6px $bearBodyColor,
			82px 65px $bearPatchesColor,
			82px 65px 0px 6px $bearBodyColor;

			animation: wave 8s infinite linear;
	}

	.face {
		//Background nose spot
		top: 24px;
		left: 30px;
		width: 30px;
		height: 30px;

		background-color: $bearPatchesColor;
		border: 0;
		border-radius: 50%;

		&:before {
			// Eyes and nose
			top: 5px;
			left: 11px;
			z-index: 5;
			width: 8px;
			height: 8px;
			background-color: $bearEyeColor;

			border-radius: 50%;

			box-shadow:
				-3px 0 $bearEyeColor,
				-2px 0 $bearEyeColor,
				2px 0 $bearEyeColor,
				3px 0 $bearEyeColor,
				0 3px $bearEyeColor,

				//eyes
				-12px -12px $bearEyeColor,

				12px -12px $bearEyeColor,

				// 19px 18px $bearEyeColor,
				// 21px 18px $bearEyeColor,
				// 23px 18px $bearEyeColor,
				// 25px 18px $bearEyeColor,
				// 22px 21px $bearEyeColor
		}
		&:after {
			//mouth
			left: 12px;
			top: 11px;
			width: 10px;
			height: 10px;
			border-bottom: 3px solid #000;

			border-radius: 40%;
			transform: rotate(-30deg);
		}
	}
	// Belly patch
	.features {
		top: 65px;
		left: 23px;
		width: 45px;
		height: 45px;

		background-color: $bearPatchesColor;
		border-radius: 40%;

		&:before {
			//ear patches
			top: -77px;
			left: -12px;
			width: 14px;
			height: 8px;

			background-color: $bearPatchesColor;
			border-radius: 50% 50% 0 0 / 70%;

			box-shadow: 55px 0 $bearPatchesColor;
		}
		&:after {

		}
	}
}

@keyframes wave {
	50% {
		box-shadow:
			//right paw
			100px 0 $bearPatchesColor,
			97px 0px 0px 8px $bearBodyColor,

			//left paw
			3px 0px 0px 8px $bearBodyColor,

			18px 65px $bearPatchesColor,
			18px 65px 0px 6px $bearBodyColor,
			82px 65px $bearPatchesColor,
			82px 65px 0px 6px $bearBodyColor;
	}
	55% {
		box-shadow:
			//right paw
			99px -6px $bearPatchesColor,
			96px -6px 0px 8px $bearBodyColor,

			//left paw
			3px 0px 0px 8px $bearBodyColor,

			18px 65px $bearPatchesColor,
			18px 65px 0px 6px $bearBodyColor,
			82px 65px $bearPatchesColor,
			82px 65px 0px 6px $bearBodyColor;
	}
	60% {
		box-shadow:
			//right paw
			100px 0 $bearPatchesColor,
			97px 0 0px 8px $bearBodyColor,

			//left paw
			3px 0px 0px 8px $bearBodyColor,

			18px 65px $bearPatchesColor,
			18px 65px 0px 6px $bearBodyColor,
			82px 65px $bearPatchesColor,
			82px 65px 0px 6px $bearBodyColor;
	}
	65% {
		box-shadow:
			//right paw
			99px -6px $bearPatchesColor,
			96px -6px 0px 8px $bearBodyColor,

			//left paw
			3px 0px 0px 8px $bearBodyColor,

			18px 65px $bearPatchesColor,
			18px 65px 0px 6px $bearBodyColor,
			82px 65px $bearPatchesColor,
			82px 65px 0px 6px $bearBodyColor;
	}
	70% {
		box-shadow:
			//right paw
			100px 0 $bearPatchesColor,
			97px 0 0px 8px $bearBodyColor,

			//left paw
			3px 0px 0px 8px $bearBodyColor,

			18px 65px $bearPatchesColor,
			18px 65px 0px 6px $bearBodyColor,
			82px 65px $bearPatchesColor,
			82px 65px 0px 6px $bearBodyColor;
	}
}


// lion
$lionBodyColor: #df8f2b;
$lionManeColor: #b2701e;

.lion {
	top: 230px;
	left: 240px;

	//head outline
	width: 70px;
	height: 70px;
	background-color: $lionBodyColor;
	border-radius: 50% / 45% 45% 35% 35%;

	box-shadow:
		//mane
		-13px -29px 0 -15px $lionManeColor,
		-29px -8px 0 -15px $lionManeColor,
		-23px 19px 0 -15px $lionManeColor,
		0px 30px 0 -15px $lionManeColor,
		23px 18px 0 -15px $lionManeColor,
		27px -8px 0 -15px $lionManeColor,
		13px -27px 0 -15px $lionManeColor,

		//legs
		-17px 84px 0 -22px $lionBodyColor,
		17px 84px 0 -22px $lionBodyColor,

		//body section
		0 54px $lionBodyColor;

	&:before {
		//paws
		left: -14px;
		top: 72px;
		width: 25px;
		height: 25px;

		background-color: $lionBodyColor;
		border-radius: 50% / 40%;

		box-shadow: -1px 0 $lionManeColor,
			//right paw
			72px 0 $lionBodyColor,
			73px 0 $lionManeColor;
	}
	&:after {
		//tail
		top: 75px;
		right: -20px;
		z-index: -1;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border-bottom: 5px solid $lionBodyColor;
		border-left: 0;
		border-right: 0;

		box-shadow:
			16px 3px 0 -13px $lionManeColor,
			17px 3px 0 -13px #f1f1f1,
			19px 5px 0 -13px $lionManeColor;
	}

	.face {
		top: 36px;
		left: 32px;
		width: 6px;
		height: 7px;

		background-color: #000;
		border-radius: 50%;

		box-shadow:
			//nose
			-3px 0 #000,
			3px 0 #000,
			0 2px #000,

			//eyes
			-10px -14px #000,
			10px -14px #000;


		// Mouth
		&:before,
		&:after {
			top: 0;
			left: -16px;
			width: 16px;
			height: 20px;
			border-radius: 50% / 40%;
			border-right: 2px solid #000;
			border-bottom: 2px solid #000;
			border-left: 2px solid transparent;
			border-top: 2px solid transparent;

			box-shadow: 0px 0px #000;
		}
		&:after {
			left: 2px;
			transform: rotateY(180deg);
		}
	}
}

//elephant
$elephantBodyColor: #b2ada6;
$elephantWrinkleColor: #78736d;

.elephant {
	top: 230px;
	left: 410px;

	//head outline
	width: 70px;
	height: 70px;
	background-color: $elephantBodyColor;
	border-radius: 50%/ 45% 45% 35% 35%;

	box-shadow:
		//legs
		-17px 84px 0 -22px $elephantBodyColor,
		17px 84px 0 -22px $elephantBodyColor,

		-17px 85px 0 -22px $elephantWrinkleColor,
		17px 85px 0 -22px $elephantWrinkleColor,

		//body section
		0 54px 0 0 $elephantBodyColor;

	&:before {
		//paws
		left: -10px;
		top: 62px;
		z-index: 5;
		width: 25px;
		height: 25px;

		background-color: $elephantBodyColor;
		border-radius: 50% / 40%;

		box-shadow: -1px 0 $elephantWrinkleColor,
			//right paw
			65px 0 $elephantBodyColor,
			66px 0 $elephantWrinkleColor,

			//mouth
			32px -22px 0 -3px $elephantBodyColor,
			36px -18px 0 -5px #000;
	}
	&:after {
		//trunk
		top: 34px;
		left: 18px;
		z-index: 6;
		width: 16px;
		height: 36px;

		//border-radius: 20% 50% 30% 10% / 50% 50% 50% 50%;
		border: 2px solid $elephantWrinkleColor;
		border-top: 0;
		border-radius: 30% 20% 30% 60% / 50% 50% 80% 10%;


		background-color: $elephantBodyColor;

		transform: rotate(25deg);

		animation: trunk 6s infinite linear;
	}

	.face {
		top: 6px;
		left: -17px;

		//ears
		width: 45px;
		height: 52px;
		border-radius: 90% 90% 50% 50% / 80% 80% 30% 30%;
		background-color: $elephantBodyColor;

		box-shadow:
			-1px -1px $elephantWrinkleColor,

			61px 0 $elephantBodyColor,
			62px -1px $elephantWrinkleColor;

		&:after {
			//eyes
			top: 20px;
			left: 38px;
			width: 6px;
			height: 6px;

			background-color: #000;
			border-radius: 50%;

			box-shadow:	20px 0 #000;
		}
		&:before {
			//tail
			top: 65px;
			right: -63px;
			z-index: -1;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border-bottom: 5px solid $elephantBodyColor;
			border-left: 0;
			border-right: 0;

			box-shadow:
				16px 3px 0 -13px $elephantWrinkleColor,
				17px 3px 0 -13px #f1f1f1,
				19px 5px 0 -13px $elephantWrinkleColor;
		}

	}
}

@keyframes trunk {
	0% {
		box-shadow: 0px 0 10px -6px transparent,
			0px 0 10px -6px transparent;
		left: 18px;
		transform: rotate(25deg);
	}
	7.5% {
		box-shadow: 0px 0 10px -6px transparent,
			0px 25px 10px -6px #2a48db;
		left: 14px;
		transform: rotate(40deg);
	}
	15% {
		box-shadow: 0px 25px 10px -6px #2a48db,
			0px 45px 10px -6px #2a48db;
		left: 8px;
		transform: rotate(55deg);
	}
	22.5% {
		box-shadow: -10px 50px 10px -6px transparent,
			-10px 70px 10px -6px #2a48db;
		left: 14px;
		transform: rotate(40deg);
	}
	30% {
		box-shadow: 0px 50px 10px -6px transparent,
			-20px 95px 10px -6px transparent;
		left: 18px;
		transform: rotate(25deg);
	}
}

// monkey
$monkeyBodyColor: #694a16;
$monkeyPatchesColor: #d0ba96;
$monkeyEyeColor: #2f1f05;

.monkey {
	top: 245px;
	left: 760px;
	width: 62px;
	height: 67px;
	border-radius: 50% / 45% 45% 55% 55%;

	background-color: $monkeyBodyColor;

	box-shadow:
		//body section and patch
		0 48px 0 -15px $monkeyPatchesColor,
		0 48px 0 -6px $monkeyBodyColor,

		//ears
		-30px -3px 0 -24px $monkeyPatchesColor,
		29px -3px 0 -24px $monkeyPatchesColor,
		-29px -3px 0 -18px $monkeyBodyColor,
		29px -3px 0 -18px $monkeyBodyColor,

		//legs
		-10px 76px 0 -23px $monkeyBodyColor,
		10px 76px 0 -23px $monkeyBodyColor
		;

	&:before {
		display: none;
		//paws
		left: -16px;
		top: 56px;
		width: 30px;
		height: 15px;

		background-color: $monkeyBodyColor;
		border-radius: 50% / 40%;

		box-shadow:
			-1px 0 $monkeyPatchesColor,
			//right paw
			72px 0 $monkeyBodyColor,
			73px 0 $monkeyPatchesColor;
	}



	.face {
		//Background nose spot
		top: 29px;
		left: 8px;
		width: 46px;
		height: 31px;

		background-color: $monkeyPatchesColor;
		border: 0;
		border-radius: 48%;

		box-shadow:
			//feet
			17px 77px 0 -11px $monkeyPatchesColor,
			-16px 77px 0 -11px $monkeyPatchesColor,

			//arms
			-26px 21px 0 -9px $monkeyBodyColor,
			26px 21px 0 -9px $monkeyBodyColor
			;

		&:before {
			// Eyes and nose
			top: 6px;
			left: 17px;
			z-index: 5;
			width: 4px;
			height: 4px;
			background-color: $monkeyEyeColor;

			border-radius: 50%;

			box-shadow:
				7px 0 $monkeyEyeColor,
				// -1px 0 $monkeyEyeColor,
				// 1px 0 $monkeyEyeColor,
				// 0 1px $monkeyEyeColor,

				//fingers
				-36px 25px 0 1px $monkeyPatchesColor,
				-37px 25px 0 1px $monkeyBodyColor,
				-36px 29px 0 1px $monkeyPatchesColor,
				-37px 29px 0 2px $monkeyBodyColor,

				43px 25px 0 1px $monkeyPatchesColor,
				44px 25px 0 1px $monkeyBodyColor,
				43px 29px 0 1px $monkeyPatchesColor,
				44px 29px 0 2px $monkeyBodyColor,

				//eyes
				-5px -12px 0 1px $monkeyEyeColor,
				-6px -12px 0 7px $monkeyPatchesColor,

				13px -12px 0 1px $monkeyEyeColor,
				14px -12px 0 7px $monkeyPatchesColor;
		}
		&:after {
			//mouth
			left: 12px;
			top: 10px;
			width: 22px;
			height: 12px;
			border-bottom: 3px solid #000;
			border-radius: 50%;
		}
	}
}


// penguin
//
$penguinBodyColor: #1f173a;
$penguinPatchesColor: #fff;
$penguinFlipperColor: #f9761c;

.penguin {
	top: 240px;
	left: 600px;
	width: 55px;
	height: 55px;

	background-color: $penguinBodyColor;
	border-radius: 50% / 75% 75% 35% 35%;

	box-shadow:
		//body section and patch
		0 50px 0 -6px $penguinPatchesColor,
		0 55px 0 -5px $penguinPatchesColor,
		0 62px 0 -5px $penguinPatchesColor,

		0 50px 0 2px $penguinBodyColor,
		0 55px 0 4px $penguinBodyColor,
		0 62px 0 5px $penguinBodyColor,

		//flippers
		//left
		-8px 55px 0 -3px $penguinPatchesColor,
		-13px 51px 0 -2px $penguinBodyColor,
		//right
		8px 55px 0 -3px $penguinPatchesColor,
		13px 51px 0 -2px $penguinBodyColor,

		//legs
		-15px 85px 0 -14px $penguinFlipperColor,
		15px 85px 0 -14px $penguinFlipperColor;

	&:after {
		//face background
		top: 12px;
		left: 8px;
		width: 25px;
		height: 34px;

		background-color: #fff;
		border-radius: 50%;

		box-shadow:
			15px 0 #fff,

			7px 13px #fff,
			16px 6px #fff,
			-2px 6px #fff
			;
	}

	.face {
		// Nose
		top: 34px;
		left: 17px;
		width: 0;
		height: 0;
		z-index: 5;

		//background-color: $penguinFlipperColor;
		border-top: 9px solid $penguinFlipperColor;
		border-left: 11px solid transparent;
		border-right: 11px solid transparent;
		border-radius: 50%;

		&:before {
			// Eyes
			top: -20px;
			left: -8px;
			z-index: 5;
			width: 6px;
			height: 8px;
			background-color: #000;

			border-radius: 50%;

			box-shadow:
				10px 0 #000;
		}
	}
}

.footerLink {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px 10px 5px;
  
  font-size: 12px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px 0 0 0;
  text-decoration: none;
  transition: 300ms;
  
  opacity: 0.3;
  
  &:hover {
    opacity: 1;
  }
}