
* {
    box-sizing: border-box;
}

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

.container {
    width: 145px;
    height: 200px;
    background-color: white;
    position: relative;
}

.comb {
    width:37px;
    height:37px;
    background: linear-gradient(90deg, #C02E2E 80%, red 80%);
    position: absolute;
    top: 30px;
    left: 54px;
    transform: rotate(179deg);
}

.comb::before {
    content: "";
    width:37px;
    height: 37px;
    background:linear-gradient(90deg, #C02E2E 30%, #DD4A4A 32%);
    position: absolute;
    top: 50%;
    left: 0px;
    border-radius: 50%;
}

.comb::after {
    content: "";
    width: 37px;
    height:37px;
    background-color:#DD4A4A ;
    position: absolute;
    top: 0px;
    left: 50%;
    border-radius: 50%;
}

.top-left {
    width: 58px;
    height: 61px;
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 36px;
}

.top-right {
    width: 72px;
    height: 61px;
    background: linear-gradient(90deg, #FFEDBC 30%, #FFE08F 30%);
    position: absolute;
    left: 58px;
    top: 36px;
    border-radius: 80% 80% 0 0;
}

.bottom-left {
    width: 65px;
    height: 73px;
    background-color: #FFEDBC;
    position: absolute;
    left: 0;
    bottom: 30px;
    border-radius: 0 0 0 85%;
    z-index: 1;
}

.bottom-right {
    width: 65px;
    height: 73px;
    background: linear-gradient(90deg, #FFEDBC 23%, #FFE08F 20%);;
    position: absolute;
    left: 65px;
    bottom: 30px;
    border-radius: 0 0 85% 0;
    z-index: 1;
}

.legs {
    width: 13px;
    height: 40px;
    background-color: rgb(72, 164, 245);
    position: absolute;
    bottom: 0px;
    left: 47px;
    z-index: 0;
}

.left-leg {
    width: 100%;
    height: 100%;
    background-color: #FF9A00;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.right-leg {
    width: 100%;
    height: 100%;
    background-color: #FF9A00;
    position: absolute;
    right: 0px;
    left: 23px;
}

.beak {
    width: 15px;
    height: 12px;
    background-color: #FF9A00;
    position: absolute;
    bottom: 125px;
    right: 0px;
}

.eye {
    width: 11px;
    height: 11px;
    background-color: #23465E;
    border: 1px solid #365361;
    position:absolute;
    top: 28px;
    right: 20px;
    animation-name: blink;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes blink{
    0% {
       transform: scale(1, 0.05);
    }

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

.tail {
    width: 58px;
    height: 35px;
    background-color: #FFC969;
    position: absolute;
    top: 0px;
    border-radius: 5% 5% 35px 35px;
}  