<div class="container">

    <div class="m_body"></div>

    <div class="ear_l"></div>

    <div class="ear_r"></div>

    <div class="arm_l"></div>

    <div class="arm_r"></div>

    <div class="face f_green"></div>

    <div class="face f_yelow"></div>

    <div class="face f_blue"></div>

    <div class="face f_purple"></div>

    <div class="face f_shy_blue"></div>

    <div class="eye_l"></div>

    <div class="eye_r"></div>

    <div class="nose"></div>

    <div class="mouth"></div>

    <div class="logo">

        <img src="./img/logo_d.png" alt="">

    </div>

    <div class="leg_l"></div>

    <div class="leg_r"></div>

</div>

    body {background: rgb(177, 251, 251);}

    .container {margin: auto;width: 500px;height: 500px;position: relative;text-align: center;}

    .m_body {width: 300px;height: 350px;border: #333 8px solid;margin: 50px auto;

        border-radius: 90% 90% 60% 65% / 85% 85% 98% 90%;background: #fff;position: absolute;z-index: 2;}

    .ear_l,.ear_r {background: #393939;width: 80px;height: 100px;border-radius: 50%;

        position: absolute;z-index: 1;}

    .ear_l {left: 30px;top: 50px; }

    .ear_r {left: 210px;top: 50px;}

    .arm_l,.arm_r {background: #333;position: absolute;z-index: 1;}

    .arm_l {width: 70px;height: 120px;left: -50px;top: 240px;transform: rotate(45deg);border-radius: 35% 60% 90% 90%/ 55% 85% 90% 60%;}

    .arm_r {width: 70px;height: 150px;left: 300px;top: 162px;transform: rotate(37deg);

        border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;}

    .arm_r:before,.arm_r:after {content: "";width: 18px;height: 26px;background: #bc242c;

        position: absolute;border-top-left-radius: 50%;border-top-right-radius: 50%;}

    .arm_r:before {transform: rotate(45deg);left: 26px;top: 20px;}

    .arm_r:after {transform: rotate(-45deg);left: 19px;top: 20px;}

    .face {position: absolute;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 50%;position: absolute;z-index: 3;}

    .f_green {border: #96c882 5px solid;width: 230px;height: 180px;left: 38px;top: 90px;}

    .f_yelow {border: #EAC65B 5px solid;width: 220px;height: 172px;left: 43px;top: 94px;}

    .f_blue {border: #0489be 5px solid;width: 210px;height: 164px;left: 48px;top: 98px;}

    .f_purple {border: #AF2350 4px solid;width: 203px;height: 157px;left: 52px;

        top: 103px;}

    .f_shy_blue {border: #6BCDF3 4px solid;width: 195px;height: 149px;left: 56px;top: 107px;}

    .eye_l,.eye_r {background: #333;width: 60px;height: 80px;border-radius: 50%;position: absolute;z-index: 4;}

    .eye_l:before,.eye_r:before {position: absolute;content: '';

        width: 24px;height: 24px; border-radius: 50%;border: 4px solid #fff;z-index: 5;

    }

    .eye_l:after,.eye_r:after {position: absolute;content: '';

        width: 8px;height: 8px;background: #9B9B9B;border-radius: 50%;z-index: 6;

    }

    .eye_l:after {right: 25px;top: 25px;}

    .eye_r:after {left: 26px; top: 26px;}

    .eye_l:before {left: 20px;top: 12px; }

    .eye_r:before {left: 10px;top: 12px; }

    .eye_l { left: 80px; top: 130px; transform: rotate(45deg); }

    .eye_r {left: 175px;top: 130px;transform: rotate(-45deg);}

    .nose {background: #333;position: absolute;left: 145px;top: 180px;z-index: 6;}

    .nose, .nose:before,.nose:after {width: 25px;height: 16px;

    border-radius: 45px 42px 60px 61px/ 30px 30px 50px 46px; }

    .mouth { width: 60px;height: 50px;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 50%;

        background: #333;left: 128px;top: 200px;position: absolute;z-index: 7;}

    .mouth::before {content: '';width: 50px;height: 16px;left: 5px;top: -1px;

    position: absolute;background: #fff;z-index: 8;border-radius: 50%; }

    .mouth:after { content: '';width: 45px;height: 24px;

    border-radius: 30% 30% 60% 60%/ 50% 54% 80% 90%; background: #B3272A;

    position: absolute;z-index: 9;top: 23px;left: 8px;}

    .logo {position: absolute; z-index: 10;top: 290px;left: 110px;}

    .logo img {width: 100px; }

    .leg_l,.leg_r {background: #333;position: absolute;width: 70px;

        height: 90px;border-radius: 0 0 30px 30px;z-index: 1;}

    .leg_l {left: 60px;top: 390px;}

    .leg_r {left: 190px;top: 390px;}

    .leg_l:after,

    .leg_r:after { content: "";width: 43px; height: 30px;

        position: absolute;background: #363636;border-radius: 30px;

    }

    .leg_l:after {bottom: 0;right: -3px;}

    .leg_r:after {bottom: 0;left: -3px;}