body {
  background: #b9f0ef;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
}

.penguin {
  height: 250px;
  width: 200px;
  background: #202020;
  position: relative;
  border-radius: 60% 60% 60% 60% / 65% 65% 50% 50%
}

.penguin:after {
  content: "";
  width: 60px;
  height: 25px;
  position: absolute;
  border-radius: 50%;
  left: 70px;
  top: 8px;
  background: rgba(255, 255, 255, 0.017);
  box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.015);
}

.penguin * {
  position: absolute;
  box-sizing: border-box;
}

.eyes {
  width: 200px;
  height: 60px;
  top: 45px;
}

.eye {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
}

.eye.left {
  left: 45px;
}

.eye.right {
  right: 45px;
}

.pupil {
  height: 15px;
  width: 15px;
  background: #202020;
  top: 20px;
  border-radius: 50%;
  z-index: 1
}

.pupil:after {
  content: "";
  height: 5px;
  width: 5px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
  top: 1.5px;
}

.pupil:before {
  content: "";
  height: 4px;
  width: 15px;
  position: absolute;
  background: #202020;
  top: -3px;
}

.pupil.left {
  left: 20px;
}

.pupil.right {
  right: 20px;
}

.pupil.left:after {
  right: 3px;
}

.pupil.left:before {
  transform: rotate(15deg);
}

.pupil.right:after {
  left: 3px;
}

.pupil.right:before {
  transform: rotate(-15deg);
}

.nose {
  background: #fdb03e;
  height: 15px;
  width: 30px;
  border-radius: 50% 52% 52% 49% / 28% 28% 70% 68%;
  top: 92px;
  left: 85px;
  z-index: 1;
  box-shadow: inset 2px -2px 0px 0px rgba(0, 0, 0, 0.1), inset -2px -2px 0px 0px rgba(0, 0, 0, 0.1);
}

.stomach {
  height: 155px;
  width: 140px;
  background: #fff;
  bottom: 15px;
  left: 30px;
  right: 30px;
  border-radius: 50%;
}

.hands {
  top: 70px;
  width: 200px;
  height: 120px;
}

.hand {
  height: 120px;
  width: 40px;
  background: #202020;
  border-radius: 70%;
}

.hand.left {
  left: -10px;
  transform: rotate(15deg);
  box-shadow: inset -1px -4px 0px 0px rgba(250,250,250,0.2);
  animation: hand1 1s infinite;
}

.hand.right {
  right: -10px;
  transform: rotate(-15deg);
  box-shadow: inset 1px -4px 0px 0px rgba(250,250,250,0.2);
  animation: hand2 1s infinite;

}

.legs {
  width: 140px;
  height: 30px;
  bottom: -10px;
  left: 30px;
}

.leg {
  height: 30px;
  width: 50px;
  background: #fdb03e;
  border-radius: 50%;
  z-index: -1;
  animation: leganim 1s infinite;
}

.leg.left {
  box-shadow: inset 1px -2px 0px 0px rgba(0, 0, 0, 0.2);  
}

.leg.right {
  right: 0px;
  box-shadow: inset -1px -2px 0px 0px rgba(0, 0, 0, 0.2);
}


@keyframes hand1 {
  0% {
      transform: rotate(15deg);
  }
  
  50% {
    transform: rotate(20deg)
  }
  
  100% {
    transform: rotate(15deg)
  }
}


@keyframes hand2 {
  0% {
      transform: rotate(-15deg);
  }
  
  50% {
    transform: rotate(-20deg)
  }
  
  100% {
    transform: rotate(-15deg)
  }
}

@keyframes leganim {
  0% {
     bottom: -10px;
  }
  
  50% {
    bottom: -6px;
  }
  
  100% {
     bottom: -10px;
  }
}