.wrap
 .boh-yubird
   .boh
     .feet
     .tail
     .lower-body
     .upper-body
     .head
       .eyes
       .nose
       .ears
   .yubird
     .left-wing
     .right-wing
     .left-leg
     .right-leg
     .hair
       .hair-1
       .hair-2
     .body
     .beak
     .yu-eyes

.ccc
  |Made by 
  a(href='http://chilliconcode.com', target='_blank') chilliconcode.com
View Compiled
//---------------------
//  Resize the characters here: 
$size:100px;
//---------------------

body {
  margin:0;
}

div, div:after, div:before {
  position:absolute;
  content:"";
}

.wrap {
  width:100%;
  height:100%;  
  background: radial-gradient(circle, #b7b9a4, #6a7f83);
}

.boh-yubird {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height:$size*1.3;
  width:$size;
  margin:auto;
  animation: floatanim ease-in-out 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}
@keyframes floatanim{
  0% {transform:  translate(0px,$size*-0.45);}
  50% {transform:  translate(0px,$size*-0.6);}
  100% {transform:  translate(0px,$size*-0.45);}
}


.upper-body {
  width:$size;
  height:$size*1.3;
  background:#f3d9cd;
  border-radius: 50% 50% 50% 50%/65% 65% 35% 35%;
  box-shadow:inset $size*-0.15 $size*-0.1 #d7b5aa;
  background:radial-gradient(circle at top, #f3d9cd, #e7cabf);
}

.lower-body {
  width:$size*0.5;
  height:$size*0.9;
  background:#f3d9cd;
  border-radius: 50%;
  top:$size*0.75;
  left:$size*0.03;
  box-shadow: $size*0.45 0 0 0 #d7b5aa, 
              inset $size*-0.15 0 #d7b5aa;
}
.lower-body:after {
  background:#fbe9da;
  width:$size*0.8;
  height:$size*0.8;
  border-radius: 50%;
  top:$size*0;
  left:$size*0.075;
  box-shadow: inset $size*-0.3 $size*-0.05 #e9d2c0;
}

.head {
  border:$size*0.02 solid #e7cabf;
  background:#f3d9cd;
  width:$size*0.55;
  height:$size*0.55;
  border-radius: 45% 45% 0 0;
  top:$size*0.6;
  left:$size*0.22;
  box-shadow:inset $size*-0.1 $size*-0.1 #dec0b7;
}
.head:before {
  background:#f3d9cd;
  width:$size*0.4;
  height:$size*0.4;
  border-radius: 50%;
  top:$size*0.38;
  left:$size*0.23;
  box-shadow: $size*-0.31 0 0 0 #f3d9cd, 
              inset $size*-0.1 $size*-0.05 #dec0b7;
}

.eyes {
  background:#fff8f3;
  width:$size*0.15;
  height:$size*0.15;
  border-radius: 50%;
  top:$size*0.25;
  left:$size*0.05;
  box-shadow:$size*0.3 0 0 0 #fff8f3;
}
.eyes:before {
  background:#26130e;
  width:$size*0.07;
  height: $size*0.07;
  border-radius: 50%;
  top: $size*0.03;
  left: $size*0.06;
  box-shadow:$size*0.26 0 0 0 #26130e;
}

.nose {
  background:#f5aba0;
  width:$size*0.06;
  height: $size*0.06;
  border-radius: 20% 20% 50% 50%;
  top: $size*0.35;
  left: $size*0.24;
}

.ears {
  background:#f3d9cd;
  width:$size*0.2;
  height: $size*0.25;
  border-radius: 50%/70% 70% 30% 30%;
  top: $size*-0.15;
  left: 0;
  box-shadow: $size*0.35 0 0 0 #f3d9cd;
}
.ears:after {
  background:#efbbba;
  width:$size*0.15;
  height: $size*0.24;
  border-radius: 50%/70% 70% 30% 30%;
  top: 0;
  left: $size*0.4;
  box-shadow: $size*-0.4 0 0 0 #efbbba,
              inset $size*0.05 $size*-0.05 #deafac;  
}

.feet {
  background:#e89d97;
  width:$size*0.03;
  height:$size*0.3;
  top:$size*1.5;
  left:$size*0.27;
  border-radius:$size*0.05;
  box-shadow:$size*0.45 0 0 0 #e89d97;
}

.feet:after{
  background:#e89d97;
  width:$size*0.03;
  height:$size*0.3;
  top:$size*-0.03;
  left:$size*-0.03;
  border-radius:$size*-0.03;
  box-shadow:$size*0.45 $size*-0.04 0 0 #e89d97;
  transform:rotate(6deg);
}
.feet:before{
  background:#e89d97;
  width:$size*0.03;
  height:$size*0.3;
  top:$size*-0.03;
  left:$size*0.03;
  border-radius:$size*-0.03;
  box-shadow:$size*0.45 $size*0.05 0 0 #e89d97;
  transform:rotate(-6deg);
}

.tail {
  width:$size*0.3;
  height:$size*0.8;
  top:$size*1.45;
  left:$size*0.45;
  border-radius:0 0 0 100%;
  border-left:$size*0.1 solid #d88589;
}


//-----------------
//  Yubaba's Bird
//-----------------
.body {
  background:#322730;
  width:$size*0.3;
  height:$size*0.3;
  border-radius:50%/0% 0% 100% 100%;
  top:$size*-0.6;
  left:$size*0.35;
}
.body:before {
  width:$size*0.3;
  height:$size*0.3;
  background:#7c5c5c;
  border-radius:50%;
  top:$size*-0.3;
}
.body:after {
  background:#322730;
  width:$size*0.1;
  height:$size*0.1;
  border-radius:50%;
  top:$size*0.15;
  left:$size*0.01;
  box-shadow:$size*0.18 0 0 0 #322730;
}

.beak {
  background:#fbdd8f;
  width:$size*0.5;
  height:$size*0.15;
  border-radius:50%/100% 100% 0 0;
  top:$size*-0.7;
  left:$size*0.25;
  box-shadow: inset $size*-0.1 0 #e8b96a;
}
.beak:after {
  background:#e8b96a;
  width:$size*0.35;
  height:$size*0.07;
  border-radius:50%/0 0 100% 100%;
  top:$size*0.15;
  left:$size*0.08;
}

.yu-eyes {
  width:$size*0.25;
  height:$size*0.25;
  border-radius:50%;
  background:#fff8f3;
  top:$size*-0.86;
  left:$size*0.25;
  box-shadow:$size*0.25 0 0 0 #fff8f3;
}
.yu-eyes:after {
  width:$size*0.08;
  height:$size*0.08;
  border-radius:50%;
  background:#322730;
  top:$size*0.08;
  left:$size*0.08;
  box-shadow:$size*0.25 0 0 0 #322730;
}

.left-leg {
  width:$size*0.3;
  height:$size*0.3;
  border-left:$size*0.02 solid #322730;
  border-bottom:$size*0.02 solid #322730;
  transform:rotate(45deg) skewy(20deg);
  top:$size*-0.35;
  left:$size*0.23;
}
.left-leg:after {
  width:$size*0.05;
  height:$size*0.05;
  border-left:$size*0.02 solid #322730;
  border-top:$size*0.02 solid #322730;
  transform:rotate(45deg) skewx(50deg);
  top:$size*0.34;
  left:$size*0.28;
}

.right-leg {
  width:$size*0.3;
  height:$size*0.3;
  border-right:$size*0.02 solid #322730;
  border-top:$size*0.02 solid #322730;
  transform:rotate(45deg) skewx(20deg);
  top:$size*-0.35;
  left:$size*0.45;
}
.right-leg:after {
  width:$size*0.05;
  height:$size*0.05;
  border-left:$size*0.02 solid #322730;
  border-top:$size*0.02 solid #322730;
  transform:rotate(-45deg) skewy(50deg);
  top:$size*0.28;
  left:$size*0.34;
}

.hair-1 {
  width:$size*0.05;
  height:$size*0.2;
  border-left:$size*0.01 solid #322730;
  top:$size*-1.15;
  left:$size*0.49;
}
.hair-1:after {
  width:$size*0.05;
  height:$size*0.2;
  border-left:$size*0.01 solid #322730;
  transform:rotate(10deg);
  top:$size*0.02;
  left:$size*0.07;
}
.hair-1:before {
  width:$size*0.05;
  height:$size*0.2;
  border-left:$size*0.01 solid #322730;
  transform:rotate(-10deg);
  top:$size*0.01;
  left:$size*-0.09;
}

.hair-2 {
  width:$size*0.05;
  height:$size*0.2;
  border-left:$size*0.01 solid #322730;
  transform:rotate(-30deg);
  top:$size*-1.11;
  left:$size*0.32;
}
.hair-2:after {
  width:$size*0.05;
  height:$size*0.2;
  border-left:$size*0.01 solid #322730;
  transform:rotate(60deg);
  top:$size*0.19;
  left:$size*0.28;
}

.left-wing {
  width:$size*0.4;
  height:$size*0.1;
  border-radius:50%;
  background: #322730;
  top:$size*-0.6;
  left:$size*-0.25;
  animation: leftwinganim linear 0.15s;
  animation-iteration-count: infinite;
  transform-origin: 100% 50%;
}
@keyframes leftwinganim{
  0% {transform:  translate(0px,$size*0.15)  rotate(-60deg);}
  50% {transform:  translate($size*0.05,$size*-0.15)  rotate(60deg);}
  100% {transform:  translate(0px,$size*0.15)  rotate(-60deg);}
}

.right-wing {
  width:$size*0.4;
  height:$size*0.1;
  border-radius:50%;
  background: #322730;
  top:$size*-0.6;
  left:$size*0.8;
  animation: rightwinganim linear 0.15s;
  animation-iteration-count: infinite;
  transform-origin: 0% 100%;
}
@keyframes rightwinganim{
  0% {transform:  translate(0px,$size*0.15)  rotate(60deg);}
  50% {transform:  translate($size*0.05,$size*-0.15)  rotate(-60deg);}
  100% {transform:  translate(0px,$size*0.15)  rotate(60deg);}
}

.ccc, .ccc a {
  bottom:0px;
  right:0px;
  font-family:Tahoma;
  font-size:10pt;
  padding:5px;
  background:#eb5252;
  border-radius:5px 0 0 0;
  color:white;
}
View Compiled
/*-------------------------------------
See all in the Ghibli CSS series: 

https://codepen.io/chilliconcode/pens/tags/?selected_tag=ghibli

-------------------------------------*/
Rerun