styles.css

body {
  width: 100%;
  background-color: #b595a7;
}
.box {
  position: relative;
  margin: 5px auto;
  display: block;
  width: 600px;
  height: 420px;
  border: white solid 5px;
}
p {
  margin: 0;
  padding: 2px;
  font-family: Arial;
  font-size: 10px;
  text-transform: uppercase;
}
/* ---- Koala: May 5, 2018 --- */
#head {
  position: absolute;
  top: 20%;
  left: 25%;
  /* Dead center: left = (100 - width) / 2 && top = (100 - height) / 2 */
  width: 50%;
  height: 60%;
  background-color: #A6BECF;
  border-radius: 50%;
}
#headCopy {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #A6BECF;
  border-radius: 50%;
  z-index: 2; /* depth of div */
}
#leftEar {
  position: absolute;
  width: 60%;
  height: 65%;
  left: -20%;
  top: 5%;
  background-color: #A6BECF;
  border-radius: 50%;
  z-index: 1; /* pushes ears behind the head */
}
#rightEar {
  position: absolute;
  width: 60%;
  height: 65%;
  right: -20%;
  top: 5%;
  background-color: #A6BECF;
  border-radius: 50%;
  z-index: 1;
}
.innerEar {
  position: absolute;
  border-radius: 50%;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background-color: #819CAF;
}
#leftEye {
  position: absolute;
  background: white;
  width: 30%;
  height: 33%;
  top: 25%;
  left: 21%;
  border-radius: 50%;
  z-index: 3;
}
#rightEye {
  position: absolute;
  background-color: white;
  width: 30%;
  height: 33%;
  top: 25%;
  right: 21%;
  border-radius: 50%;
  z-index: 3;
}
.pupil{
  position: absolute;
  width: 28%;
  height: 30%;
  top: 35%;
  left: 36%;
  border-radius: 50%;
  background-color: #27354A;
}
#nose{
  position: absolute;
  background-color: #191919;
  width: 25%;
  height: 35%;
  left: 37%;
  top: 45%;
  border-radius: 50px;
  z-index: 4;
}
#leftHair {
  position: absolute;
  top: -8%;
  left: 30%;
  width: 20%;
  height: 20%;
  background:  #A6BECF;
  /* tool to create clip-paths: http://bennettfeely.com/clippy/ */
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* not supported by Firefox */
}
#rightHair {
  position: absolute;
  top: -4%;
  left: 48%;
  width: 20%;
  height: 20%;
  background:  #A6BECF;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}