* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Calligraffitti', cursive;
  background: #5f4e7d;
}

.wrapper {
  position: relative;
  -webkit-transform: translatey(-30%);
          transform: translatey(-30%);
}

.head {
  width: 144px;
  height: 163px;
  border-radius: 100px;
  background: #F0BE99;
}

.ear-l,
.ear-r {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #F0BE99;
  position: absolute;
  bottom: 30px;
  z-index: -1;
}
.ear-l:before,
.ear-r:before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #EE927D;
  position: absolute;
  bottom: 5px;
}

.ear-l {
  left: -10px;
}
.ear-l:before {
  -webkit-transform: translatex(8px);
          transform: translatex(8px);
}

.ear-r {
  right: -10px;
}
.ear-r:before {
  -webkit-transform: translatex(5px);
          transform: translatex(5px);
}

.eye-l,
.eye-r {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 55%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
  overflow: hidden;
  box-shadow: 0 0 15px -5px #EE927D;
}
.eye-l:after,
.eye-r:after {
  content: "";
  background: #EE927D;
  height: 20%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  -webkit-animation: blink 4s alternate infinite ease;
          animation: blink 4s alternate infinite ease;
}
@-webkit-keyframes blink {
  89% {
    height: 20%;
  }
  90% {
    height: 60%;
  }
  95% {
    height: 45%;
  }
  100% {
    height: 55%;
  }
}
@keyframes blink {
  89% {
    height: 20%;
  }
  90% {
    height: 60%;
  }
  95% {
    height: 45%;
  }
  100% {
    height: 55%;
  }
}
.eye-l:before,
.eye-r:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}

.eye-l {
  left: 30px;
}

.eye-r {
  right: 30px;
}

.nose {
  width: 7px;
  height: 7px;
  border-radius: 0 0 100px;
  background: #EE927D;
  position: absolute;
  top: 70%;
  left: 45%;
  -webkit-transform: translatex(-50%, -50%);
          transform: translatex(-50%, -50%);
  box-shadow: 10px 0 #EE927D;
}

.toy {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2E8FBC;
  border: 5px solid #67BFEC;
  position: absolute;
  top: 80%;
  left: 55%;
  box-shadow: -1px 0 0 1px #024f6e, -3px -3px 0 13px #036187;
  -webkit-animation: pulse 0.3s infinite alternate cubic-bezier(0.71, 1.87, 0.03, -0.15);
          animation: pulse 0.3s infinite alternate cubic-bezier(0.71, 1.87, 0.03, -0.15);
  transition: left .3s ease;
}

@-webkit-keyframes pulse {
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes pulse {
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
p {
  position: absolute;
  font-size: 150px;
  color: #EE927D;
  top: -220px;
  left: 50px;
}

span {
  position: absolute;
  top: -60px;
  left: 50%;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
  width: 250%;
  height: 250%;
  z-index: 10;
}
span.triangle-t {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
          clip-path: polygon(0 0, 100% 0, 50% 50%);
}
span.triangle-t:hover {
  -webkit-clip-path: none;
          clip-path: none;
  z-index: 2;
}
span.triangle-t:hover ~ .eye-l:before,
span.triangle-t:hover ~ .eye-r:before {
  -webkit-transform: translate(-50%, -80%);
          transform: translate(-50%, -80%);
}
span.triangle-t:hover ~ .toy {
  left: 40%;
  box-shadow: 0 -3px 0 13px #036187;
}
span.triangle-r {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
          clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
span.triangle-r:hover {
  -webkit-clip-path: none;
          clip-path: none;
  z-index: 2;
}
span.triangle-r:hover ~ .eye-l:before,
span.triangle-r:hover ~ .eye-r:before {
  -webkit-transform: translate(10%, -50%);
          transform: translate(10%, -50%);
}
span.triangle-b {
  -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
          clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
span.triangle-b:hover {
  -webkit-clip-path: none;
          clip-path: none;
  z-index: 2;
}
span.triangle-b:hover ~ .eye-l:before,
span.triangle-b:hover ~ .eye-r:before {
  -webkit-transform: translate(-50%, 10%);
          transform: translate(-50%, 10%);
}
span.triangle-b:hover ~ .toy {
  left: 40%;
  box-shadow: 0 -3px 0 13px #036187;
}
span.triangle-l {
  -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
          clip-path: polygon(0 0, 50% 50%, 0 100%);
}
span.triangle-l:hover {
  -webkit-clip-path: none;
          clip-path: none;
  z-index: 2;
}
span.triangle-l:hover ~ .eye-l:before,
span.triangle-l:hover ~ .eye-r:before {
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}
span.triangle-l:hover ~ .toy {
  left: 25%;
  box-shadow: 1px 0 0 1px #024f6e, 2px -3px 0 13px #036187;
}

.body {
  position: absolute;
  width: 141px;
  height: 141px;
  border-radius: 100px;
  background: #F0BE99;
  z-index: -1;
  box-shadow: inset 0 30px rgba(255, 255, 255, 0.15);
}
.body:before {
  content: "";
  background: #fff;
  height: 50%;
  position: absolute;
  border-radius: 0 0 100px 100px;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 -30px rgba(200, 224, 232, 0.3);
}
.body:after {
  content: "";
  background: #EE927D;
  width: 8px;
  height: 5px;
  position: absolute;
  top: 30%;
  left: 35%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 20px;
  box-shadow: 45px 0 #EE927D;
}

.arms,
.legs {
  position: absolute;
  width: 250px;
  height: 40px;
  background: #F0BE99;
  left: 50%;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
}

.arms {
  border-radius: 20px;
  -webkit-animation: hug 5s ease infinite alternate;
          animation: hug 5s ease infinite alternate;
}

@-webkit-keyframes hug {
  20% {
    -webkit-transform: translatex(-50%) rotate(5deg);
            transform: translatex(-50%) rotate(5deg);
  }
  40% {
    -webkit-transform: translatex(-50%) rotate(-3deg);
            transform: translatex(-50%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translatex(-50%) rotate(2deg);
            transform: translatex(-50%) rotate(2deg);
  }
  80% {
    -webkit-transform: translatex(-50%) rotate(-4deg);
            transform: translatex(-50%) rotate(-4deg);
  }
  100% {
    -webkit-transform: translatex(-50%) rotate(2deg);
            transform: translatex(-50%) rotate(2deg);
  }
}

@keyframes hug {
  20% {
    -webkit-transform: translatex(-50%) rotate(5deg);
            transform: translatex(-50%) rotate(5deg);
  }
  40% {
    -webkit-transform: translatex(-50%) rotate(-3deg);
            transform: translatex(-50%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translatex(-50%) rotate(2deg);
            transform: translatex(-50%) rotate(2deg);
  }
  80% {
    -webkit-transform: translatex(-50%) rotate(-4deg);
            transform: translatex(-50%) rotate(-4deg);
  }
  100% {
    -webkit-transform: translatex(-50%) rotate(2deg);
            transform: translatex(-50%) rotate(2deg);
  }
}
.legs {
  bottom: 0px;
  width: 220px;
  z-index: -1;
  border-radius: 0 0 30px 30px;
  box-shadow: inset 0 -10px rgba(255, 255, 255, 0.15);
}
.legs:before {
  content: "";
  background: #F0BE99;
  width: 13px;
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 0;
  border-radius: 50px;
}
.legs:after {
  content: "";
  background: #F0BE99;
  width: 13px;
  height: 40px;
  position: absolute;
  bottom: 10px;
  right: 0;
  border-radius: 50px;
}

.hand-l,
.hand-r {
  background: #F0BE99;
  width: 12px;
  height: 20px;
  position: absolute;
  top: -10px;
  border-radius: 50px;
}
.hand-l:before,
.hand-r:before {
  content: "";
  width: 20px;
  height: 12px;
  position: absolute;
  background: #F0BE99;
  top: 15px;
  border-radius: 50px;
}
.hand-l:after,
.hand-r:after {
  content: "";
  width: 20px;
  height: 12px;
  position: absolute;
  background: #F0BE99;
  top: 30px;
  border-radius: 50px;
}

.hand-l {
  left: 0;
  box-shadow: 0px 35px #F0BE99;
}
.hand-l:before {
  left: -10px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}
.hand-l:after {
  left: -10px;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}

.hand-r {
  right: 0;
  box-shadow: 0px 35px #F0BE99;
}
.hand-r:before {
  right: -10px;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}
.hand-r:after {
  right: -10px;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}