styles.css

body {
  background-color:  #fffff5;
}
#box {
  position: relative;
  margin: auto;
  margin-top: 200px;
  display: block;
  width: 600px;
  height: 600px;
}
.hat-1 {
  position: absolute;
  background-color: #323232;
}
.hat-2 {
  position: absolute;
  background-color: black;
}
#hat-1, #hat-2 {
  width: 15%;
  height: 20%;
  top: -10%;
}
#hat-1 {
  left: 35%;
}
#hat-2 {
  right: 35%;
}
#hat-top-1, #hat-top-2 {
  width: 100%;
  height: 80%;
  top: -75%;
}
#hat-top-1 {
  border-top-left-radius: 100%;
}
#hat-top-2 {
  border-top-right-radius: 100%;
}
#brim-1, #brim-2 {
  width: 15%;
  height: 9%;
  top: -5%;
}
#brim-1 {
  left: 30%;
  border-top-left-radius: 40%;
  border-bottom-left-radius: 40%;
}
#brim-2 {
  right: 30%;
  border-top-right-radius: 40%;
  border-bottom-right-radius: 40%;
}
#face-1, #face-2 {
  position: absolute;
  width: 40%;
  height: 60%;
  border-radius: 75% 0% 0% 0%;
}
#face-1 {
  left: 10%;
}
#face-2 {
  right: 10%;
  transform: rotateY(180deg);
}
.face-1 {
  background-color: white;
}
.face-2 {
  background-color: #f2f2f2;
}
.side {
  position: absolute;
  width: 40%;
  height: 50%;
  bottom: 0%;
  left: -20%;
  border-radius: 90% 0% 0% 75%;
}
.eye {
  position: absolute;
  width: 16%;
  height: 11%;
  bottom: 23%;
  left: 60%;
  background-color: black;
  border-radius: 50%;
}
.glasses {
  position: absolute;
  width: 33%;
  height: 20%;
  bottom: 3%;
  left: 53%;
  background-color: rgba(0,0,0,0.3);
  border: 10px black solid;
  border-radius: 50%;
}
#glass-mid {
  position: absolute;
  width: 20%;
  height: 3%;
  bottom: 15%;
  left: 90%;
  background-color: black;
  z-index: 2;
}
.beak {
  position: absolute;
  width: 80%;
  height: 40%;
  bottom: -25%;
  left: 20.5%;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
#beak-1 {
  background-color: #ffa500;
}
#beak-2 {
  background-color: #e59400;
}