/* css */

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

.face{
    position:absolute;
    width: 200px;
    height: 260px;
    background: #e8b47d;
    border-radius: 50%;
    
}

.hair {
    position:absolute;
    background-color: chocolate;
    /* position: fixed; */
    width: 190px;
    height: 45px;
    transform: translate(3%, 80%);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

.hat{
    position:absolute;
    width: 170px;
    height: 30px;
    background: blue;
    /* border-top-left-radius: 100px; */
    border-top-right-radius: 100px;
    transform: translate(40%,67%);

}

.tophat{
    position:absolute;
    width: 170px;
    height: 100px;
    background: blue;
    transform: translate(10%, -50%);
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}
/* 
.mustache{
    position: absolute;
    background-color: chocolate;
    width: 124px;
    height: 25px;
    transform: translate(30%,650%);
    border-top-left-radius: 60%;
    border-top-right-radius: 60%;
} */

.eyebrow-left{
    position: absolute;
    color: chocolate;
    transform: rotate(90deg)
    scale(300%)
    translate(530%, -110%);
}

.eyebrow-right{
    position: absolute;
    color: chocolate;
    transform: rotate(90deg)
    scale(300%)
    translate(530%, -260%);
}


.left-eye{
    position: absolute;
    background: white;
    width: 50px;
    height: 60px;
    border-radius: 50%;
    transform: translate(70%, 160%);
}


.right-eye{
    position: absolute;
    background: white;
    width: 50px;
    height: 60px;
    border-radius: 50%;
    transform: translate(230%, 160%);
}

.right-pupil {
    position: absolute;
    background: rgb(65, 50, 1);
    width: 20px;
    height: 30px;
    border-radius: 50%;
    transform: translate(250%, 360%);
}

.left-pupil {
    position: absolute;
    background: rgb(65, 50, 1);
    width: 20px;
    height: 30px;
    border-radius: 50%;
    transform: translate(650%, 360%);
}

.tongue{
    position:absolute;
    background: red;
    width: 20px;
    height: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transform: translate(95px, 210px)
    rotate(180deg);
}
.tongue-right{
    position:absolute;
    background: red;
    width: 20px;
    height: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transform: translate(85px, 210px)
    rotate(180deg);
}

.mouth{
    position:absolute;
    background: white;
    width: 80px;
    height: 40px;
    border-radius: 20px;
    /* border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px; */
    transform: translate(75%, 450%);
}

.nose {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    color: chocolate;
    transform: translate(95px, 150px)
    scale(250%)
    rotate(-90deg);
}

.bridge {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
    color: chocolate;
    transform: translate(92px, 128px)
    scale(250%);
}