.smiley .eye,
.smiley .eye:before,
.smiley .eye:after {
    transition: all .5s ease;
}

.smiley {
    display: inline-block;
    overflow: hidden;
    background: radial-gradient(circle at 75% 30%, #fff 1em, yellow 25%);
    font-size: 5px;
    word-spacing: 0;
    line-height: 1em;
    text-align: center;
    width: 20em;
    height: 20em;
    border: solid .5em #000;
    margin: auto;
    border-radius: 12.5em;
    box-shadow: 0 0 1em #666;
    box-sizing: content-box;
}

.smiley * {
    box-sizing: content-box;
}

.smiley .eye,
.smiley .mouth {
    display: inline-block;
}

.smiley .eye {
    position: relative;
    background: #FFF;
    color: #000;
    font: bold 1em/5.5em arial;
    width: 2.5em;
    height: 5.5em;
    margin-top: 3.5em;
    border: solid .5em #000;
    border-radius: 10em;
}

.smiley .eye:before {
    content: "eyebrow";
    position: absolute;
    top: -1.5em;
    overflow: hidden;
    background: transparent;
    color: #FFF;
    text-indent: -999em;
    width: 3.5em;
    height: 5.5em;
    border-top: solid .5em #000;
    border-radius: 10em;
}

.smiley .eye:after {
    content: "cornea";
    position: absolute;
    bottom: -.25em;
    left: .25em;
    overflow: hidden;
    background: #000;
    color: #000;
    text-indent: -999em;
    width: 2.5em;
    height: 2.5em;
    border-top: solid .5em #000;
    border-radius: 10em;
}

.smiley .left.eye {
    margin-right: .75em;
    margin-left: 5.5em;
}

.smiley .left.eye:before {
    left: -1em;
    border-radius: 12.5em 2.5em 10em 10em;
}

.smiley .right.eye {
    margin-left: .75em;
    margin-right: 5.5em;
}

.smiley .right.eye:before {
    right: -1em;
    border-radius: 2.5em 12.5em 10em 10em;
}

.smiley .mouth {
    line-height: .5em;
    width: 10em;
    height: 10em;
    margin-top: 2.5em;
    border-top: solid .5em #000;
}

.elated.smiley .mouth {
    position: relative;
    overflow: hidden;
    width: 12.5em;
    height: 12.5em;
    margin-top: 1em;
    border-top: solid .25em #000;
}

.elated.smiley .mouth:after {
    content: " ";
    position: absolute;
    top: -50%;
    left: 0;
    overflow: hidden;
    background: linear-gradient(to right,  #ffffff 0%,#ffffff 4%,#000000 5%,#ffffff 6%,#ffffff 14%,#000000 15%,#ffffff 16%,#ffffff 24%,#000000 25%,#ffffff 26%,#ffffff 34%,#000000 35%,#ffffff 36%,#ffffff 44%,#000000 45%,#ffffff 46%,#ffffff 54%,#000000 55%,#ffffff 56%,#ffffff 64%,#000000 65%,#ffffff 66%,#ffffff 74%,#000000 75%,#ffffff 76%,#ffffff 84%,#000000 85%,#ffffff 86%,#ffffff 94%,#000000 95%,#ffffff 96%,#ffffff 100%);
    word-spacing: 1em;
    text-align: center;
    width: 100%;
    height: 80%;
    padding-top: 20%;
    border-bottom: solid .25em #000;
    border-radius: 10em;
}

.happy.smiley .mouth:before {
    content: "left dimple";
    position: absolute;
    bottom: 25%;
    left: -.75em;
    text-indent: -9999em;
    width: 2em;
    height: 1.5em;
    border-top: solid .25em #000;
    transform: rotate(-20deg);
}

.happy.smiley .mouth {
    position: relative;
    width: 10em;
    height: 10em;
    margin-top: -4.5em;
    border-top: 0 none;
    border-bottom: solid .5em #000;
    border-radius: 12.5em;
}

.happy.smiley .mouth:after {
    content: "right dimple";
    position: absolute;
    bottom: 25%;
    right: -.75em;
    text-indent: -9999em;
    width: 2em;
    height: 1.5em;
    border-top: solid .25em #000;
    transform: rotate(20deg);
}

.frowny.smiley .mouth {
    width: 10em;
    height: 10em;
    margin-top: 2.5em;
    border-top: solid .5em #000;
    border-radius: 2.5em 4em 4em;
}

.inquisitive.smiley .left.eye:before {
    top: -3em;
}

.lying.smiley .eye:after {
    top: -.25em;
}

.honest.smiley .eye:after {
    left: -.25em;
    right: auto;
}

.angry.smiley .left.eye:before {
    transform: rotate(15deg);
    border-radius: 0;
}

.angry.smiley .right.eye:before {
    transform: rotate(-15deg);
    border-radius: 0;
}

.constipated.smiley .eye {
    width: 4em;
    height: 0;
    margin-top: 8em;
    border-width: .5em 0 0;
    border-radius: 0;
}

.constipated.smiley .eye:before {
    top: -1.5em;
    height: 0;
}

.constipated.smiley .left.eye {
    margin-left: 4em;
}

.constipated.smiley .left.eye:before {
    left: 0;
    border-radius: 0;
    transform: rotate(30deg);
}

.constipated.smiley .right.eye:before {
    right: 0;
    border-radius: 0;
    transform: rotate(-30deg);
}

.constipated.smiley .eye:after {
    display: none;
}