.wrap
  .totoro
    .head
    .ears
    .legs
    .left-arm
    .right-arm
    .body
    .belly
    .belly-arrows ⮝
    .eyes
    .nose-bridge
    .nose
    .whiskers
    
    
.ccc
  |Made by 
  a(href='http://chilliconcode.com', target='_blank') chilliconcode.com
View Compiled
//---------------------
//  Resize Totoro here:
$size:150px;
//---------------------

body {
  margin:0;
}


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

.wrap{
  width:100%;
  height:100%;
  background:#e5e1c6;
  background: radial-gradient(circle, #e5e1c6, #5f5b36);
}

.totoro {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height:$size*1.9;
  width:$size*1.35;
  margin:auto;
}

.belly {
  background:#e1db9d;
  box-shadow: inset $size*0.1 $size*-0.09 #a9a356;
  width:$size;
  height:$size;
  border-radius:50%;
  top:$size*0.72;
  left:$size*0.15;
}

.legs {
  background:#47463b;
  width:$size*0.8;
  height:$size*0.7;
  border-radius:20%;
  top:$size*1.22;
  left:$size*0.25;
}

.head {
  background:#72705f;
  box-shadow: inset $size*0.16 $size*-0.14 #47463b;
  width:$size*0.75;
  height:$size*0.7;
  border-radius:50%;
  left:$size*0.27;
  top:$size*0.22;
}

.body {
  background:#72705f;
  box-shadow: inset $size*0.27 $size*-0.27 #47463b;
  width:$size*1.2;
  height:$size*1.5;
  border-radius:50% 50% 40% 40%;
  top:$size*0.37;
  left:$size*0.05;
}

.left-arm {
  background:#47463b;
  width:$size*0.4;
  height:$size*0.88;
  border-radius:50% 0% 0% 50%;
  top:$size*0.58;
  transform:rotate(18deg);
}
.right-arm {
  background:#72705f;
  width:$size*0.4;
  height:$size*0.88;
  border-radius:0% 50% 50% 0%;
  top:$size*0.58;
  left:$size*0.9;
  transform:rotate(-18deg);
}

.ears {
  background:#72705f;
  width:$size*0.15;
  height:$size*0.3;
  border-radius:50%;
  left:$size*0.37;
  box-shadow:$size*0.41 0 0 0 #72705f, inset $size*0.03 0 #47463b;
}

.eyes {
  background:white;
  border-radius:50%;
  width:$size*0.1;
  height:$size*0.1;
  top:$size*0.42;
  left:$size*0.38;
  box-shadow:$size*0.44 0 0 0 white;
}

.eyes:after {
  background:black;
  width:$size*0.05;
  height:$size*0.05;
  border-radius:50%;
  top:25%;
  left:35%;
  box-shadow:$size*0.416 0 0 0 black;
}

.nose {
  width:0;
  height:0;
  border-top:$size*0.05 solid black;
  border-left:$size*0.06 solid transparent;
  border-right:$size*0.06 solid transparent;
  top:$size*0.5;
  left:$size*0.59;
}

.nose-bridge {
  content:"";
  width:$size*0.25;
  height:$size*0.2;
  background:#72705f;
  position:absolute;
  top:$size*0.43;
  left:$size*0.53;
  border-radius:40%;
  box-shadow: inset 0 $size*0.01 0 0 #47463b;
}

.whiskers {
  background:black;
  width:$size*0.2;
  height:$size*0.01;
  top:$size*0.5;
  left:$size*0.15;
  box-shadow: $size*0.8 0 0 0 black;
}
.whiskers:after {
  background:black;
  width:$size*0.2;
  height:$size*0.01;
  box-shadow: $size*0.8 0 0 0 black;
  transform:rotate(10deg);
  top:$size*-0.07;
}
.whiskers:before {
  background:black;
  width:$size*0.2;
  height:$size*0.01;
  box-shadow: $size*0.8 0 0 0 black;
  transform:rotate(-10deg);
  top:$size*0.07;
}

.belly-arrows {
  font-size:$size*0.16;
  top:$size*0.78;
  left:$size*0.57;
  color:#72705f;
  transform:scale(1.6,1);
  text-shadow: $size*0.13 $size*0.02 #72705f,
               $size*-0.13 $size*0.02 #72705f,
               $size*0.07 $size*0.17 #72705f,
               $size*-0.07 $size*0.17 #72705f,
               $size*-0.2 $size*0.19 #72705f,
               $size*0.2 $size*0.19 #72705f;
}


.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