.emoji{box-sizing:border-box;width:100%;height:100%}.face,.face:after{width:100%;height:100%;border-radius:50%}.face:after{content:"";display:block;top:-8px;left:-8px;box-shadow:8px 8px 0 0 rgba(0,0,0,.07)}.eye,.face:after{position:absolute}.eye{width:11px;height:11px;top:32px;left:16px;z-index:1;border-radius:50%;background:#995710}.eye:last-child{left:auto;right:16px}.emoji:hover .eye{animation-name:blink;animation-iteration-count:infinite;animation-duration:2s}@keyframes blink{10%{height:11px;top:32px}30%{height:1px;top:37px}50%{height:11px;top:32px}}.mouth{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:1;width:80px;height:34px;margin:0 auto;border-radius:0 0 80px 80px;overflow:hidden;background:#995710}.mouth:after,.mouth:before{content:"";position:absolute;display:block}.mouth.teath:before{width:100%;height:10px;z-index:2;background:#fffae6}.mouth.tounge:after{position:absolute;width:38px;height:38px;left:50%;transform:translateX(-50%);border-radius:50%;background:#d8aa2b}.grin .eye{transition:all .3s ease-in-out}.grin:hover .eye{animation:none;height:2px;top:36px}.grin:hover .mouth{animation-name:giggle;animation-iteration-count:infinite;animation-duration:.2s}@keyframes giggle{0%{transform:translate(-50%,-1px)}50%{transform:translate(-50%,2px)}to{transform:translate(-50%,-1px)}}.sad .mouth{top:44px;border-radius:70px 70px 0 0}.sad .mouth:before{display:none}.shocked .mouth{width:25px;height:25px;border-radius:50%}.shocked .eye{transition:all .2s ease-in-out}.shocked:hover .eye{animation:none;transform:scale(1.3);transition:all 1.5s ease-out}.shocked:hover .mouth{animation-name:wow;animation-iteration-count:infinite;animation-duration:2.5s}@keyframes wow{70%{transform:scale(.5)}to{transform:scale(1)}}.smile .mouth{width:50px;height:25px;background:transparent;border-radius:0 0 50px 50px;border:4px solid #995710;border-top:0;clip-path:inset(30% 0 0 0)}.speechless .mouth{width:70px;height:4px;top:60px;border-radius:0}.heart-eye{position:absolute;top:30px;left:16px;transform:rotate(-15deg)}.heart-eye:last-child{left:auto;right:16px;transform:rotate(15deg)}.heart{display:block;width:16px;height:16px;background:#e25d5d;transform:rotate(-45deg)}.heart:after,.heart:before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background-color:#e25d5d}.heart:before{top:-8px;left:0}.heart:after{left:8px;top:0}.love .mouth{transform:scale(.5)}.love:hover .heart-eye{animation-name:pulse;animation-iteration-count:infinite;animation-duration:1s}.love:hover .heart-eye:last-child{animation-name:pulse-right}@keyframes pulse{30%{transform:scale(1.1) rotate(-15deg)}70%{transform:scale(1) rotate(-15deg)}}@keyframes pulse-right{30%{transform:scale(1.1) rotate(15deg)}70%{transform:scale(1) rotate(15deg)}}.angry .face{background:#e25d5d;transition:all .5s ease-in-out}.angry:hover .face{background:#e84747;animation-name:fuming;animation-iteration-count:infinite;animation-duration:2s;animation-timing-function:linear}@keyframes fuming{10%{transform:translate(-5px)}15%{transform:translate(5px)}20%{transform:translate(-5px)}25%{transform:translate(5px)}30%{transform:translate(-5px)}35%{transform:translate(5px)}40%{transform:translate(-5px)}45%{transform:translate(5px)}50%{transform:translate(0)}}.angry .eye,.angry .eye:before,.angry .mouth{background:#7f2626}.angry .eye:before{content:"";display:block;position:absolute;width:20px;height:5px;top:-1px;left:-4px;transform:rotate(20deg)}.angry .eye:last-child:before{left:auto;right:-4px;transform:rotate(-20deg)}.angry .mouth{width:20px;height:4px;top:64px;border-radius:0}