/*
Only supports chrome
*/
body {
    counter-reset: tooth;
    background: #353535;
}

body > div {
  margin: auto;
  width: 500px;
  padding: 20px 0;
  position: relative;
  zoom: 1;
}

.face {
    width: 200px;
    height: 200px;
    background: rgb(255, 165, 0);

    box-shadow: inset -10px -20px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    position: absolute;
    /* border: 5px solid rgb(2, 74, 0); */
    box-sizing: border-box;
    margin: auto;
    z-index: 1;
}
.smiley {
    width: 200px;
    height: 200px;
    background: rgb(255, 165, 0);

    box-shadow: inset -10px -20px rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    position: relative;
    margin: auto;
    -webkit-animation: jump 2s ease infinite;
    z-index: 5;
}

.smiley .eyes .eye {
    position: absolute;
    width: 12px;
    height: 12px;
    top: 60px;
    border-radius: 50%;
    background: #7C0000;
    -webkit-animation: blink 3s linear 0s infinite;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.smiley .mouth {
    position: absolute;
    left: 50%;
    bottom: 45px;
    width: 115px;
    height: 50px;
    background: #282828;
    border-radius: 27px 27px 50% 50%;
    box-shadow: inset 0 5px 7px rgba(0, 0, 0, 0.25);
    display: table;
    empty-cells: show;
    overflow: hidden;
    -webkit-animation: mouth 1s cubic-bezier(0, 1.6, .6, .4) 0s infinite;
    z-index: 2;
}

.smiley .mouth .tooth {
    display: table-cell;
    position: relative;
    border-left: 4px solid transparent;
}

.tooth-row > span:before, .tooth-row > span:after {
    content: "";
    display: block;
    background: #000;
    left: 0;
}

.eyes .eye:first-of-type {
    left: 80px;
}

.eyes .eye:last-of-type {
    right: 75px;
}

.mouth .tooth-row {
    display: table-row;
}

span.tooth:before {
    /* width: 100%; */
    position: absolute;
    height: 16px;
    width: 100%;
    background: linear-gradient(rgb(255, 255, 255), rgb(242, 242, 242));
    border-radius: 2px;
}

.tooth-row span.tooth:after {
    position: absolute;
    height: 6px;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
}

.tooth-row:nth-child(2) {
    visibility: hidden;
}

.tooth-row:last-child span.tooth {
    vertical-align: bottom;
}

.tooth-row:last-child span.tooth:before {
    bottom: 0;
}

.tooth-row:last-child span.tooth:after {
    bottom: -2px;
}

.smiley {
    cursor: url('knife.png');
}

.smiley:hover .mouth {
    counter-increment: tooth;
    background: rgb(174, 0, 0);
    transition: all 0.3s ease;
}

.smiley:hover .mouth span.tooth:before {
    background: rgb(202, 202, 202);
    transition: all .3s ease;
}

.eyebrows div {
    position: absolute;
    width: 40px;
    height: 10px;
    background: #000;
    top: 40px;
    z-index: 2;
}

.eyebrows .left {
    left: 62px;
    transform: rotate(13deg);
    border-radius: 7px 3px 0px 3px;
    -webkit-animation: eyebrowLeft 3s ease infinite;
}

.eyebrows .right {
    right: 62px;
    transform: rotate(-13deg);
    border-radius: 3px 7px 3px 0px;
    -webkit-animation: eyebrowRight 3s ease infinite;
}

@-webkit-keyframes jump {
    0%, 100% {
        transform: rotate(10deg) translateX(20px);
    }

    50% {
        transform: rotate(-10deg) translateX(-20px);
    }
}

@-webkit-keyframes shadow {
    50% {
        transform: rotate(10deg);
    }

    0%, 100% {
        transform: rotate(-10deg);
    }
}

@-webkit-keyframes eyebrowLeft {
    50% {
        transform: rotate(25deg) scale(1.1);
    }

    0%, 100% {
        transform: rotate(10deg) scale(1);
    }
}

@-webkit-keyframes eyebrowRight {
    50% {
        transform: rotate(-25deg) scale(1.1);
    }

    0%, 100% {
        transform: rotate(-10deg) scale(1);
    }
}


@-webkit-keyframes mouth {
    0%, 30%, 100% {
        transform: translate(-50%, 0px) scale(1.1);
        height: 32px;
    }

    50% {
        transform: translate(-50%, 30px) scale(1);
        height: 60px;
    }
}

@-webkit-keyframes blink {
    0%, 99%, 93%, 99% {
        height: 12px;
    }

    94%, 98% {
        height: 0px;
    }
}
@keyframes jump {
    0%, 100% {
        transform: rotate(10deg) translateX(20px);
    }

    50% {
        transform: rotate(-10deg) translateX(-20px);
    }
}

@keyframes shadow {
    50% {
        transform: rotate(10deg);
    }

    0%, 100% {
        transform: rotate(-10deg);
    }
}

@keyframes eyebrowLeft {
    50% {
        transform: rotate(25deg) scale(1.1);
    }

    0%, 100% {
        transform: rotate(10deg) scale(1);
    }
}

@keyframes eyebrowRight {
    50% {
        transform: rotate(-25deg) scale(1.1);
    }

    0%, 100% {
        transform: rotate(-10deg) scale(1);
    }
}


@keyframes mouth {
    0%, 30%, 100% {
        transform: translate(-50%, 0px) scale(1.1);
        height: 32px;
    }

    50% {
        transform: translate(-50%, 30px) scale(1);
        height: 60px;
    }
}

@keyframes blink {
    0%, 99%, 93%, 99% {
        height: 12px;
    }

    94%, 98% {
        height: 0px;
    }
}
.smiley:before {
    content: "";
    display: block;
    width: 200px;
    height: 40px;
    background: rgba(0, 0, 0, 0.13);
    border-radius: 50%;
    z-index: -1;
    -webkit-filter: blur(3px);
    position: absolute;
    bottom: -31px;
    -webkit-animation: shadow 2s ease infinite;
}

.scarf {
    position: absolute;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -80px;
    background: rgb(13, 13, 13);
    border-radius: 40% 40% 5px 5px;
}

.mustache {
    position: absolute;
    border-radius: 30% 30% 10px 10px;
    width: 140px;
    height: 16px;
    background: rgba(15, 90, 30, 0.05);
    left: 50%;
    top: 51%;
    z-index: 1;
    transform: translateX(-50%);
}

.scarf + .face {
    
}

.hand {
    position: absolute;
    width: 70px;
    height: 35px;
    background: rgb(15, 15, 15);
    z-index: 5;
    bottom: -35px;
    left: -50px;
    border-radius: 5px;
    
    -webkit-animation: handLeft 2s ease infinite alternate;
}

.hand.filled:before {
    content: "";
    position: absolute;
    width: 15px;
    height: 20px;
    background: rgb(255, 107, 0);
    left: -15px;
    top: 7px;
    border-radius: 10px 0 0 20px;
    z-index: 1;
}

.hand.filled:after {
    content: "";
}

.batoom:before {
    width: 10px;
    
    height: 150px;
    background: rgb(21, 21, 21);
    top: -110px;
    left: -12px;
    position: absolute;
    border-radius: 5px;
    z-index: 10;
    content: "";
}

.batoom:after {
    content: "";
    width: 32px;  
    height: 10px;  
    background: rgb(29, 29, 29);  
    bottom: 33px;  
    left: -44px;  position: absolute;  
    border-radius: 5px 0 0 2px;  
    z-index: 5;
}

@-webkit-keyframes handLeft {
    from {
        transform: rotate(-15deg);
    }
    
    to {
        transform: rotate(15deg);
    }
}