.center_smile{

        display: flex;
justify-content: center;
align-items: center;
text-align:center;

    }

.face
{
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #ffcd00;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}




.face::before
{
    content: '';
    position: absolute;
    top: 180px;
    width: 140px;
    height: 74px;
    background: #40bad5;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    transition: 0.5s;
    
    
}
.face:hover::before
{
    top: 220px;
    width: 100px;
    height: 10px;
    background: #40bad5;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    transition: 0.5s;
    
}
.eyes
{
    position: relative;
    top: 0;
    display: flex;
    
}
.eyes .eye
{
    position:relative;
    top: -35px;
    width: 75px;
    height:75px;
    display: block;
    background: #fff;
    margin: 0 014px;
    border-radius: 50%;
    justify-content: center;
    
}
.eyes .eye::before
{
    content: '';
    position: absolute;
    top:50%;
    left:25px;
    transform: translate(-50%,-50%);
    width: 35px;
    height: 35px;
    background: #333;
    border-radius: 50%;
}