:root {
    --skin-color: rgb(180, 98, 70);
    --shirt-color: rgb(245, 76, 24);
    --backpack-color: rgba(216, 158, 83, 1);
}


.head path, .ear path  {
    fill: var(--skin-color);
}

.HandR path, .HandL path {
    stroke: var(--skin-color);
}

.torso path{
    fill: var(--shirt-color);
}

.arm-left path, .arm-right path{
    stroke: var(--shirt-color);
}

.strap-left path, .strap-right path {
    stroke: var(--backpack-color);
}

.backpack path {
    fill: var(--backpack-color);
}   

/* Smoke container */
  #smoke {
    opacity:0;
      position: absolute;
      z-index: 3;
      width: 1px; height: 160px;
      left: 70%; bottom: 90%;
  }

  #smoke.active {
      opacity:1;
  }
  
  /* smoke balls */
  
  #smoke span { 
    display: block;
      position: absolute;
      bottom: -35px; left: 50%; 
      height: 0px; width: 0px;
      border: 20px solid #fff;
      border-radius: 35px;
      left: -14px; opacity: 1;
      transform: scale(0);
  }
  
  /* Smoke animation */
  
  @keyframes smokeR {
      0%   { transform: scale(0) translate(0, 0) }
      10%  { transform: scale(0.1) translate(20px, -20px); opacity:1 }
      80%  { opacity:1 }
      100% { transform: scale(0.4) translate(40px, -75px) ; opacity:0 }
  }
  
  #smoke .s0 { animation: smokeR 3s 0s ease-out infinite }
  /* #smoke .s1 { animation: smokeR 3s 1.5s infinite } */
  #smoke .s2 { animation: smokeR 3s 1s ease-out infinite }
  /* #smoke .s3 { animation: smokeR 3s 2.5s infinite } */
  #smoke .s4 { animation: smokeR 3s 2s ease-out infinite }
  /* #smoke .s5 { animation: smokeR 3s 3.5s infinite } */
  /* #smoke .s6 { animation: smokeR 3s 3s infinite } */