/* CSS Face V1. WIP. */

/* Change HSL to alter tones. Doesn't work that well yet visually. */

* {
--lips: hsl(351, 23%, 56%);
--color: hsl(348, 100%, 87%);
--skin: hsl(14, 35%, 73%);
--skin-two: hsl(17, 23%, 68%);
--highlights: 255,255,255;
--eyes: hsl(119, 74%, 10%);
--hair: rgba(25,255,255,.1);
--delay: 10s;
--animation: 7s;
--animation-quick: 3s;
--animation-rapid: 700ms;
}

/* Change backgroud to match hues. */

body {
    background: hsl(10, 20%, 8%);
    text-align: center;
}

/* Position & size. .2-2 */
#frame { margin: 62px auto 0; transform: scale(1)}

/* Reset a bit. */
* { box-sizing: border-box; margin: 0; padding:0; list-style: none}


/* This is just a lazy back btn. */

#back a {
    display: block;
    background: rgba(0,0,0,.3);
    position: absolute;
    bottom: 0;
    width: 100%;
    display: block;
    padding: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    font-family: sans-serif;
    text-shadow: 0 1px 2px rgba(0,0,0,.4)
}
#back a:hover {
    background: rgba(255,255,255,.35);
    color: rgba(0,0,0,.4);
    text-shadow: none
}

/* Shape */

#structure {
    background: var(--skin);
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    height: 17.6rem;
    width: 13rem;
    margin: auto;
    box-shadow: inset 0 -60px 25px rgba(0, 0, 0, .35);
    overflow: hidden;
}

#structure:after {
    content: "";
    display: block;
    height: 18rem;
    width: 13rem;
    margin: -18.6rem auto 0;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 -7px 40px rgba(0, 0, 0, 1), inset 0 -36px 35px rgba(208,126,108,.1);
}

#forehead {
    margin: 10px auto -10px;
    background: rgba(var(--highlights),.25);
    filter: blur(7px);
    padding-top: 106px;
    position: relative;
    z-index: 99;
    border-radius: 50%;
    width: 10rem;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 31px 1px rgba(255,255,255,.3),inset 50px 21px 21px rgba(255,255,255,.4),inset 20px 15px 11px rgba(110,40,50,.5)
}


/* Eyes */

#eyes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    height: 40px;
    margin: 0 15px;
}

.eye {
    padding-top: 20px;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: 0 41px 50px rgba(255,255,255,.1);
    position: relative;
    z-index: 9;
}

.eye:before {
    content: "";
    display: block;
    padding: 10px 0;
    margin-top: -10px;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 -10px 5px rgba(25,2,25,.8);
    filter: blur(4px);
    background: #fff;
    opacity: .3;
}

.eye:after {
    content: "";
    display: block;
    padding: 14px 0;
    margin-top: -30px;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 -10px 5px rgba(25,2,25,1);
    filter: blur(10px);
    background: #111;
    opacity: .3;
}

.iris-l {
    background: #ccc;
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(0,0,0,.3) 100%);
    width: 2.5rem;
    margin: 5px auto -2px;
    position: relative;
    z-index: 9;
    height: 10px;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7), inset 0 -7px 4px rgba(0, 0, 0, .2), 5px -1px 2px rgba(0, 0, 0, .8),inset  5px -1px 2px rgba(0, 0, 0, .8);
    overflow: hidden;
    transform: rotate(4deg);
}

.iris-r {
    background: #ccc;
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(0,0,0,.3) 100%);
    width: 2.4rem;
    height: 10px;
    margin: 4px auto 0;
    position: relative;
    z-index: 9;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .3),inset 0 -7px 4px rgba(0, 0, 0, .2), 5px -1px 2px rgba(0, 0, 0, .5),inset  5px -1px 2px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.iris:before {
    content: "";
    display: block;
    padding: 3px;
    margin: -8px auto 0;
    position: relative;
    z-index: 99;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .2);
}

.iris:after {
    content: "";
    display: block;
    padding: 7px;
    margin: -10px auto 0;
    position: relative;
    z-index: 99;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 -6px 5px rgba(0, 0, 0, .2)
}

#eye-l .iris { transform: rotate(6deg)}
#eye-r .iris { transform: rotate(-6deg)}

.iris-l .reflection {
    background: #fff;
    margin-top: 3px;
    margin-left: -2px;
}

#eye-shadows {
    display: grid;
    margin:1.7rem auto 0;
    grid-template-columns: 1fr 1fr;
    grid-gap: 34px;
    width: 100px;
    position: relative;
}

#eye-shadow-l {
    background: rgba(0,0,0,1);
    border-radius:50%;
    margin-top: 11px;
    margin-bottom: -3px;
    margin-left: 15px;
    transform: rotate(10deg);
    padding: 0 10px;
    height: 7px;
    box-shadow: 6px 0 6px rgba(0,0,0,1);
}

#eye-shadow-r {
/*blank for less shadow */
}

#eye-shadow-l:before {
    content: "";
    display: block;
    position: absolute;
    background: rgba(0,0,0,1);
    border-radius:50%;
    margin-top: 6px;
    left: -35px;
    transform: rotate(10deg);
    padding:0 10px;
    height: 6px;
    box-shadow: 26px 0 6px red;
}

#eye-shadow-r:before {
    content: "";
    display: block;
    position: absolute;
    background: rgba(0,0,0,.6);
    border-radius:50%;
    margin-top: 11px;
    transform: rotate(-10deg);
    padding:0 10px;
    height: 6px;
    filter: blur(1px);
}

#eye-shadow-l:after {
    content: "))))(((";
    font-size: .8em;
    display: block;
    position: absolute;
    background: rgba(0,0,0,1);
    border-radius: 50%;
    margin-top: 7px;
    left: -38px;
    transform: rotate(7deg);
    padding: 0 10px;
    height: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 3px 5px rgba(0,0,0,1);
}

#eye-shadow-r:after {
    content: "))))((((";
    font-size: .8em;
    display: block;
    position: absolute;
    background: rgba(0,0,0,1);
    border-radius: 50%;
    margin-top: 14px;
    right: -23px;
    transform: rotate(-2deg);
    padding: 0 10px;
    height: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: -3px 3px 5px rgba(0,0,0,1);
}

#eye-r {transform: rotate(-3deg);margin-top: 2px;margin-left: -2px}
#eye-r:after {background: #000; opacity: .8;
box-shadow:inset 0 -43px 5px hsla(25, 100%, 50%,7%), 0 13px 5px hsla(25, 100%, 50%,10%)}
#eye-l:after {background: #000; opacity: .8;
box-shadow:inset 0 -43px 5px hsla(25, 100%, 50%,7%), 0 13px 5px hsla(25, 100%, 50%,10%)}


/* Nose */

#nose {
    margin: -36px auto 0;
    filter: blur(2px);
    border-radius: 50%;
    border-bottom: 80px solid rgba(255,255,255,.2);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    padding: 0 8px 0 0;
    height: 0;
    width: 10px;
    position: relative;
}

#nose:before {
    border-bottom: 80px solid rgba(0,0,0,.1);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    padding: 0 8px 0 0;
    height: 0;
    width: 20px;
    position: absolute;
    left: -17px;
    content: "";
    z-index: -1;
    border-radius: 50%;
}

#nose:after {
    border-bottom: 40px solid rgba(0,0,0,.1);
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    padding: 0 8px 0 0;
    height: 0;
    width: 30px;
    position: absolute;
    margin-top: 11px;
    left: -32px;
    content: "";
    z-index: -1;
    filter: blur(4px);
}

#nose-bridge:before {
    content: "";
    display: block;
    background: rgba(255, 255, 255, .2);
    padding: 10px 1px;
    width: 5px;
    margin: 0 auto;
}

#nose-bridge {
    padding: 20px 1px;
    background: rgba(255, 255, 255, .5);
    width: 5px;
    margin:0 10px 10px 2px;
    filter: blur(2px);
    background: linear-gradient(to bottom, rgba(147,124,115,.7) 0%,rgba(181,151,141,.7) 10%,rgba(255,255,255,.4) 100%);
}

#nose-bridge:after {
    content: "";
    display: block;
    background: rgba(255, 255, 255, .4);
    padding: 20px 1px;
    width: 5px;
    filter: blur(2px);
    margin: -20px 0 0 -2px;
    box-shadow: inset 0 1px 14px rgba(255,100,100,.3)
}

#nose-btm {
    padding: 3px;
    background: rgba(0, 0, 0, .1);
    margin: -20px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 40px;
    border-radius: 50%;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .1)
}

#nose-tip:before {
    content: "";
    padding:3px ;
    background: rgba(255,0,0,.2);
    display: block;
    margin:-5px auto -10px;
    width: 10px;
    position: relative;
    z-index: 9;
    filter: blur(4px);
    border-radius: 50%;
    box-shadow:inset 0 2px 15px rgba(255, 255, 255, .4);
}

#nose-tip {
    padding: 7px;
    background:  var(--skin);
    margin: -12px auto 1px;
    width: 20px;
    position: relative;
    z-index: 9;
    filter: blur(2px);
    border-radius: 50%;
    box-shadow: inset 0 2px 15px rgba(255, 255, 255, .4),inset 0 12px 5px rgba(250, 150, 100,.1);
}

#nose-tip:after {
    content: "";
    padding: 3px;
    background: rgba(0,0,0,1);
    display: block;
    margin: 17px 0 -20px -13px;
    width: 24px;
    position: relative;
    z-index: 1;
    filter: blur(2px);
    border-radius: 50%;
}

.nostril {
    margin: 0 auto;
    height: 20px;
    border-radius: 30%;
}

.nostril-l { transform: rotate(10deg)}
.nostril-r { transform: rotate(-10deg)}

.nostril:before {
    content: "";
    padding: 0 5px;
    background: var(--skin-two);
    filter: blur(3px);
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 -1px 3px rgba(0, 0, 0, .7), inset 0 -1px 6px rgba(255, 255, 255, .1);
    border: 1px solid rgba(0,0,0,.1);
}

.nostril:after {
    content: "";
    display: block;
    padding: 1.5px 6px;
    margin: -5px auto 0;
    border-radius: 50%;
    background: #222;
    background: radial-gradient(ellipse at center, rgba(56,56,56,.7) 46%,rgba(0,0,0,.3) 100%);
    position: relative;
    z-index: 9;
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 1),inset 0 -2px 9px rgba(255, 255, 255, .3);
    border: 1px solid rgba(255,255,255,.1);
}

#nose-cover {
    padding: 10px 20px;
    background:  var(--skin);
    margin: -33px auto 0;
    width: 20px;
    filter: blur(3px);
    border-radius: 50%;
    box-shadow: inset 0 2px 15px rgba(255, 255, 255, .4),inset 0 12px 5px rgba(250, 150, 100,.1);
}

#philtrum {
    width: 6px;
    background:  var(--skin-two);
    padding:9px 4px;
    margin: -9px auto 0px;
    box-shadow:inset 0 -1px 3px rgba(0, 0, 0, .1), inset 0 -1px 1px rgba(255, 255, 255, .3);
    border-radius: 30%;
}

#nose-reflection {
    opacity: .7;
    margin: -110px auto ;
    height: 54px;
    width: 20px;
    border-radius: 40% 50% 50% 30%/90% 90% 10% 10%;
    background:  var(--skin);
    box-shadow: inset -13px 13px 11px rgba(255,255,255,.2);
    position: relative;
    z-index: 9;
    filter: blur(2px);
}

#nose-reflection:before {
    content: "";
    display: block;
    background: #fff;
    opacity: .6;
    width: 5px;
    margin: -20px auto ;
    height: 42px;
    border-radius: 50% 50% 50% 50%/90% 90% 30% 30%;
}

#nose-reflection:after {
    content: "";
    display: block;
    background: #fff;
    opacity: .6;
    width: 25px;
    box-shadow: inset 0 3px 7px rgba(100,20,0,.6);
    border-bottom: 2px solid  rgba(80,20,0,.5);
    margin: 20px auto ;
    height: 12px;
    border-radius: 20% 30% 50% 50%/90% 90% 30% 30%;
}

/* Eyes */

.pupil {
    background: #111;
    border-radius: 50%;
    padding: 5px 8px;
    width: 10px;
    height: 20px;
    margin: -10px 0 1px 11px;
    background: radial-gradient(ellipse at center, rgba(86,86,86,.8) 0%,rgba(0,0,0,1) 100%);
    border: 1.5px solid var(--eyes);
}

.iris-l .pupil { margin-left:13px}
.iris-r .pupil { margin-left:10px}

.reflection {
    background: #ccc;
    padding: 1px;
    transform: rotate(-20deg);
    width: 3px;
    margin: 5px auto 0;
    border-radius: 50%;
    opacity: .7;
}

.brow-edge-one .reflection { padding: 10px}

.eye-lash {
    background: #111;
    padding: 10px 0;
    width: 2.5rem;
    filter: blur(10px);
    margin:-15px auto 0;
    border-radius: 50%;
}

.eye-corner-l:before {
    content: "";
    background: rgba(0,0,0,1);
    padding: 1px;
    width: 4px;
    border-radius: 90%;
    margin-left: 28px;
    transform: rotate(0deg);
}
.eye-corner-l {
    background: #111;
    padding: 2px;
    width: 40px;
    border-radius: 90%;
    margin-left: 26px;
    margin-top: -19px;
    transform: rotate(-1deg);
}

.eye-corner-r:before {
    content: "";
    width: 40px;
    padding: 3px;
    border-radius: 90%;
    margin-left: 34px;
    margin-top: -2px;
    transform: rotate(15deg);
}

.eye-corner-r {
    background: #111;
    width: 40px;
    padding: 3px;
    border-radius: 90%;
    margin-left: 27px;
    margin-top: -20px;
    transform: rotate(355deg);
}

#eyeliners {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-gap:40px;
    padding: 13px 0;
    margin: -23px auto;
    width: 200px;
    border-radius: 50%;
    filter: blur(10px);
    background: rgba(0,0,0,.4);
}

#eyeliner-r:before {
    padding: 8px 23px;
    content: "";
    background: rgba(0, 0, 0, 1);
    border-radius: 50%;
    top: -7px;
    margin-left: -10px;
    position: relative;
    filter: blur(2px);
}

#eyeliner-r {
    padding: 13px;
    background: rgba(255, 255, 255, .6);
    margin-bottom: -60px;
    margin-left: -50px;
    border-radius: 50%;
    opacity: .3;
}

#eyeliner-r:after {
    padding: 30px;
    content: "";
    background: red;
    border-radius: 50%;
    opacity: .3;
}

#eyeliner-l:before {
    padding: 8px 23px;
    content: "";
    background: rgba(0, 0, 0, 1);
    border-radius: 50%;
    top: -7px;
    margin-right: -40px;
    position: relative;
    filter: blur(2px);
}

#eyeliner-l:after {
    padding: 30px;
    content: "";
    background: red;
    border-radius: 50%;
    opacity: .3;
}

#eyeliner-l {
    padding: 13px;
    background: rgba(255, 255, 255, 1);
    margin-bottom: -60px;
    border-radius: 50%;
    opacity: .3;
}

/* Chin */

#chin {
    padding: 13px 0;
    border-radius: 50%;
    margin: -10px 20px 10px;
    background: var(--skin-two);
    background: radial-gradient(ellipse at center, rgba(255,255,255,.1) 0%,70%,  var(--skin-two) 100%);
    opacity: .5;
    filter: blur(6px);
    box-shadow:inset 0 -96px 55px rgba(255, 255, 255, .1), inset 0 -26px 35px rgba(255,0,0,.2);
}

#chin:after {
    background: #222;
    padding: 1px;
    height: 30px;
    filter: blur(1px);
    content: "";
    margin-top: -10px;
}


/* Brows */

#eye-brows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 29px;
    width: 164px;
    height: 13px;
    margin: -8px auto -20px;
    position: relative;
    z-index: 99;
}

.brow-l {
    display: grid;
    grid-template-columns: 3fr 6fr;
    transform: scale(.9);
}

.brow-r  {
    display: grid;
    grid-template-columns: 6fr 3fr;
    transform: scale(.9);
}

.brow-l .brow-edge-one {
    height:25px;
    transform: rotate(70deg);
    margin-right: -13px;
    margin-top: 6px;
}

.brow-r .brow-edge-one {
    height:25px;
    transform: rotate(73deg);
    margin-left: -40px;
    margin-top: 18px;
}

.brow-l .brow-edge-one li {
    padding:1.2px;
    box-shadow: 1px -1px 1px 0 rgba(0,0,0,.1), 1px 1px 2px 0 rgba(0,0,0,.7), -1px 1px 0 0 var(--hair), 1px 1px 0 0 rgba(0,0,0,.2), 2px -1px 0 0 rgba(0,0,0,.3);
    border-radius: 50%;
    width: 7px;
    transform: rotate(15deg);
    opacity: .7;
}

.brow-l .brow-edge-two li {
    padding:1.2px;
    border-radius: 50%;
    width: 7px;
    box-shadow: 1px -1px 1px 0 rgba(0,0,0,.1), 1px 1px 2px 0 rgba(0,0,0,.7), -1px 1px 0 0 var(--hair), 1px 1px 0 0 rgba(0,0,0,.2), 2px -1px 0 0 rgba(0,0,0,.3);
    opacity: .7;
}

.brow-r .brow-edge-one li {
    padding:1.2px;
    box-shadow: 1px -1px 1px 0 rgba(0,0,0,.1), 1px 1px 2px 0 rgba(0,0,0,.7), -1px 1px 0 0 var(--hair), 1px 1px 0 0 rgba(0,0,0,.2), 2px -1px 0 0 rgba(0,0,0,.3);
    border-radius: 50%;
    width: 7px;
    opacity: .7;
}

.brow-r .brow-edge-two li {
    padding:1.2px;
    border-radius: 50%;
    width: 7px;
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,.1), 1px 1px 2px 0 rgba(0,0,0,.7), -1px 1px 0 0  var(--hair), 1px 1px 0 0 rgba(0,0,0,.2), 2px -1px 0 0 rgba(0,0,0,.3);
    opacity: .7;
}

.brow-l .brow-edge-two {
    height: 50px;
    transform: rotate(105deg);
    margin-top: 3px;
    margin-left: -4px;
}

.brow-r .brow-edge-two {
    height: 50px;
    transform: rotate(115deg);
    margin-top: -24px;
    margin-left: 36px;
}

.brow-edge {
    height: 7px;
    border-radius: 40%;
    box-shadow: inset 0 31px 1px rgba(0,0,0,.8)
}

.brow-r .brow-edge-one li:nth-child(1) {
    transform: rotate(10deg);
    width: 7px;
    margin-top: 2px;
    margin-left: 1px;
}

.brow-r .brow-edge-one li:nth-child(2) {
    transform: rotate(10deg);
    width: 7px;
    margin-left: 1px;
    margin-top: 1px;
}

.brow-r .brow-edge-one li:nth-child(3) {
    transform: rotate(-10deg);
    width:10px;
    margin-top: -1px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(4) {
    transform: rotate(10deg);
    width: 7px;
    margin-left: 1px;
}

.brow-r .brow-edge-one li:nth-child(5) {
    transform: rotate(1deg);
    width: 8px;
    margin-left: 0;
}

.brow-r .brow-edge-one li:nth-child(6) {
    transform: rotate(10deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(7) {
    transform: rotate(10deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(8) {
    transform: rotate(10deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(9) {
    transform: rotate(8deg);
    width: 10px;
    margin-left: -3px;
}

.brow-r .brow-edge-one li:nth-child(10) {
    transform: rotate(10deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(11) {
    transform: rotate(-10deg);
    width: 10px;
    margin-left: -4px;
}

.brow-r .brow-edge-one li:nth-child(12) {
    transform: rotate(-2deg);
    width: 8px;
    margin-left: -1px;
}

.brow-r .brow-edge-one li:nth-child(13) {
    transform: rotate(10deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(14) {
    transform: rotate(-23deg);
    width: 10px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(15) {
    transform: rotate(-23deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(16) {
    transform: rotate(-23deg);
    width: 9px;
    margin-left: -2px;
}

.brow-r .brow-edge-one li:nth-child(17) {
    transform: rotate(-23deg);
    width: 9px;
    margin-left: -4px;
}

.brow-r .brow-edge-one li:nth-child(18) {
    transform: rotate(-5deg);
    width: 9px;
    margin-left: -3px;
}

.brow-r .brow-edge-one li:nth-child(19) {
    transform: rotate(-20deg);
    width: 10px;
    margin-left: -3px;
}
.brow-r .brow-edge-one li:nth-child(20) {
    transform: rotate(-0deg);
    width: 7px;
    margin-left: -1px;
}

.brow-r .brow-edge-two li:nth-child(1) {
    transform: rotate(63deg);
    width: 7px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(2) {
    transform: rotate(60deg);
    width: 7px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(3) {
    transform: rotate(60deg);
    width: 7px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(4) {
    transform: rotate(50deg);
    width: 7px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(5) {
    transform: rotate(40deg);
    width: 7px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(6) {
    transform: rotate(30deg);
    width: 7px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(7) {
    transform: rotate(30deg);
    width: 7px;
    margin-left: 3px;
}

.brow-r .brow-edge-two li:nth-child(8) {
    transform: rotate(-20deg);
    width: 8px;
    margin-top: 1px;
    margin-left: 3px;
}

.brow-l .brow-edge-one li:nth-child(1) {
    transform: rotate(-20deg);
    width: 9px;
    margin-right: 1px;
}

.brow-l .brow-edge-two li:nth-child(2) {
    transform: rotate(-20deg);
    width: 9px;
    margin-left: -1px;
}

.brow-l .brow-edge-two li:nth-child(3) {
    transform: rotate(-20deg);
    width:10px;
    margin-top: -1px;
    margin-left: -2px;
}

.brow-l .brow-edge-two li:nth-child(4) {
    transform: rotate(-20deg);
    width: 11px;
    margin-left: -4px;
}

.brow-l .brow-edge-two li:nth-child(5) {
    transform: rotate(-18deg);
    width: 11px;
    margin-left: -3px;
}

.brow-l .brow-edge-two li:nth-child(6) {
    transform: rotate(-20deg);
    width: 9px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(7) {
    transform: rotate(-20deg);
    width: 9px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(8) {
    transform: rotate(-20deg);
    width: 10px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(9) {
    transform: rotate(-18deg);
    width: 10px;
    margin-right: -3px;
}

.brow-l .brow-edge-two li:nth-child(10) {
    transform: rotate(-20deg);
    width: 9px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(11) {
    transform: rotate(-20deg);
    width: 10px;
    margin-right: -4px;
}

.brow-l .brow-edge-two li:nth-child(12) {
    transform: rotate(-26deg);
    width: 11px;
    margin-left: -1px;
    margin-top: 1px;
}

.brow-l .brow-edge-two li:nth-child(13) {
    transform: rotate(-20deg);
    width: 10px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(14) {
    transform: rotate(-23deg);
    width: 10px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(15) {
    transform: rotate(-23deg);
    width: 9px;
    margin-right: -2px;
}

.brow-l .brow-edge-two li:nth-child(16) {
    transform: rotate(-21deg);
    width: 8px;
    margin-left: 2px;
}

.brow-l .brow-edge-two li:nth-child(17) {
    transform: rotate(-23deg);
    width: 9px;
    margin-left:1px;
}

.brow-l .brow-edge-two li:nth-child(18) {
    transform: rotate(-25deg);
    width: 9px;
}

.brow-l .brow-edge-two li:nth-child(19) {
    transform: rotate(-20deg);
    width: 10px;
    margin-left: -1px;
    margin-top: 2px;
}
.brow-l .brow-edge-two li:nth-child(20) {
    transform: rotate(-30deg);
    width: 9px;
    margin-left: -1px;
    margin-top: 2px;
}

.brow-l .brow-edge-one li:nth-child(1) {
    transform: rotate(-13deg);
    width: 10px;
    margin-top: 1px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(2) {
    transform: rotate(-12deg);
    width: 7px;
    margin-top: 1px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(3) {
    transform: rotate(-40deg);
    width: 7px;
    margin-top: 1px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(4) {
    transform: rotate(-50deg);
    width: 9px;
    margin-top: 1px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(5) {
    transform: rotate(-55deg);
    width: 9px;
    margin-top: 1px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(6) {
    transform: rotate(-55deg);
    width:9px;
    margin-top: 1px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(7) {
    transform: rotate(-60deg);
    width: 7px;
    margin-right: 3px;
}

.brow-l .brow-edge-one li:nth-child(8) {
    transform: rotate(-60deg);
    width: 9px;
    margin-top: 1px;
    margin-right: 3px;
}


/* Cheeks */

#cheeks {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-gap:40px;
    padding: 10px 0;
    margin: -23px auto 6px;
    width: 150px;
    opacity: 1;
}

#cheek-r:before {
    padding: 8px 23px;
    content: "";
    background: rgba(0, 0, 0, 1);
    border-radius: 50%;
    top: -7px;
    margin-left: -10px;
    position: relative;
}

#cheek-l:before {
    padding: 8px 23px;
    content: "";
    background: rgba(0, 0, 0, 1);
    border-radius: 50%;
    top: -7px;
    margin-right: -40px;
    position: relative;
    filter: blur(2px);
}

#cheek-l:after {
    padding: 30px;
    content: "";
    background: red;
    border-radius: 50%;
    opacity: .2;
}

#cheek-r:after {
    padding: 30px;
    content: "";
    background: red;
    border-radius: 50%;
    opacity: .2;
}

#cheek-l {
    margin-top: -50px;
    border-radius: 50%;
    opacity: .2;
    filter: blur(6px);
    background: rgba(0,0,0, .6);
}

#cheek-r {
    margin-top: -50px;
    filter: blur(6px);
    background: rgba(0,0,0, .6);
    border-radius: 50%;
    opacity: .2;
}


/* Mouth. */

#mouth {
    width: 96px;
    margin: 12px auto 3px;
}

#top-lip { margin: auto}

#top-lip-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    height: 17px;
    padding: 0 34px;
    margin: -14px auto -12px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 99;
}

#top-lip-in-l {
    border-radius: 50%;
    margin-bottom: 8px;
    width: 16px;
    background: var(--lips);
    transform: rotate(-20deg);
    box-shadow: inset -10px 6px 5px rgba(0, 0, 0, .2);
}

#top-lip-in-r {
    border-radius: 50%;
    margin-bottom: 8px;
    margin-left: -5px;
    width: 16px;
    background: var(--lips);
    transform: rotate(20deg);
    box-shadow: inset 10px 6px 5px rgba(0, 0, 0, .2);
}

#top-lip-btm {
    padding: 5px ;
    border-radius: 50%;
    margin: -4px auto 0;
    width: 40px;
    background: var(--lips);
    position: relative;
    z-index: 999;
    box-shadow: inset 0 6px 5px rgba(0, 0, 0, .2);
}

#top-lip-btm:before {
    content: "";
    padding: 4px ;
    border-radius: 50%;
    margin-top: -1px;
    margin-bottom: -10px;
    margin-left: -5px;
    width: 30px;
    display: block;
    background: #222;
    box-shadow: inset 0px -1px 5px #444;
}

#top-lip-fill {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    margin-top: -15px;
    margin-bottom: -18px;
    border-radius: 50%;
}

#top-lip-btm-fill-l {
    padding: 3px;
    transform: rotate(-12deg);
    border-radius: 50%;
    margin-top: -4px;
    margin-bottom: 2px;
    border-bottom: 3px solid rgba(2,2,5,.1);
    position: relative;
    box-shadow: inset 10px 6px 5px rgba(0, 0, 0, .2);
    background: var(--lips);
}

#top-lip-btm-fill-r {
    padding: 3px;
    margin-top: -4px;
    transform: rotate(12deg);
    border-radius: 50%;
    margin-bottom: 2px;
    box-shadow: inset 10px 6px 5px rgba(0, 0, 0, .11),inset -10px 6px 5px rgba(0, 0, 0, .4);
    background: var(--lips);
}

#top-lip-btm-fill-r:after {
    content: "";
    padding: 2px;
    width: 30px;
    margin-left: -8px;
    margin-top: -3px;
    display: block;
    transform: rotate(14deg);
    border-radius: 50%;
    background: var(--lips);
    box-shadow: inset 10px 6px 5px rgba(0, 0, 0, .2)
}

#top-lip-btm-fill-l:after {
    content: "";
    margin-right: -8px;
    width: 30px;
    margin-top: -3px;
    padding: 2px;
    display: block;
    transform: rotate(-14deg);
    border-radius: 50%;
    background: var(--lips);
    box-shadow: inset 10px 6px 5px rgba(0, 0, 0, .2);
}

#bottom-lip { margin:-15px auto 0;
    border-radius: 50%;
    width: 70px;
    box-shadow: 0 1px 2px #111,  0 1px 4px #111,0 1px 7px #444;
}

#bottom-lip:before {
    content: "";
    display: block;
    padding: 7px;
    margin:-8px 20px -12px;
    position: relative;
    z-index: 9;
    opacity: .4;
    border-radius: 50%;
    background: var(--lips);
    box-shadow: inset 10px -6px 5px rgba(0, 0, 0, .3);
    filter: blur(1px);
}

#bottom-lip:after {
    content: "";
    background: rgba(255,255,255,.5);
    display: block;
    padding: 1px;
    width: 30px;
    margin:-13px auto 12px;
    position: relative;
    z-index: 9;
    filter: blur(2px);
    opacity: .9;
    border-radius: 50%;
}

#bottom-lip-in:before {
    content: "";
    padding: 3px 7px;
    background: rgba(0,0,0,.6);
    margin:0 auto -6px;
    width: 20px;
    display: block;
    border-radius: 50%;
    position: relative;
}

#bottom-lip-in:after {
    content: "";
    display: block;
    padding: 8px 7px;
    margin: -2px auto -6px;
    width: 30px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background: var(--lips);
    box-shadow: inset 0 -6px 5px rgba(0, 0, 0, .6);
    filter: blur(1px);
}

#bottom-lip-in {
    padding: 0;
    margin: -5px auto 3px;
    border-radius: 50%;
    position: relative;
    width: 60px;
    z-index: 1;
    border-bottom: 3px solid rgba(2,2,5,.6);
    background: var(--lips);
    box-shadow: inset 0 -6px 5px rgba(0, 0, 0, .45);
}

#bottom-lip-cover {
    padding: 9px;
    margin: -20px auto 3px;
    border-radius: 50%;
    position: relative;
    width: 40px;
    z-index: 1;
    border-bottom: 3px solid rgba(2,2,5,.6);
    background: var(--lips);
    box-shadow: inset 0 -6px 5px rgba(0, 0, 0, .5);
    filter: blur(1px);
}

#bottom-lip-cover:before {
    content: "";
    padding: 1px;
    display: block;
    border-radius: 50%;
    position: relative;
    width: 30px;
    margin-top: -4px;
    margin-left: -6px;
    z-index: 999999;
    border-bottom: 3px solid rgba(2,2,5,.6);
    background: var(--lips);
    box-shadow: inset 0 -6px 5px rgba(0, 0, 0, .5);
    filter: blur(3px);
}

#lip-shadow {
    padding: 9px;
    background: rgba(0,0,0,.2);
    margin: -10px auto 0;
    width: 3rem;
    border-bottom-left-radius: 60%;
    border-bottom-right-radius: 60%;
    filter: blur(2px);
}

#lip-shadow:before {
    content: "";
    padding: 1px;
    display: block;
    background: rgba(0,0,0,.4);
    margin: auto;
    width: 3rem;
    border-radius: 50%;
    filter: blur(1px);
}

#lip-overlay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr ;
    grid-gap: 5px;
    margin-top: -40px;
    position: absolute;
    z-index: 999;
    width: 94px;
}

#lip-overlay-l {
    background: var(--lips);
    padding: 3px 0;
    transform: rotate(-16deg);
    margin-top: 10px;
    margin-left: 13px;
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: inset -11px 12px 12px rgba(0,0,0,.29), inset -1px -2px 2px rgba(0,0,0,.2);
}

#lip-overlay-l:before {
    content: "";
    padding: 3px;
    margin-top: 1px;
    margin-left: -18px;
    border-radius: 50%;
    background: var(--skin-two);
    box-shadow: inset -11px 12px 12px rgba(0,0,0,.8);
    position: absolute;
    filter: blur(2px);
}

#lip-overlay-r {
    background: var(--lips);
    padding:5px 0;
    margin-top: 10px;
    margin-right: 13px;
    border-radius: 50%;
    filter: blur(1px);
    transform: rotate(16deg);
    box-shadow: inset -11px 12px 12px rgba(0,0,0,.34), inset 1px -2px 2px rgba(0,0,0,.6);
}

#teeth:before {
    background: var(--lips);
    content:"";
    padding: 0px;
    height: 8px;
    width: 20px;
    margin-top: -2px;
    margin-left: -8px;
    position: relative;
    z-index: 9999;
    border-radius: 30%;
    display: block;
    box-shadow: inset 0 11px 15px rgba(0, 0, 0, .2),inset 0 -3px 15px rgba(0, 0, 0, .2), inset 0 3px 15px rgba(0, 0, 0, .1);
    filter: blur(1px);
}

#teeth {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 20px;
    padding: 0 26px;
    background: #111;
    width: 60px;
    margin-top: -5px;
    margin-left: 19px;
    border-radius:50%;
    position: absolute;
}

.tooth {
    display: block;
    background: #ccc;
    border-radius: 3px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .1),inset 0px 4px 2px rgba(0,0,0,.2);
    position: absolute;
    z-index: 999;
    width: 10px;
    border: 1px solid #777;
    height: 10px;
}

.tooth:nth-child(1) {
    margin-top: -1px;
    height: 9px;
    margin-left: 11px;
    transform: rotate(100deg);
}

.tooth:nth-child(2) { margin-left: 19px}
.tooth:nth-child(3) { margin-left: 27px}
.tooth:nth-child(4) { margin-left: 35px;transform: rotate(-100deg);
 margin-top: -1px;
height: 9px;
}


/* Textures */

#skin ul{
    opacity: .4;
    display: grid;
    height: 40px;
    width: 110px;
    margin: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr ;
}

#skin {
    width: 13rem;
    margin: -8.6rem  auto;
}

#skin li{
    background: #512d2d;
    padding: 1px;
    margin: auto;
    width: 2px;
    height:2px;
    border-radius: 50%;
    opacity: .5;
}

#skin li:nth-child(1),#skin li:nth-child(6) ,#skin li:nth-child(13),#skin li:nth-child(15), #skin li:nth-child(16),#skin li:nth-child(18) {
visibility: hidden}

#skin li:nth-child(3) {    margin-left: 10px;opacity: .1}
#skin li:nth-child(4) {
    margin-top:-2px;
    margin-left: 1px;
    width: 1px;
    opacity: .2;
}

#skin li:nth-child(7) { margin-left: 14px}
#skin li:nth-child(8) { margin-left: 12px}
#skin li:nth-child(9) {    margin-top:14px;margin-left: 19px; width: 0; height: 0}

#skin li:nth-child(10) {
    margin-top: 5px;
    margin-left: 5px;
    width: 1px;
    opacity: .2;
}

#skin li:nth-child(12) {
    margin-top: 7px;
    margin-left: 1px;
    width: 1px;
}

#skin li:nth-child(12) {
    margin-left:3px;
    width: 1px;

}

#skin li:nth-child(17) {
    margin-top:7px;
    margin-left:11px;
    width:0px;
    height: 0;
}

#skin li:nth-child(n+2):nth-child(odd):nth-child(-n+9) { opacity: .4}

#features {
    padding: 1.5px;
    margin:45px auto  0;
    position: relative;
    width: 172px;
    height:142px;
    border-radius: 50%;
    opacity: .8;
}

#texture {
    margin:-178px auto  0;
    width: 209px;
    height:282px;
    opacity: .1;
    filter: blur(5px);
    border: 22px solid rgba(0,0,0,1);
    background: #f97373;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    background: radial-gradient(ellipse at center, rgba(249,115,115,.2) 0%,rgba(19,0,25,.6) 97%,rgba(0,0,0,1) 100%);
}

#texture:after {
    content: "";
    width: 202px;
    display: block;
    margin-top: -15px;
    margin-left: -25px;
    height:286px;
    background: hsl(0, 100%, 50%);
    opacity: .1;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 10px -13px 65px #00003d, inset 51px -1px 45px rgba(0,0,0,.7);
}

#mole {
    background: #512d2d;
    background: radial-gradient(ellipse at center, rgba(81,22,12,1) 0%,rgba(76,19,0,1) 100%);
    box-shadow: 0 1px 4px rgba(0,0,0,.6),inset 0 -2px 1px rgba(0,0,0,.2);
    padding: 2px 0px;
    position: relative;
    margin-left: 9px;
    top: 70px;
    left: 110px;
    width: 4.5px;
    height:5px;
    border-radius: 50%;
}

#mole-two {
    background: #512d2d;
    background: radial-gradient(ellipse at center, rgba(81,22,12,1) 0%,rgba(76,19,0,1) 100%);
    box-shadow: 0 1px 4px rgba(0,0,0,.6),inset 0 -2px 1px rgba(0,0,0,.2);
    padding: 1px 0;
    position: relative;
    margin-left: 9px;
    top: 5px;
    opacity:.6;
    left: 10px;
    width: 3px;
    height:3px;
    border-radius: 50%;
}

#mole-three {
    background: #512d2d;
    background: radial-gradient(ellipse at center, rgba(81,22,12,1) 0%,rgba(76,19,0,1) 100%);
    box-shadow: 0 1px 4px rgba(0,0,0,.6),inset 0 -2px 1px rgba(0,0,0,.2);
    padding: 1px 0;
    position: relative;
    margin-left: 9px;
    top: 5px;
    left: 60px;
    width: 3px;
    opacity: .66;
    height:3px;
    border-radius: 50%;
}

#mottle {
    height: 17.6rem;
    display: block;
    margin: -295px auto;
    width: 12.8rem;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    opacity: .1;
    filter: blur(1px);
}

#wrinkles  {
    margin: -216px auto;
    position: relative;
}

#wrinkles li {
    margin: 1px auto;
    width: 70px;
    height: 10px;
    border-radius: 40%;
    box-shadow: 0 1px 1px hsl(348, 29%, 55%), 0 6px 6px #af6d79;
}

#wrinkles li:nth-child(1) { transform: scale(1.1)}

#wrinkles li:before {
    content: "";
    display: block;
    margin: 9px auto 0;
    position: absolute;
    left: 50px;
    width: 20px;
    height: 10px;
    border-radius: 30%;
    box-shadow: 0 1px 1px hsl(348, 29%, 55%), 0 6px 6px #af6d79;
    transform: rotate(180deg);
}

#wrinkles li:after {
    content: "";
    display: block;
    margin: 9px auto 0;
    position: absolute;
    right: 50px;
    width: 20px;
    height: 10px;
    border-radius: 30%;
    box-shadow: 0 1px 1px hsl(348, 29%, 55%), 0 6px 6px #af6d79;
    transform: rotate(180deg);
}

#skin-texture  {
    opacity: .1;
    width: 203px;
    height: 282px;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 99999;
    background: #f57d48;
}

#skin-texture:after  {
    display: block;
    content: "";
    margin: 0 auto;
    width: 203px;
    height: 282px;
    opacity: .9;
    overflow: hidden;
    border-radius: 50%;
    background:
radial-gradient(pink 5%, transparent 10%) 0 0,
radial-gradient(pink 5%, transparent 56%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:transparent;
    background-size:2px 2px;
}

#scar  {
    background: #a33f3f;
    border-radius: 50%;
    padding: 10px;
    width: 2px;
    -webkit-clip-path: polygon(28% 4%, 31% 14%, 31% 29%, 34% 46%, 38% 59%, 42% 66%, 43% 75%, 44% 84%, 46% 80%, 47% 70%, 48% 59%, 47% 49%, 45% 35%, 45% 21%, 45% 9%, 45% 3%);
    clip-path: polygon(28% 4%, 31% 14%, 31% 29%, 34% 46%, 38% 59%, 42% 66%, 43% 75%, 44% 84%, 46% 80%, 47% 70%, 48% 59%, 47% 49%, 45% 35%, 45% 21%, 45% 9%, 45% 3%);
    height: 16px;
    margin: 269px 0 0 70px;
    opacity: .8;
    position: relative;
    box-shadow: inset -30px 13px 11px rgba(0,0,0,.5);
}


/* Ears */

.ears {
    position: absolute;
    top: 112px;
    width: 228px;
    z-index: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 150px;
    margin-left: -11px;
}

.ear-l {
    background: var(--skin);
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 -13px 15px rgba(0,0,0,.8),inset 0 33px 15px rgba(0,0,0,.3);
    transform: rotate(-16deg);
    margin-left: 2px;
}

.ear-r {
    background: var(--skin);
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 0 -13px 15px rgba(0,0,0,.6),inset 0 -33px 15px rgba(0,0,0,.3);
    transform: rotate(10deg);
}

.ear-l:after {
    content: "";
    display: block;
    padding: 30px 0;
    margin-top: -33px;
    margin-left: 5px;
    filter: blur(1px);
    background: var(--skin);
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset 4px -1px 10px rgba(0,0,0,.6), inset 14px -1px 10px rgba(0,0,0,.6), -14px 11px 10px rgba(0,0,0,.3);
}

.ear-r:after {
    content: "";
    display: block;
    padding: 30px 0;
    margin-top: -33px;
    filter: blur(1px);
    margin-right: 5px;
    background: var(--skin);
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    box-shadow: inset -4px -1px 10px rgba(0,0,0,.6), inset -14px -1px 10px rgba(0,0,0,.6), 14px -11px 10px rgba(0,0,0,.3);
}

.ear-l-inner {
    background: var(--skin);
    border-radius: 30%;
    box-shadow: inset -10px -10px 15px rgba(0,0,0,.6);
    padding: 8px 2px;
    margin-top: 22px;
    margin-bottom: -50px;
    margin-left: 8px;
    position: relative;
    width: 30px;
}

.ear-r-inner {
    background: var(--skin);
    border-radius: 30%;
    box-shadow: inset 0px -10px 15px rgba(0,0,0,.6);
    padding: 8px 1px;
    margin-top: 28px;
    margin-bottom: -54px;
    margin-left: -3px;
    position: relative;
    width: 35px;
}

.ear-l-lobe {
    background: var(--skin);
    border-radius: 40%;
    box-shadow: inset 0px -3px 15px #444;
    padding: 10px 0;
    margin-top: 60px;
    margin-bottom: -60px;
    position: relative;
    z-index: 99;
    width: 20px;
    margin-right: 16px;
    box-shadow: inset 0 -13px 15px rgba(0,0,0,.5),inset 0 33px 15px rgba(0,0,0,.3);
}

.ear-r-lobe {
    background: var(--skin);
    border-radius: 40%;
    box-shadow: inset 0px -3px 15px #444;
    padding: 10px 0;
    margin-top: 60px;
    margin-bottom: -60px;
    position: relative;
    z-index: 99;
    width: 20px;
    margin-left: 16px;
    box-shadow: inset 0 -13px 15px rgba(0,0,0,.5),inset 0 33px 15px rgba(0,0,0,.3);
}

/* Thanks for looking. */





/* To do

.teeth-btm {
    display: block;
    background: #ccc;
    border-radius: 3px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .1);
    position: absolute;
    z-index: 1;
    transform: rotate(180deg);
    margin-left: 74px;
    margin-top: 10px;
}

.tooth-btm {
    display: block;
    background: #ccc;
    border-radius: 3px;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .1);
    position: absolute;
    z-index: 9999999;
    width: 10px;
    border: 1px solid #777;
    height: 10px;
    margin-left: 10px;
    margin-top: -0px;
    background: red;
}

.tooth-btm:nth-child(2) { margin-left: 19px}
.tooth-btm:nth-child(3) { margin-left: 27px}
.tooth-btm:nth-child(4) { margin-left: 35px;transform: rotate(-100deg);
 margin-top: -1px;
height: 9px;
}

*/

/* Animations */

#top-lip {
    animation: chat-top var(--animation-rapid) infinite;
    animation-delay: var(--delay);
}
@keyframes chat-top {
    0% { height:15px }
    100% { height: 16px}
}
#top-lip-btm:before {
    animation: chat  var(--animation-rapid) infinite;
    animation-delay: var(--delay);
}

@keyframes chat {
    0% {height:0}
    100% {height: 1px}
}

.pupil {
    animation: eyes var(--animation) infinite alternate-reverse;
    animation-delay: var(--delay);
}

@keyframes eyes {
    0% {transform: translateX(-6px)}
    50% {transform: translateX(-6px)}
    70% {transform: translateY(2px)}
    100% {transform: translateY(3px)}
}

@keyframes phil {
    0% {height: 8px }
    100% {height: 13px}
}

#philtrum {
    animation: phil var(--animation-quick) infinite alternate-reverse;
    animation-delay: var(--delay);
}

.reflection {
    animation: reflect var(--animation) infinite alternate-reverse;
    animation-delay: var(--delay);
}

@keyframes reflect {
    0% {transform: translateX(0) translateY(3px)}
    50% {transform: translateX(1px) translateY(2px)}
    70% {transform: translateX(-1px) translateY(2px)}
    100% {transform: translateX(0) translateY(-3px)}
}

#nose {
    animation: nose var(--animation) infinite alternate-reverse;
    animation-delay: var(--delay);
}

@keyframes nose {
    0% {transform: translateY(-10px)}
    100% {transform: translateY(20px)}
}