* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }

*::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

*::before { -webkit-box-sizing: border-box; box-sizing: border-box; }

body { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #feff33; }

.wrapper { position: relative; width: 100%; height: 190px; }

.nose { width: 0; height: 0; background-color: rgba(255, 255, 255, 0); border: 16px solid black; border-radius: 15px; border-color: black transparent transparent transparent; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 25px; }

.nose:hover { -webkit-animation: sway 0.23s ease; animation: sway 0.23s ease; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

@-webkit-keyframes sway { 0% { -webkit-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%); }
  33% { -webkit-transform: rotate(-2deg) translateX(-50%); transform: rotate(-2deg) translateX(-50%); }
  67% { -webkit-transform: rotate(2deg) translateX(-50%); transform: rotate(2deg) translateX(-50%); }
  100% { -webkit-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%); } }

@keyframes sway { 0% { -webkit-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%); }
  33% { -webkit-transform: rotate(-2deg) translateX(-50%); transform: rotate(-2deg) translateX(-50%); }
  67% { -webkit-transform: rotate(2deg) translateX(-50%); transform: rotate(2deg) translateX(-50%); }
  100% { -webkit-transform: rotate(0deg) translateX(-50%); transform: rotate(0deg) translateX(-50%); } }

.eye { width: 49px; height: 49px; border-radius: 50%; position: absolute; background-color: #2e2e2e; border: 2px solid black; }

.eye::before { content: ''; display: block; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: white; top: 0; left: 8px; }

.eye.left { -webkit-transform: translateX(-80px); transform: translateX(-80px); right: 50%; }

.eye.right { -webkit-transform: translateX(80px); transform: translateX(80px); left: 50%; }

.cheek { width: 68px; height: 68px; border: 2px solid black; background-color: #fc0d1c; border-radius: 50%; position: absolute; top: 80px; }

.cheek.left { right: 50%; -webkit-transform: translateX(-104px); transform: translateX(-104px); }

.cheek.right { left: 50%; -webkit-transform: translateX(104px); transform: translateX(104px); }

.upperLip { width: 25px; height: 80px; position: absolute; background-color: #feff33; }

.upperLip.left { border: 2px solid black; border-bottom-right-radius: 40px 70px; border-top: none; border-left: none; -webkit-transform: rotate(68deg); transform: rotate(68deg); left: 50%; margin-left: -53px; top: 14%; }

.upperLip.right { border: 2px solid black; border-bottom-left-radius: 40px 70px; border-top: none; border-right: none; -webkit-transform: rotate(-68deg); transform: rotate(-68deg); right: 50%; margin-right: -53px; top: 14%; }

.tongueWrapper { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; z-index: -1; height: 128px; overflow: hidden; width: 300px; }

.tongueWrapper .tongue { height: 3500px; width: 300px; background-color: #990513; border-radius: 200px/2000px; border: 2px solid black; position: absolute; bottom: 0; overflow: hidden; }

.tongueWrapper .tongue::before { content: ''; display: block; position: absolute; width: 100px; height: 100px; background-color: #fc4a62; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; }