/*Colors*/
:root {
    --skin: #f6c09c;
    --background: #ed4042;
    --red: #ed2860;
    --dark-red: #680524;
    --black: #00243a;
    --white: #fff;

    --index-primary: 100;
    --head-width: 140px;
    --head-height: 240px;
    --eye-size: 35px;
    --ear-size: 26px;
    --nose-size: 40px;
}

* {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
    background: var(--background);
}
.container h2 {
    color: var(--white);
    margin: 25px 0;
}

.head {
    width: var(--head-width);
    height: var(--head-height);
    background: var(--skin);
    border-radius: 50px;
    position: relative;
}

.eye-left,
.eye-right{
    z-index: var(--index-primary);
    width: var(--eye-size);
    height: var(--eye-size);
    background: var(--white);
    position: absolute;
    border-radius: 50%;
    top: calc( (var(--head-height)/4.5));
}
.eye-left {
    left: 50%;
    transform: translate(-94%, 0);
}

.eye-right {
    left: 50%;
    transform: translate(-6%, 0);
}

.eye-left::before,
.eye-right::before{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    background: var(--black);
    border-radius: 50%;
    left: calc(var(--eye-size) / 2.5);
    top: calc(var(--eye-size)/3 + 2px);
}

.eye-left::after,
.eye-right::after{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    background: var(--skin);
    width: 100%;
}

.nose {
    width: var(--nose-size);
    height: var(--nose-size);
    background: var(--skin);
    border-radius: 50%;
    box-shadow: 0 0 2px #ccc;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(var(--head-height)/3 + 6px);
    z-index: var(--index-primary);
}

.ear-left,
.ear-right{
    width: var(--ear-size);
    height: var(--ear-size);
    background: #ed927d;
    position: absolute;
    top: calc(var(--head-height)/5);
    border-radius: 50%;
}

.ear-left {
    left: -14px;
}


.ear-right {
    right: -14px;
}

.ear-left::before,
.ear-right::before{
    content: "";
    width: calc(var(--ear-size)/2);
    height: 26px;
    background: var(--skin);
    position: absolute;
}
.ear-left::before{
    right: -1px;
}

.ear-right::before{
    left: -1px;
}

.mouth{
    background: var(--dark-red);
    width: 60px;
    height: 40px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(var(--head-height)/2 + 5px);
    z-index: var(--index-primary);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
}

.teeths{
    position: absolute;
    width: 50px;
    background: white;
    height: 10px;
    border-bottom-right-radius: 20px;
}

.tongue{
    position: absolute;
    bottom: 0;
    width: 50px;
    background: var(--red);
    height: 14px;
    border-bottom-right-radius: 20px;
   
}

.beard{
    background: var(--black);
    width: 100%;
    --sizeOne: calc(var(--head-height) / 2);
    height: calc(var(--sizeOne) + 18px);
    position: absolute;
    bottom: 0;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}