* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #48BEFE;
}

.container {
  position: relative;
  margin: 4em auto;
  width: 600px;
  height: 300px;
  background-color: #48BEFE;
}

.left,
.right {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 400px;
}
.left:before,
.right:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 220px;
  height: 280px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 20px 0 #41ABE4;
}

.left {
  transform: translate(-100%, -50%);
}

.right {
  transform: translate(0%, -50%);
}

.yolk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatey(40px);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #FFC800;
}
.yolk:before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  transform: translate(18px, -18px);
  box-shadow: -18px 18px 0 rgba(0, 0, 0, 0.05);
}

.hole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatey(40px);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #EEEEEE;
}
.hole:before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  transform: translate(-18px, 18px);
  box-shadow: 18px -18px 0 rgba(0, 0, 0, 0.05);
}

.face {
  position: absolute;
  background-color: transparent;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, 110px);
  box-shadow: -30px 0 0 black, 30px 0 0 black;
}
.face:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: -27px -3px 0 white, 33px -3px 0 white;
}
.face:after {
  content: '';
  position: absolute;
  border: solid 5px black;
  border-top-color: transparent;
  border-right-color: transparent;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatey(20px) rotate(-45deg);
}

.left > .limbs > .hands {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left > .limbs > .hands:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 40px;
  border-radius: 5em;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatex(-110px) rotate(45deg);
  box-shadow: 14px 14px 0 #41ABE4;
  animation-name: leftHL;
}
.left > .limbs > .hands:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 40px;
  border-radius: 5em;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatex(110px) rotate(-45deg);
  box-shadow: -14px 14px 0 #41ABE4;
  animation-name: leftHR;
}
.left > .limbs > .legs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left > .limbs > .legs:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: white;
  border-radius: 5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(-50px, 130px) rotate(-20deg);
  box-shadow: 5px 25px 0 #41ABE4;
  animation-name: leftLL;
}
.left > .limbs > .legs:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: white;
  border-radius: 5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(50px, 130px) rotate(20deg);
  box-shadow: -5px 25px 0 #41ABE4;
  animation-name: leftLR;
}

.right > .limbs > .hands {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.right > .limbs > .hands:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 40px;
  border-radius: 5em;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatex(-110px) rotate(-45deg);
  box-shadow: -14px 14px 0 #41ABE4;
  animation-name: rightHL;
}
.right > .limbs > .hands:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 40px;
  border-radius: 5em;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translatex(110px) rotate(45deg);
  box-shadow: 14px 14px 0 #41ABE4;
  animation-name: rightHR;
}
.right > .limbs > .legs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.right > .limbs > .legs:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: white;
  border-radius: 5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(-50px, 130px) rotate(20deg);
  box-shadow: 15px 13px 0 #41ABE4;
  animation-name: rightLL;
}
.right > .limbs > .legs:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: white;
  border-radius: 5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(50px, 130px) rotate(-20deg);
  box-shadow: -15px 13px 0 #41ABE4;
  animation-name: rightLR;
}

.left > .limbs > .hands:after,
.left > .limbs > .hands:before,
.right > .limbs > .hands:after,
.right > .limbs > .hands:before,
.left > .limbs > .legs:after,
.left > .limbs > .legs:before,
.right > .limbs > .legs:after,
.right > .limbs > .legs:before {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes leftHL {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translatex(-110px) rotate(45deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translatex(-110px) rotate(45deg) translate(4px, -4px);
  }
}
@keyframes leftHR {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translatex(110px) rotate(-45deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translatex(110px) rotate(-45deg) translate(-4px, -4px);
  }
}
@keyframes rightHL {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translatex(-110px) rotate(-45deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translatex(-110px) rotate(-45deg) translate(4px, 4px);
  }
}
@keyframes rightHR {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translatex(110px) rotate(45deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translatex(110px) rotate(45deg) translate(-4px, 4px);
  }
}
@keyframes leftLL {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translate(-50px, 130px) rotate(-20deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translate(-50px, 130px) rotate(-20deg) translate(4px, -4px);
  }
}
@keyframes leftLR {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translate(50px, 130px) rotate(20deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translate(50px, 130px) rotate(20deg) translate(-4px, -4px);
  }
}
@keyframes rightLL {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translate(-50px, 130px) rotate(20deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translate(-50px, 130px) rotate(20deg) translate(4px, 4px);
  }
}
@keyframes rightLR {
  0%,20%,40%,60%,80%,100% {
    transform: translate(-50%, -50%) translate(50px, 130px) rotate(-20deg);
  }
  10%,30%,50%,70%,90% {
    transform: translate(-50%, -50%) translate(50px, 130px) rotate(-20deg) translate(-4px, 4px);
  }
}
.dribbble-icon {
  position: absolute;
  right: 15px;
  bottom: 10px;
  cursor: pointer;
}
.dribbble-icon:hover {
  transition-duration: 1s;
  transform: scale(1.2);
}