:root {
    --background: #1c1e20;
    --wall: #e2dc8f; 
    --clothes: #d7667b;
    --hair: #1c1a1a;
    --skin_color: #c6886d;
    --nose: #ca7e5d;
    --eyebrow: #211b1b;
}

body {
    background: var(--background);
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.container {
    display: flex;
    position: relative;
    background: var(--wall);
    overflow: hidden;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    transition: all 0.5s ease;
}

.clothes {
    width: 8em;
    height: 4em;
    background: linear-gradient(to bottom, var(--clothes), rgb(205, 64, 64));
    position: absolute;
    display: block;
    top: 67%;
    left: 28%;
    border-radius: 60px 60px 0 0;
    z-index: 5;
}

.buttons1, .buttons2 {
    width: 0.5em;
    height: 0.5em;
    background: aliceblue;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 48%;
    top: 49%;
}

.buttons2 {
    top: 80%;
}

.head {
    position: absolute;
    display: block;
    z-index: 3;
    width: 90px;
    height: 120px;
    background: var(--skin_color);
    border-radius: 40%;
    left: calc(50% - 45px);
    top: 70px;
}

.neck {
    position: absolute;
    display: block;
    width: 40px;
    height: 50px;
    background: var(--skin_color);
    left: calc(50% - 20px);
    top: 60%;
    border-radius: 0% 0% 50% 50%;
    z-index: 6;
}

.hair1 {
    display: block;
    position: absolute;
    width: 5em;
    height: 2em;
    background: linear-gradient(to bottom, rgb(54, 34, 34), var(--hair));
    border-radius: 50% 50% 0% 70%;
    left: calc(50% - 20px);
    top: 23%;
    box-shadow: inset 10px -1px lighten(var(--background) 10%);
    transform: rotate(30deg);
    z-index: 5;
}

.hair2 {
    width: 9em;
    height: 10em;
    position: absolute;
    background: linear-gradient(to bottom, rgb(54, 34, 34), var(--hair) ) ;
    left: 25%;
    top: 20%;
    border-radius: 50% 50% 20% 20%;
}

.hair3 {
    display: block;
    position: absolute;
    width: 4em;
    height: 1.7em;
    background: linear-gradient(to bottom, rgb(54, 34, 34), var(--hair));
    border-radius: 50% 50% 0% 70%;
    left: calc(50% - 60px);
    top: 23%;
    box-shadow: inset 10px -1px lighten(var(--background) 10%);
    transform: rotate(-30deg);
    z-index: 5;
}

.eye-left, .eye-right {
        display: block;
        position: absolute;
        flex-wrap: wrap;
        z-index: 30;
        top: 40%;
        left: 40%;
        width: 0.8em;
        height: 0.6em;
        background: black;
        content: '';
        animation: blink 3s ease-in-out infinite;
        border-radius: 50%;
    }

.eye-right {
    left: 55%;
}

.eyebrow-left, .eyebrow-right {
    width: 1em;
    height: 0.2em;
    background: var(--eyebrow);
    position: absolute;
    display: block;
    z-index: 10;
    top: 37%;
    left: 39%;
    border-radius: 90% 90% 0% 0%;
    transform: rotate(5deg);
}

.eyebrow-right {
    transform: rotate(-5deg);
    left: 55%;
}

.nose{
    display: block;
    position: absolute;
    z-index: 6;
    top: 45%;
    left: 48%;
    width: 8px;
    height: 14px;
    background: var(--nose);
    border-radius: 0% 60% 5% 5%;
}

.smile1, .smile2, .smile3 {
    display: block;
    position: absolute;
    z-index: 6;
    background-color: rgb(193, 84, 84);
    border-radius: 0% 0% 90% 90%;
    height: 0.6em;
    width: 1.6em;
    left: calc(50% - 13px);
    overflow: hidden;
    top: 54%;      
}

.smile2, .smile3 {
    width: 1em;
    border-radius: 50%;
    top: 53%;
    left: 45%;
}

.smile3 {
    left: 49%;
}

.blush1, .blush2 {
    position: absolute;
    display: block;
    width: 0.7em;
    height: 0.3em;
    top: 48%;
    left: 38%;
    background-image: radial-gradient(circle, rgb(222, 158, 169), rgb(213, 132, 132));
    border-radius: 50%;
    z-index: 10;
}

.blush2 {
    left: 57%;
}

@keyframes blink {
    0% {
        transform: scaleY(1);
    }

    18% {
        transform: scaleY(1);
    }

    20% {
        transform: scaleY(0);
    }

    25% {
        transform: scaleY(1);
    }

    38% {
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(0);
    }

    45% {
        transform: scaleY(1);
    }

    80% {
        transform: scaleY(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes blushing {
    0% {
        background-image: radial-gradient(circle, pink, white);
    }

    100% {
        background-image: radial-gradient(circle, rgb(201, 113, 127), white);
    }
}