face_style.css

.canvas{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.body{
    height: 200px;
    width: 200px;
    background-color: #ffcd94;
    border-radius: 50%;
    position: relative;
}

.hair{
    position: absolute;
    background-color: #0e0d0b;
    transform: translateY(-5%);
    z-index: -10; 
    opacity: .7;
    box-shadow:#0e0d0b;
}

.top-hair{
    height: 25px;
    width: 35px;
    background-color: #0e0d0b;
    position: absolute;
    left:75px;
    top:-15px;
    border-radius: 50%;
    z-index:-9;
}

.eyes{
    display: flex;
    position: relative;
    top:50px;
}

.eye{
    background-color: white;
    border-radius: 50%;
    height: 20px;
    width: 35px;
    margin: 20px 20px 0 35px;
    left: 20px;
    z-index: 10;
}

.pupils{
    background-color: brown;
    border-radius: 50%;
    height:20px;
    width: 20px;
    z-index: 5;
    transform: translateX(9px);
}

.black{
    background-color: black;
    height:8px;
    width: 8px;
    border-radius: 50%;
    transform: translateY(6px);
    margin-left: 6px;
}

.left-ear{
    position: absolute;
    width: 40px;
    height: 60px;
    background-color: rgb(236, 197, 145);
    border-radius: 50%;
    transform: translateX(-30%) translateY(85%) rotate(-30deg);
    z-index: -15;
}
.right-ear{
    position: absolute;
    width: 40px;
    height: 60px;
    background-color: rgb(236, 197, 145);
    border-radius: 50%;
    transform: translateX(430%) translateY(85%) rotate(30deg);
    z-index: -15;
}

.mouth{
    background-color: crimson;
    height: 80px;
    width: 80px;
    transform: translateX(58px)translateY(-10px);
    clip-path: polygon(32% 80%, 68% 80%, 100% 60%, 75% 100%, 25% 100%, 1% 60%);
}

.nose{
    font-size: 3em;
    transform: translateY(32px) translateX(95px);

}