.face-area {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50px;
    display: block;
    border: 1px solid black;
    background-color: rgb(181,180,180, 0.3);
}

.eye-area {
    width: 15px;
    height: 24px;
    background: #262626;
    border-radius: 140px;
    position: absolute;
    top: 20px;
}

.eye1 {
    left: 26px;
}

.eye2 {
    right: 25px;
}

.smile-extra-happy {
    width: 50px;
    height: 23px;
    border: 5px solid #262626;
    border-top: 0;
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    position: absolute;
    bottom: 15px;
    left: 25px;
}

.smile-happy {
    width: 50px;
    height: 15px;
    border: 5px solid #262626;
    border-top: 0;
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    position: absolute;
    bottom: 25px;
    left: 25px;
}

.smile-sad {
    width: 50px;
    height: 15px;
    border: 5px solid #262626;
    border-top: 0;
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    position: absolute;
    bottom: 25px;
    left: 25px;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.smile-extra-sad {
    width: 50px;
    height: 25px;
    border: 5px solid #262626;
    border-top: 0;
    border-radius: 0 0 120px 120px / 0 0 90px 90px;
    position: absolute;
    bottom: 15px;
    left: 25px;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.smile-neutral {
    width: 50px;
    height: 5px;
    border: 5px solid #262626;
    border-top: 0;
    position: absolute;
    bottom: 30px;
    left: 25px;
}

.smiley:hover {
    background-color: rgb(147, 193, 53); 
}

.active-smiley {
    background-color: rgb(147, 193, 53);
}