:root {
    --color-creme: #d1b271;
    --color-yellow: #fed90f;
    --color-background: #de433f;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    height: 100vh;
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
}

.head {
    width: 215px;
    height: 405px;
    position: relative;
}

.forehead {
    width: 170px;
    height: 200px;
    position: absolute;
    background-color: var(--color-yellow);
    border: 1px solid black;
    border-radius: 60%/50%;
    -webkit-border-radius: 60%/50%;
    -moz-border-radius: 60%/50%;
    -ms-border-radius: 60%/50%;
    -o-border-radius: 60%/50%;
    transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    -o-transform: rotate(-18deg);
    top: 10px;
}

.forehead::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 70px;
    border-top: 2px solid black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    left: 20px;
    top: -8px;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
}

.forehead::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 70px;
    border-top: 2px solid black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    left: 35px;
    top: -18px;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
}

.face-side1 {
    width: 140px;
    height: 60px;
    background-color: var(--color-yellow);
    position: absolute;
    top: 185px;
    left: 30px;
}

.eyes {
    width: 75px;
    height: 75px;
    background-color: white;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid black;
    position: absolute;
    top: 110px;
    left: 120px;
}

.eyes::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    top: 40px;
    left: 30px;
}

.left-eye {
    left: 60px;
    top: 115px;
}

.left-eye::before {
    left: 25px;
}

.neck {
    width: 125px;
    height: 150px;
    position: absolute;
    background-color: var(--color-yellow);
    border-left: 1px solid black;
    border-right: 1px solid black;
    left: 27px;
    top: 200px;
    transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
}

.nose {
    width: 60px;
    height: 32px;
    background-color: var(--color-yellow);
    position: absolute;
    border: 1px solid black;
    border-left: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    left: 130px;
    top: 175px;
    z-index: 10;
}

.face-side2 {
    width: 40px;
    height: 60px;
    background-color: var(--color-yellow);
    position: absolute;
    border-left: 1px solid black;
    top: 165px;
    left: 22px;
    transform: rotate(-11deg);
    -webkit-transform: rotate(-11deg);
    -moz-transform: rotate(-11deg);
    -ms-transform: rotate(-11deg);
    -o-transform: rotate(-11deg);
}

.ear {
    width: 32px;
    height: 37px;
    position: absolute;
    background-color: var(--color-yellow);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid black;
    top: 200px;
    left: 10px;
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
}

.ear::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 1px solid black;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    top: 8px;
    left: 8px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

.ear::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 1px solid black;
    top: 12px;
    left: 9px;
}

.mouth {
    width: 115px;
    height: 120px;
    position: absolute;
    background-color: var(--color-creme);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid black;
    top: 207px;
    left: 60px;
}

.mouth::before {
    content: "";
    position: absolute;
    background-color: var(--color-creme);
    width: 20px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-right: 1px solid black;
    top: 62px;
    left: 98px;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
}

.mouth::after {
    content: "";
    position: absolute;
    background-color: var(--color-creme);
    width: 120px;
    height: 60px;
    border-bottom: 1px solid black;
    top: 20px;
    left: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
}

.mouth2 {
    width: 35px;
    height: 48px;
    background-color: var(--color-creme);
    position: absolute;
    border-top: 1px solid black;
    top: 230px;
    left: 165px;
    border-radius: 10%;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    -ms-border-radius: 10%;
    -o-border-radius: 10%;
}

.mouth3 {
    width: 60px;
    height: 30px;
    background-color: var(--color-creme);
    position: absolute;
    border-right: 1px solid black;
    top: 200px;
    left: 130px;
    border-top-right-radius: 70%;
}

.mouth4 {
    width: 30px;
    height: 30px;
    background-color: var(--color-creme);
    position: absolute;
    top: 260px;
    left: 80px;
}

.collar {
    width: 110px;
    height: 60px;
    background-color: white;
    position: absolute;
    border: 1px solid black;
    top: 335px;
    left: 10px;
    border-radius: 10%;
    -webkit-border-radius: 10%;
    -moz-border-radius: 10%;
    -ms-border-radius: 10%;
    -o-border-radius: 10%;
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
}

.right-collar {
    width: 20px;
    left: 150px;
    top: 345px;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
}