Симба на чистом CSS

В продолжении темы котиков, предлагаю Вам еще один сниппет котика для украшения вашего портала или блога. На сей раз это Симба. Маленький Симба выполненый при помощи HTML и  CSS. Код предоставлен ниже.

HTML

<div class="simba">
  <div class="part element1 head-part-1"></div>
  <div class="part element2 head-part-2"></div>
  <div class="part element20 head-part-3"></div>
  <div class="part element21 head-part-4"></div>
  <div class="part element22 head-part-5"></div>
  <div class="part element30 head-part-6"></div>
  <div class="part element97 head-part-7"></div>
  <div class="part element98 head-part-8"></div>
  <div class="part element99 head-part-9"></div>

  <div class="part element23 muzzle-part-1"></div>
  <div class="part element24 muzzle-part-2"></div>
  <div class="part element25 muzzle-part-3"></div>
  <div class="part element37 muzzle-part-4"></div>
  <div class="part element38 muzzle-part-5"></div>
  <div class="part element39 muzzle-part-6"></div>
  <div class="part element40 muzzle-part-7"></div>
  <div class="part element41 muzzle-part-8"></div>
  <div class="part element42 muzzle-part-9"></div>
  <div class="part element43 muzzle-part-10"></div>
  <div class="part element44 muzzle-part-11"></div>
  <div class="part element45 muzzle-part-12"></div>
  <div class="part element46 muzzle-part-13"></div>
  <div class="part element47 muzzle-part-14"></div>
  <div class="part element48 muzzle-part-15"></div>
  <div class="part element49 muzzle-part-16"></div>
  <div class="part element50 muzzle-part-17"></div>

  <div class="part element26 nose-part-1"></div>
  <div class="part element27 nose-part-2"></div>
  <div class="part element28 nose-part-3"></div>
  <div class="part element29 nose-part-4"></div>
  <div class="part element31 nose-part-5"></div>
  <div class="part element32 nose-part-6"></div>
  <div class="part element33 nose-part-7"></div>
  <div class="part element34 nose-part-8"></div>
  <div class="part element35 nose-part-9"></div>
  <div class="part element36 nose-part-10"></div>
  <div class="part element57 nose-part-11"></div>
  <div class="part element58 nose-part-12"></div>
  <div class="part element81 nose-part-13"></div>
  <div class="part element82 nose-part-14"></div>

  <div class="part element51 left-eye-part-1"></div>
  <div class="part element52 left-eye-part-2"></div>
  <div class="part element53 left-eye-part-3"></div>
  <div class="part element54 left-eye-part-4"></div>
  <div class="part element55 left-eye-part-5"></div>
  <div class="part element56 left-eye-part-6"></div> 
  <div class="part element59 left-eye-part-7"></div>

  <div class="part element60 right-eye-part-1"></div>
  <div class="part element61 right-eye-part-2"></div>
  <div class="part element62 right-eye-part-3"></div>
  <div class="part element63 right-eye-part-4"></div>
  <div class="part element64 right-eye-part-5"></div>
  <div class="part element66 right-eye-part-6"></div>
  <div class="part element67 right-eye-part-7"></div>
  <div class="part element68 right-eye-part-8"></div>
  <div class="part element100 right-eye-part-9"></div>

  <div class="part element4 left-ear-part-1"></div>
  <div class="part element7 left-ear-part-2"></div>
  <div class="part element8 left-ear-part-3"></div>
  <div class="part element9 left-ear-part-4"></div>
  <div class="part element10 left-ear-part-5"></div>
  <div class="part element12 left-ear-part-6"></div>
  <div class="part element13 left-ear-part-7"></div>
  <div class="part element14 left-ear-part-8"></div>
  <div class="part element15 left-ear-part-9"></div>
  <div class="part element17 left-ear-part-10"></div>
  <div class="part element105 left-ear-part-11"></div>
  <div class="part element106 left-ear-part-12"></div>
  <div class="part element107 left-ear-part-13"></div>

  <div class="part element83 right-ear-part-1"></div>
  <div class="part element84 right-ear-part-2"></div>
  <div class="part element85 right-ear-part-3"></div>
  <div class="part element86 right-ear-part-4"></div>
  <div class="part element87 right-ear-part-5"></div>
  <div class="part element88 right-ear-part-6"></div>
  <div class="part element89 right-ear-part-7"></div>
  <div class="part element90 right-ear-part-8"></div>
  <div class="part element91 right-ear-part-9"></div>
  <div class="part element93 right-ear-part-10"></div>
  <div class="part element94 right-ear-part-11"></div>
  <div class="part element95 right-ear-part-12"></div>
  <div class="part element96 right-ear-part-13"></div>
  <div class="part element108 right-ear-part-14"></div>
  <div class="part element109 right-ear-part-15"></div>
  <div class="part element110 right-ear-part-16"></div>

  <div class="part element111 moustache-part-1"></div>
  <div class="part element112 moustache-part-2"></div>
  <div class="part element113 moustache-part-3"></div>
  <div class="part element114 moustache-part-4"></div>
  <div class="part element115 moustache-part-5"></div>
  <div class="part element116 moustache-part-6"></div>
  <div class="part element117 moustache-part-7"></div>
  <div class="part element118 moustache-part-8"></div>


  <div class="part element69 hairdo-part-1"></div>
  <div class="part element70 hairdo-part-2"></div>
  <div class="part element71 hairdo-part-3"></div>
  <div class="part element72 hairdo-part-4"></div>
  <div class="part element73 hairdo-part-5"></div>
  <div class="part element74 hairdo-part-6"></div>
  <div class="part element75 hairdo-part-7"></div>
  <div class="part element76 hairdo-part-8"></div>
  <div class="part element78 hairdo-part-9"></div>
  <div class="part element79 hairdo-part-10"></div>
  <div class="part element80 hairdo-part-11"></div>
  <div class="part element101 hairdo-part-12"></div>
  <div class="part element102 hairdo-part-13"></div>
  <div class="part element103 hairdo-part-14"></div>
  <div class="part element104 hairdo-part-15"></div>

  <div class="bg-part head-bg-1"></div>
  <div class="bg-part head-bg-2"></div>
  <div class="bg-part head-bg-3"></div>
  <div class="bg-part head-bg-4"></div>
  <div class="bg-part head-bg-5"></div>
  <div class="bg-part head-bg-6"></div>
  <div class="bg-part head-bg-7"></div>
  <div class="bg-part head-bg-8"></div>
  <div class="bg-part head-bg-9"></div>
  <div class="bg-part head-bg-10"></div>
  <div class="bg-part head-bg-11"></div>
  <div class="bg-part head-bg-12"></div>
  <div class="bg-part head-bg-13"></div>
  <div class="bg-part head-bg-14"></div>
 
  <div class="bg-part left-ear-bg-1"></div>
  <div class="bg-part left-ear-bg-2"></div>
  <div class="bg-part left-ear-bg-3"></div>
  <div class="bg-part left-ear-bg-4"></div>
  <div class="bg-part left-ear-bg-5"></div>
  <div class="bg-part left-ear-bg-6"></div>
  <div class="bg-part left-ear-bg-7"></div>
  <div class="bg-part left-ear-bg-8"></div>

  <div class="bg-part left-eye-bg-1"></div>
  <div class="bg-part left-eye-bg-2"></div>
  <div class="bg-part left-eye-bg-3"></div>  

  <div class="bg-part nose-bg-1"></div>
  <div class="bg-part nose-bg-2"></div>
  <div class="bg-part nose-bg-3"></div>
  <div class="bg-part nose-bg-4"></div>
  <div class="bg-part nose-bg-5"></div>

  <div class="bg-part muzzle-bg-1"></div>
  <div class="bg-part muzzle-bg-2"></div>
  <div class="bg-part muzzle-bg-3"></div>
  <div class="bg-part muzzle-bg-4"></div>
  <div class="bg-part muzzle-bg-5"></div>
  <div class="bg-part muzzle-bg-6"></div>

  <div class="bg-part right-eye-bg-1"></div>
  <div class="bg-part right-eye-bg-2"></div>
  <div class="bg-part right-eye-bg-3"></div>
  <div class="bg-part right-eye-bg-4"></div>
  <div class="bg-part right-eye-bg-5"></div>

  <div class="bg-part right-ear-bg-1"></div>
  <div class="bg-part right-ear-bg-2"></div>
  <div class="bg-part right-ear-bg-3"></div>
  <div class="bg-part right-ear-bg-4"></div>
  <div class="bg-part right-ear-bg-5"></div>
  <div class="bg-part right-ear-bg-6"></div>
  <div class="bg-part right-ear-bg-7"></div>
  <div class="bg-part right-ear-bg-8"></div>
  <div class="bg-part right-ear-bg-9"></div>
  <div class="bg-part right-ear-bg-10"></div>
  <div class="bg-part right-ear-bg-11"></div>
  <div class="bg-part right-ear-bg-12"></div>
  <div class="bg-part right-ear-bg-13"></div>
</div>

CSS

body{
  height: 100dvh;
  margin: 0;
  background-color: #ecbd46;
  display: flex;
  align-items: center;
}

/*
* simba
*/

.simba{
  width: 300px;
  height: 300px;
  position: relative;
  margin-inline: auto;
  padding-bottom: 50px;
}

@media (min-width: 641px){

  .simba{
    transform: scale(1.5);    
  }
}

.part{
  position: absolute;
  z-index: 100;
  border: 2px solid transparent;
} 

.head-part-1{
  width: 54px;
  height: 25px;
  top: 122px;
  left: 58px;
  border-radius: 23px 3px 0 0 / 23px 5px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-51deg);
}

.head-part-2{
  width: 45px;
  height: 24px;
  top: 155px;
  left: 31px;
  border-radius: 2px 2px 0 0 / 2px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-270deg);
}

.head-part-3{
  width: 16px;
  height: 25px;
  top: 197px;
  left: 69px;
  border-radius: 2px 3px 0 0 / 2px 4px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-103deg);
}

.head-part-4{
  width: 12px;
  height: 24px;
  top: 204px;
  left: 73px;
  border-radius: 2px 2px 0 0 / 2px 12px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-130deg);
}

.head-part-5{
  width: 36px;
  height: 25px;
  top: 218px;
  left: 75px;
  border-radius: 2px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-133deg);
}

.head-part-6{
  width: 17px;
  height: 23px;
  top: 189px;
  left: 68px;
  border-radius: 2px 0 0 0 / 3px 0 0 0;
  border-top-color: #0c1115;
  transform: rotate(-76deg);
}

.head-part-7{
  width: 26px;
  height: 10px;
  top: 185px;
  left: 204px;
  border-radius: 100% 100% 0 0;
  border-top-color: #0c1115;
  transform: rotate(88deg);
}

.head-part-8{
  width: 27px;
  height: 10px;
  top: 205px;
  left: 200px;
  border-radius: 100% 100% 0 0 / 10px 16px 0 0;
  border-top-color: #0c1115;
  transform: rotate(110deg);
}  

.head-part-9{
  width: 73px;
  height: 31px;
  top: 241px;
  left: 161px;
  border-radius: 21px 0 0 0 / 20px 0 0 0;
  border-top-color: #0c1115;
  transform: rotate(-41deg);
} 

.muzzle-part-1{
  width: 28px;
  height: 25px;
  top: 237px;
  left: 69px;
  border-radius: 15px 0 0 0;
  border-top-color: #0c1115;
  transform: rotate(88deg);
}

.muzzle-part-2{
  width: 28px;
  height: 25px;
  top: 210px;
  left: 83px;
  border-radius: 2px 12px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-124deg);
}

.muzzle-part-3{
  width: 11px;
  height: 25px;
  top: 202px;
  left: 90px;
  border-radius: 0px 10px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-85deg);
}

.muzzle-part-4{
  width: 13px;
  height: 25px;
  top: 215px;
  left: 117px;
  border-radius: 4px 4px 0 0 / 7px 10px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-107deg);
}

.muzzle-part-5{
  width: 24px;
  height: 25px;
  top: 217px;
  left: 87px;
  border-radius: 9px 13px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-201deg);
}

.muzzle-part-6{
  width: 28px;
  height: 25px;
  top: 213px;
  left: 114px;
  border-radius: 2px 1px 0 0 / 2px 4px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-173deg);
}

.muzzle-part-7{
  width: 25px;
  height: 25px;
  top: 213px;
  left: 138px;
  border-radius: 19px 2px 0 0 / 21px 8px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-189deg);
}

.muzzle-part-8{
  width: 22px;
  height: 25px;
  top: 204px;
  left: 141px;
  border-radius: 5px 4px 0 0 / 6px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-247deg);
}

.muzzle-part-9{
  width: 21px;
  height: 25px;
  top: 194px;
  left: 132px;
  border-radius: 5px 1px 0 0 / 7px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(45deg);
}

.muzzle-part-10{
  width: 15px;
  height: 24px;
  top: 187px;
  left: 165px;
  border-radius: 4px 2px 0 0 / 1px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(220deg);
}

.muzzle-part-11{
  width: 15px;
  height: 23px;
  top: 207px;
  left: 154px;
  border-radius: 19px 3px 0 0 / 17px 6px 0 0;
  border-top-color: #0c1115;
  transform: rotate(77deg);
}

.muzzle-part-12{
  width: 31px;
  height: 25px;
  top: 221px;
  left: 143px;
  border-radius: 2px 2px 0 0 / 5px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(105deg);
}

.muzzle-part-13{
  width: 21px;
  height: 25px;
  top: 250px;
  left: 168px;
  border-radius: 12px 2px 0 0 / 11px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(284deg);
}

.muzzle-part-14{
  width: 24px;
  height: 25px;
  top: 246px;
  left: 140px;
  border-radius: 12px 2px 0 0 / 13px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(145deg);
}

.muzzle-part-15{
  width: 48px;
  height: 25px;
  top: 256px;
  left: 106px;
  border-radius: 46% 43% 0 0 / 46% 42% 0 0;
  border-top-color: #0c1115;
  transform: rotate(176deg);
}

.muzzle-part-16{
  width: 13px;
  height: 25px;
  top: 252px;
  left: 105px;
  border-radius: 2px 4px 0 0 / 2px 3px 0 0;
  border-top-color: #0c1115;
  transform: rotate(206deg);
}

.muzzle-part-17{
  width: 13px;
  height: 24px;
  top: 252px;
  left: 104px;
  border-radius: 3px 3px 0 0 / 5px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(249deg);
}

.nose-part-1{
  width: 42px;
  height: 24px;
  top: 197px;
  left: 80px;
  border-radius: 100% 100% 0 0;
  border-top-color: #0c1115;
  transform: rotate(-143deg);
}

.nose-part-2{
  width: 48px;
  height: 25px;
  top: 197px;
  left: 97px;
  border-radius: 100% 100% 0 0;
  border-top-color: #0c1115;
  transform: rotate(154deg);
}

.nose-part-3{
  width: 17px;
  height: 20px;
  top: 189px;
  left: 124px;
  border-radius: 1px 3px 0 0 / 8px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(96deg);
}

.nose-part-4{
  width: 11px;
  height: 25px;
  top: 197px;
  left: 124px;
  border-radius: 24px 4px 0 0 / 28px 16px 0 0;
  border-top-color: #0c1115;
  transform: rotate(47deg);
}

.nose-part-5{
  width: 26px;
  height: 25px;
  top: 204px;
  left: 115px;
  border-radius: 0 4px 0 0 / 0 4px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-15deg);
}

.nose-part-6{
  width: 30px;
  height: 24px;
  top: 182px;
  left: 94px;
  border-radius: 12px 16px 0 0 / 3px 8px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-190deg);
}

.nose-part-7{
  width: 21px;
  height: 25px;
  top: 204px;
  left: 76px;
  border-radius: 13px 1px 0 0 / 20px 18px 0 0;
  border-top-color: #0c1115;
  transform: rotate(17deg);
}

.nose-part-8{
  width: 16px;
  height: 25px;
  top: 216px;
  left: 82px;
  border-radius: 50% 50% 0 0;
  border-top-color: #0c1115;
  transform: rotate(34deg);
}

.nose-part-9{
  width: 13px;
  height: 25px;
  top: 196px;
  left: 111px;
  border-radius: 2px 3px 0 0 / 2px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(133deg);
}

.nose-part-10{
  width: 10px;
  height: 25px;
  top: 212px;
  left: 132px;
  border-radius: 7px 5px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-12deg);
}

.nose-part-11{
  width: 27px;
  height: 22px;
  top: 176px;
  left: 66px;
  border-radius: 4px 2px 0 0 / 12px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(121deg);
}

.nose-part-12{
  width: 11px;
  height: 25px;
  top: 196px;
  left: 90px;
  border-radius: 4px 2px 0 0 / 10px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-58deg);
}

.nose-part-13{
  width: 29px;
  height: 11px;
  top: 84px;
  left: 146px;
  border-radius: 100% 100% 0 0;
  border-top-color: #0c1115;
  transform: rotate(40deg);
} 

.nose-part-14{
  width: 45px;
  height: 9px;
  top: 102px;
  left: 166px;
  border-radius: 100% 100% 0 0;
  border-top-color: #0c1115;
  transform: rotate(29deg);
} 

.left-eye-part-1{
  width: 30px;
  height: 25px;
  top: 168px;
  left: 66px;
  border-radius: 50% 50% 0 0 / 10px 10px 0 0;
  border-top-color: #0c1115;
  transform: rotate(200deg);
}

.left-eye-part-2{
  width: 11px;
  height: 13px;
  top: 176px;
  left: 82px;
  border-radius: 50%;
  border-color: #000;
  transform: rotate(172deg);
  background-color: #000;
}

.left-eye-part-2:after{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  top: 7px;
  left: 6px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  z-index: 2;
}

.left-eye-part-3{
  width: 20px;
  height: 12px;
  top: 174px;
  left: 75px;
  border-radius: 50% 50% 4px / 50% 50% 6px;
  border-top-color: #0c1115;
  border-right-color: #0c1115;
  transform: rotate(-77deg);
}

.left-eye-part-4{
  width: 18px;
  height: 30px;
  top: 157px;
  left: 74px;
  border-radius: 50% 50% 13px 8px / 50% 50% 13px 4px;
  border-top-color: #0c1115;
  border-left-color: #0c1115;
  transform: rotate(4deg);
}

.left-eye-part-5{
  width: 24px;
  height: 47px;
  top: 139px;
  left: 66px;
  border-radius: 46% 44% 2px / 46% 44% 5px;
  border-top-color: #0c1115;
  border-right-color: #0c1115;
  transform: rotate(-12deg);
}

.left-eye-part-6{
  width: 31px;
  height: 25px;
  top: 163px;
  left: 68px;
  border-radius: 15px 15px 0 0 / 9px 6px 0 0;
  border-top-color: #0c1115;
  transform: rotate(202deg);
}

.left-eye-part-7{
  width: 17px;
  height: 30px;
  top: 138px;
  left: 70px;
  border-radius: 30% 50% 0 / 18% 50% 0;
  border-top-color: #0c1115;
  border-right-color: #0c1115;
  transform: rotate(-16deg);
}

.right-eye-part-1{
  width: 51px;
  height: 54px;
  top: 126px;
  left: 142px;
  border-radius: 129% 36% 30% 6px / 176% 51% 45% 9px;
  border-color: #0c1115;
  border-bottom-color: transparent;
  transform: rotate(-15deg);
}

.right-eye-part-2{
  width: 38px;
  height: 35px;
  top: 159px;
  left: 155px;
  border-radius: 95% 9% 28% 4px;
  border-left-color: #0c1115;
  border-top-color: #0c1115;
  transform: rotate(-158deg);
}

.right-eye-part-3{
  width: 31px;
  height: 35px;
  top: 148px;
  left: 154px;
  border-radius: 100% 70% 51% 52%;
  border-color: #0c1115;
  transform: rotate(-7deg);
}

.right-eye-part-4{
  width: 15px;
  height: 15px;
  top: 168px;
  left: 163px;
  border-radius: 50%;
  border-color: #000;
  transform: rotate(172deg);
  background-color: #000;
}

.right-eye-part-4:after{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  z-index: 2;
}

.right-eye-part-5{
  width: 23px;
  height: 21px;
  top: 162px;
  left: 159px;
  border-radius: 50% 50% 8px 4px / 50% 50% 2px 12px;
  border-color: #0c1115;
  border-bottom-color: transparent;
  transform: rotate(-12deg);
}

.right-eye-part-6{
  width: 11px;
  height: 27px;
  top: 151px;
  left: 178px;
  border-radius: 2px 1px 0 0 / 1px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(153deg);
}

.right-eye-part-7{
  width: 8px;
  height: 24px;
  top: 161px;
  left: 141px;
  border-radius: 1px 4px 0 0 / 2px 5px 0 0;
  border-top-color: #0c1115;
  transform: rotate(144deg);
}

.right-eye-part-8{
  width: 8px;
  height: 25px;
  top: 162px;
  left: 144px;
  border-radius: 2px 3px 0 0 / 4px 5px 0 0;
  border-top-color: #0c1115;
  transform: rotate(145deg);
}

.right-eye-part-9{
  width: 51px;
  height: 54px;
  top: 124px;
  left: 143px;
  border-radius: 140% 49% 32% 0 / 140% 90% 32% 0;
  border-color: #0c1115;
  border-bottom-color: transparent;
  transform: rotate(-13deg);
} 

.left-ear-part-1{
  width: 35px;
  height: 25px;
  top: 169px;
  left: 34px;
  border-radius: 1px 19px 0 0 / 1px 25px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-158deg);
}

.left-ear-part-2{
  width: 27px;
  height: 22px;
  top: 121px;
  left: 23px;
  border-radius: 13px 10px 0 0 / 6px 5px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-67deg);
}

.left-ear-part-3{
  width: 14px;
  height: 13px;
  top: 112px;
  left: 33px;
  border-radius: 2px 13px 0 0 / 2px 10px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-50deg);
}

.left-ear-part-4{
  width: 18px;
  height: 10px;
  top: 111px;
  left: 40px;
  border-radius: 2px 15px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-10deg);
}

.left-ear-part-5{
  width: 24px;
  height: 25px;
  top: 95px;
  left: 60px;
  border-radius: 2px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(211deg);
}

.left-ear-part-6{
  width: 20px;
  height: 25px;
  top: 126px;
  left: 49px;
  border-radius: 3px 16px 0 0 / 6px 21px 0 0;
  border-top-color: #0c1115;
  transform: rotate(190deg);
}

.left-ear-part-7{
  width: 27px;
  height: 25px;
  top: 131px;
  left: 20px;
  border-radius: 7px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(53deg);
}

.left-ear-part-8{
  width: 18px;
  height: 16px;
  top: 127px;
  left: 25px;
  border-radius: 105px 155px 0 0 / 118px 142px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-38deg);
}

.left-ear-part-9{
  width: 25px;
  height: 20px;
  top: 129px;
  left: 33px;
  border-radius: 2px 22px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-91deg);
}

.left-ear-part-10{
  width: 36px;
  height: 12px;
  top: 157px;
  left: 29px;
  border-radius: 7px 2px 0 0 / 6px 4px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-110deg);
}

.left-ear-part-11{
  width: 15px;
  height: 13px;
  top: 164px;
  left: 53px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-13deg);
}

.left-ear-part-12{
  width: 13px;
  height: 13px;
  top: 154px;
  left: 48px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-17deg);
}

.left-ear-part-13{
  width: 6px;
  height: 13px;
  top: 146px;
  left: 45px;
  border-radius: 10px 1px 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-5deg);
}

.right-ear-part-1{
  width: 50px;
  height: 32px;
  top: 101px;
  left: 213px;
  border-radius: 0 13px 0 0 / 0 12px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-28deg);
}

.right-ear-part-2{
  width: 54px;
  height: 29px;
  top: 107px;
  left: 234px;
  border-radius: 85% 3px 0 0 / 86% 3px 0 0;
  border-top-color: #0c1115;
  transform: rotate(90deg);
}

.right-ear-part-3{
  width: 56px;
  height: 21px;
  top: 154px;
  left: 231px;
  border-radius: 100% 100% 0 0;
  border-top-color: #0c1115;
  transform: rotate(120deg);
}  

.right-ear-part-4{
  width: 37px;
  height: 25px;
  top: 171px;
  left: 213px;
  border-radius: 6px 24px 0 0 / 1px 24px 0 0;
  border-top-color: #0c1115;
  transform: rotate(156deg);
} 

.right-ear-part-5{
  width: 26px;
  height: 25px;
  top: 93px;
  left: 237px;
  border-radius: 20px 7px 0 0 / 20px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(48deg);
} 

.right-ear-part-6{
  width: 33px;
  height: 25px;
  top: 156px;
  left: 219px;
  border-radius: 33px 23px 0 0 / 31px 30px 0 0;
  border-top-color: #0c1115;
  transform: rotate(203deg);
} 

.right-ear-part-7{
  width: 53px;
  height: 25px;
  top: 147px;
  left: 220px;
  border-radius: 21px 23px 0 0 / 23px 24px 0 0;
  border-top-color: #0c1115;
  transform: rotate(123deg);
}

.right-ear-part-8{
  width: 32px;
  height: 11px;
  top: 127px;
  left: 240px;
  border-radius: 100% 0 0 0 / 15px 0 0 0;
  border-top-color: #0c1115;
  transform: rotate(83deg);
}  

.right-ear-part-9{
  width: 15px;
  height: 10px;
  top: 115px;
  left: 239px;
  border-radius: 8px 3px 0 0 / 10px 1px 0 0;
  border-top-color: #0c1115;
  transform: rotate(50deg);
} 

.right-ear-part-10{
  width: 33px;
  height: 52px;
  top: 107px;
  left: 240px;
  border-radius: 24px 12px 0 0 / 28px 18px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-5deg);
} 

.right-ear-part-11{
  width: 38px;
  height: 10px;
  top: 128px;
  left: 222px;
  border-radius: 4px 4px 0 0 / 4px 3px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-61deg);
} 

.right-ear-part-12{
  width: 25px;
  height: 10px;
  top: 144px;
  left: 203px;
  border-radius: 6px 0 0 0 / 3px 0 0 0;
  border-top-color: #0c1115;
  transform: rotate(139deg);
} 

.right-ear-part-13{
  width: 25px;
  height: 10px;
  top: 161px;
  left: 202px;
  border-radius: 1px 0 0 0;
  border-top-color: #0c1115;
  transform: rotate(90deg);
} 

.right-ear-part-14{
  width: 28px;
  height: 13px;
  top: 137px;
  left: 225px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-14deg);
}

.right-ear-part-15{
  width: 28px;
  height: 13px;
  top: 147px;
  left: 221px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(20deg);
}

.right-ear-part-16{
  width: 15px;
  height: 13px;
  top: 146px;
  left: 225px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(233deg);
}

.moustache-part-1{
  width: 37px;
  height: 13px;
  top: 199px;
  left: 148px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-27deg);
}

.moustache-part-2{
  width: 57px;
  height: 13px;
  top: 208px;
  left: 148px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-6deg);
}

.moustache-part-3{
  width: 43px;
  height: 13px;
  top: 221px;
  left: 150px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(14deg);
}

.moustache-part-4{
  width: 43px;
  height: 13px;
  top: 233px;
  left: 147px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(31deg);
}

.moustache-part-5{
  width: 33px;
  height: 13px;
  top: 225px;
  left: 50px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-5deg);
}

.moustache-part-6{
  width: 34px;
  height: 13px;
  top: 211px;
  left: 48px;
  border-radius: 100% 37% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(24deg);
}

.moustache-part-7{
  width: 36px;
  height: 13px;
  top: 238px;
  left: 55px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-22deg);
}

.moustache-part-8{
  width: 30px;
  height: 13px;
  top: 246px;
  left: 69px;
  border-radius: 81% 16% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-40deg);
}

.hairdo-part-1{
  width: 23px;
  height: 2px;
  top: 116px;
  left: 92px;
  border-radius: 100% 100% 0 0%;
  border-top-color: #0c1115;
  transform: rotate(-44deg);
}

.hairdo-part-2{
  width: 33px;
  height: 11px;
  top: 108px;
  left: 87px;
  border-radius: 100% 20px 0 0 / 100% 14px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-61deg);
} 

.hairdo-part-3{
  width: 33px;
  height: 11px;
  top: 102px;
  left: 87px;
  border-radius: 0 5px 0 0;
  border-top-color: #0c1115;
  transform: rotate(-23deg);
} 

.hairdo-part-4{
  width: 36px;
  height: 11px;
  top: 95px;
  left: 84px;
  border-radius: 50% 160% 100% 82%;
  border-top-color: #0c1115;
  transform: rotate(-41deg);
} 

.hairdo-part-5{
  width: 30px;
  height: 11px;
  top: 87px;
  left: 107px;
  border-radius: 50% 160% 100% 82%;
  border-top-color: #0c1115;
  transform: rotate(-14deg);
}

.hairdo-part-6{
  width: 36px;
  height: 11px;
  top: 81px;
  left: 111px;
  border-radius: 50% 160% 0 0;
  border-top-color: #0c1115;
  transform: rotate(-5deg);
}  

.hairdo-part-7{
  width: 18px;
  height: 11px;
  top: 85px;
  left: 111px;
  border-radius: 4% 32% 0 0;
  border-top-color: #0c1115;
  transform: rotate(7deg);
} 

.hairdo-part-8{
  width: 16px;
  height: 11px;
  top: 78px;
  left: 124px;
  border-radius: 4% 18% 0 0;
  border-top-color: #0c1115;
  transform: rotate(27deg);
}

.hairdo-part-9{
  width: 35px;
  height: 11px;
  top: 80px;
  left: 125px;
  border-radius: 2px 12px 0 0;
  border-top-color: #0c1115;
  transform: rotate(18deg);
} 

.hairdo-part-10{
  width: 7px;
  height: 11px;
  top: 73px;
  left: 138px;
  border-radius: 2px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(73deg);
} 

.hairdo-part-11{
  width: 10px;
  height: 14px;
  top: 75px;
  left: 141px;
  border-radius: 2px 2px 0 0;
  border-top-color: #0c1115;
  transform: rotate(39deg);
} 

.hairdo-part-12{
  width: 16px;
  height: 13px;
  top: 175px;
  left: 113px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(23deg);
}

.hairdo-part-13{
  width: 12px;
  height: 13px;
  top: 172px;
  left: 119px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(42deg);
}

.hairdo-part-14{
  width: 22px;
  height: 13px;
  top: 127px;
  left: 101px;
  border-radius: 100% 26% 0% 0;
  border-top-color: #0c1115;
  transform: rotate(-82deg);
}

.hairdo-part-15{
  width: 12px;
  height: 13px;
  top: 116px;
  left: 105px;
  border-radius: 20% 20% 0 0;
  border-top-color: #0c1115;
  transform: rotate(-66deg);
}

.bg-part{
  position: absolute;
}

.head-bg-1{
  width: 156px;
  height: 122px;
  top: 119px;
  left: 68px;
  border-radius: 30px 0 50px 29px;
  background-color: #eaae00;
}

.head-bg-2{
  width: 13px;
  height: 33px;
  top: 193px;
  left: 63px;
  transform: rotate(9deg);
  border-radius: 0 5px 1px 15px / 0 10px 1px 36px;
  background-color: #eaae00;
}

.head-bg-3{
  width: 10px;
  height: 28px;
  top: 229px;
  left: 88px;
  transform: rotate(-42deg);
  border-radius: 5px 0 31px 16px;
  background-color: #eaae00;
}

.head-bg-4{
  width: 103px;
  height: 42px;
  top: 198px;
  left: 135px;
  transform: rotate(-41deg);
  border-radius: 0 0 37px 0 / 0 0 45px 0;
  background-color: #eaae00;
}

.head-bg-5{
  width: 3px;
  height: 20px;
  top: 248px;
  left: 169px;
  transform: rotate(14deg);
  border-radius: 0 0 37px 0 / 0 0 58px 0;
  background-color: #eaae00;
}

.head-bg-6{
  width: 37px;
  height: 64px;
  top: 98px;
  left: 97px;
  transform: rotate(-54deg);
  background-color: #eaae00;
}

.head-bg-7{
  width: 15px;
  height: 3px;
  top: 103px;
  left: 86px;
  transform: rotate(-42deg);
  border-radius: 4px 2px 0 30px / 7px 2px 0 38px;
  background-color: #eaae00;
}

.head-bg-8{
  width: 44px;
  height: 38px;
  top: 82px;
  left: 135px;
  border-radius: 9px 22px 0 0 / 18px 36px 0 0;
  background-color: #eaae00;
}

.head-bg-9{
  width: 14px;
  height: 2px;
  top: 79px;
  left: 134px;
  transform: rotate(19deg);
  border-radius: 0 0 0 5px / 0 0 0 6px;
  background-color: #eaae00;
}

.head-bg-10{
  width: 23px;
  height: 12px;
  top: 83px;
  left: 128px;
  transform: rotate(8deg);
  border-radius: 17px 36px 111px 0;
  background-color: #eaae00;
}

.head-bg-11{
  width: 61px;
  height: 44px;
  top: 89px;
  left: 96px;
  border-radius: 21px 2px 0 0;
  transform: rotate(-6deg);
  background-color: #eaae00;
}

.head-bg-12{
  width: 21px;
  height: 4px;
  top: 82px;
  left: 115px;
  border-radius: 7px 0 0 0 / 2px 0 0 0;
  transform: rotate(3deg);
  background-color: #eaae00;
}

.head-bg-13{
  width: 21px;
  height: 5px;
  top: 81px;
  left: 146px;
  border-radius: 0 0 0 11px;
  transform: rotate(35deg);
  background-color: #eaae00;
}

.head-bg-14{
  width: 23px;
  height: 12px;
  top: 97px;
  left: 163px;
  transform: rotate(20deg);
  border-radius: 107px 36px 111px 0;
  background-color: #eaae00;
}

.left-ear-bg-1{
  width: 12px;
  height: 30px;
  top: 133px;
  left: 25px;
  border-radius: 37px 0 0px 21px / 25px 0 0 25px;
  transform: rotate(-10deg);
  background-color: #0c1115;
  z-index: 2;
}

.left-ear-bg-2{
  width: 13px;
  height: 16px;
  top: 127px;
  left: 27px;
  transform: rotate(30deg);
  border-radius: 32px 10px 2px 8px;
  background-color: #0c1115;
  z-index: 2;
}

.left-ear-bg-3{
  width: 11px;
  height: 38px;
  top: 154px;
  left: 33px;
  transform: rotate(-20deg);
  border-radius: 15px 20px 0px 24px / 15px 20px 0px 50px;
  background-color: #0c1115;
  z-index: 2;
}

.left-ear-bg-4{
  width: 13px;
  height: 29px;
  top: 176px;
  left: 47px;
  transform: rotate(-69deg);
  border-radius: 11px 5px 2px 0 / 14px 7px 6px 0;
  background-color: #0c1115;
  z-index: 2;
}

.left-ear-bg-5{
  width: 41px;
  height: 68px;
  top: 122px;
  left: 26px;
  transform: rotate(-2deg);
  border-radius: 30px 10px 0 60px;
  background-color: #c05f01;
}

.left-ear-bg-6{
  width: 51px;
  height: 24px;
  top: 120px;
  left: 32px;
  transform: rotate(53deg);
  border-radius: 27px 10px 18px 6px;
  background-color: #eaae00;
}

.left-ear-bg-7{
  width: 45px;
  height: 16px;
  top: 118px;
  left: 28px;
  transform: rotate(6deg);
  border-radius: 31px 29px 12px 0;
  background-color: #eaae00;
}

.left-ear-bg-8{
  width: 37px;
  height: 11px;
  top: 117px;
  left: 41px;
  transform: rotate(31deg);
  border-radius: 113px 36px 0 0;
  background-color: #eaae00;
}

.left-eye-bg-1{
  width: 19px;
  height: 37px;
  top: 158px;
  left: 75px;
  border-radius: 13px 8px 5px 7px / 15px 12px 7px 10px;
  background-color: #ffef68;
}

.left-eye-bg-2{
  width: 17px;
  height: 21px;
  top: 171px;
  left: 79px;
  transform: rotate(11deg);
  border-radius: 16px 10px 5px 13px / 21px 24px 4px 18px;  
  background-color: #d67c40;
}

.left-eye-bg-3{
  width: 15px;
  height: 5px;
  top: 186px;
  left: 66px;
  transform: rotate(31deg);
  border-radius: 0 0 5px 11px / 0 0 9px 9px;
  background-color: #ffef68;
}

.nose-bg-1{
  width: 33px;
  height: 9px;
  top: 208px;
  left: 85px;
  transform: rotate(14deg);
  border-radius: 23px 8px 0 50px / 26px 8px 3px 34px;
  z-index: 3;
  background-color: #fb9980;
}

.nose-bg-2{
  width: 38px;
  height: 13px;
  top: 205px;
  left: 106px;
  transform: rotate(-14deg);
  border-radius: 0 51px 67px 10px / 0 51px 48px 10px;
  z-index: 3;
  background-color: #fb9980;
}

.nose-bg-3{
  width: 42px;
  height: 15px;
  top: 211px;
  left: 87px;
  transform: rotate(14deg);
  border-radius: 0 0 31px 30px / 0 0 25px 18px;
  z-index: 3;
  background-color: #fb9980;
}

.nose-bg-4{
  width: 17px;
  height: 3px;
  top: 217px;
  left: 124px;
  transform: rotate(-38deg);
  border-radius: 22px 13px 6px 18px / 14px 18px 2px 10px;
  z-index: 3;
  background-color: #af4422;
}

.nose-bg-5{
  width: 10px;
  height: 3px;
  top: 219px;
  left: 93px;
  transform: rotate(30deg);
  border-radius: 5px;
  z-index: 3;
  background-color: #af4422;
}

.muzzle-bg-1{
  width: 72px;
  height: 42px;
  top: 224px;
  left: 97px;
  border-radius: 0 0 14px 4px / 0 0 10px 15px;
  background-color: #ffcf63;
}

.muzzle-bg-2{
  width: 68px;
  height: 21px;
  top: 262px;
  left: 98px;
  transform: rotate(-2deg);
  border-radius: 0 0 66px 43px / 0 0 33px 34px;
  background-color: #ffcf63;
}

.muzzle-bg-3{
  width: 69px;
  height: 20px;
  top: 229px;
  left: 71px;
  transform: rotate(51deg);
  border-radius: 0 0 10px 20px / 0 0 3px 20px;
  background-color: #ffcf63;
}

.muzzle-bg-4{
  width: 65px;
  height: 47px;
  top: 218px;
  left: 107px;
  transform: rotate(-34deg);
  border-radius: 0 0 17px 0;
  background-color: #ffcf63;
}

.muzzle-bg-5{
  width: 36px;
  height: 34px;
  top: 209px;
  left: 140px;
  transform: rotate(35deg);
  border-radius: 0 15px 3px 0;
  background-color: #ffcf63;
}

.muzzle-bg-6{
  width: 17px;
  height: 22px;
  top: 196px;
  left: 142px;
  transform: rotate(-53deg);
  border-radius: 23px 0 7px 0 / 27px 0 20px 0;
  background-color: #ffcf63;
}

.right-eye-bg-1{
  width: 32px;
  height: 38px;
  top: 149px;
  left: 155px;
  transform: rotate(-7deg);
  border-radius: 50% 50% 9px 7px / 24px 13px 9px 12px;
  background-color: #ffef68;
}

.right-eye-bg-2{
  width: 24px;
  height: 23px;
  top: 163px;
  left: 160px;
  transform: rotate(-14deg);
  border-radius: 50% 50% 0 4px;
  background-color: #d67c40;
}

.right-eye-bg-3{
  width: 22px;
  height: 4px;
  top: 183px;
  left: 174px;
  transform: rotate(-25deg);
  border-radius: 50% 0 34px 2px / 50% 0 12px 7px;
  background-color: #ffef68;
}

.right-eye-bg-4{
  width: 25px;
  height: 5px;
  top: 186px;
  left: 156px;
  transform: rotate(-2deg);
  border-radius: 5px 0 20px 10px / 50% 0 12px 8px;
  background-color: #ffef68;
}

.right-eye-bg-5{
  width: 8px;
  height: 3px;
  top: 184px;
  left: 152px;
  transform: rotate(-39deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-1{
  width: 46px;
  height: 70px;
  top: 116px;
  left: 222px;
  border-radius: 8px 0 15px 11px;
  background-color: #c05f01;
}

.right-ear-bg-2{
  width: 61px;
  height: 18px;
  top: 107px;
  left: 196px;
  border-radius: 8px 5px 12px 11px;
  transform: rotate(-28deg);
  background-color: #eaae00;
}

.right-ear-bg-3{
  width: 59px;
  height: 22px;
  top: 111px;
  left: 170px;
  border-radius: 9px 0 0 0;
  transform: rotate(35deg);
  background-color: #eaae00;
}

.right-ear-bg-4{
  width: 60px;
  height: 18px;
  top: 119px;
  left: 199px;
  border-radius: 0 14px 0 14px;
  transform: rotate(-60deg);
  background-color: #eaae00;
}

.right-ear-bg-5{
  width: 18px;
  height: 18px;
  top: 94px;
  left: 250px;
  border-radius: 20px 0 0 0 / 20px 0 0 0;
  transform: rotate(80deg);
  background-color: #eaae00;
}

.right-ear-bg-6{
  width: 18px;
  height: 23px;
  top: 109px;
  left: 257px;
  border-radius: 7px 7px 10px 10px / 7px 11px 10px 10px;
  transform: rotate(-19deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-7{
  width: 16px;
  height: 29px;
  top: 106px;
  left: 256px;
  border-radius: 0 8px 7px 10px;
  transform: rotate(-38deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-8{
  width: 11px;
  height: 31px;
  top: 144px;
  left: 264px;
  border-radius: 0 9px 2px 0 / 0 12px 4px 0;
  transform: rotate(21deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-9{
  width: 15px;
  height: 27px;
  top: 128px;
  left: 264px;
  border-radius: 0 0 5px 0 / 0 0 20px 0;
  transform: rotate(-12deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-10{
  width: 11px;
  height: 26px;
  top: 167px;
  left: 252px;
  border-radius: 0 4px 5px 0 / 0 4px 12px 0;
  transform: rotate(39deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-11{
  width: 14px;
  height: 36px;
  top: 170px;
  left: 235px;
  border-radius: 0 11px 3px 0 / 0 25px 5px 0;
  transform: rotate(79deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-12{
  width: 10px;
  height: 23px;
  top: 175px;
  left: 225px;
  border-radius: 0 0 12px 0 / 0 0 22px 0;
  transform: rotate(124deg);
  background-color: #0c1115;
  z-index: 2;
}

.right-ear-bg-13{
  width: 5px;
  height: 12px;
  top: 188px;
  left: 236px;
  border-radius: 5px;
  transform: rotate(68deg);
  background-color: #0c1115;
  z-index: 2;
}