/*
  DIAGNOSTIC STYLING
*/

/* Your Awesome Scripts */

/* Stage */
#stage {
  width: 600px;
  height: 450px;
}

path{
  stroke: #231F20;
  fill: #231F20;
  stroke-dasharray: 2000;
  opacity:10;
  animation:animate 3s cubic-bezier(0,.23,1,.1);
}

#gun{
  position: relative;
  top:72px;
  left:-90px;
  animation: slide 2s 2;
}

@keyframes slide{
  20%{
    transform:translatex(455px)
      translatey(10px);
  }
  
  25%{
    transform:translatex(455px)
      translatey(180px);
  }
  
  30%{
    transform:translatex(275px)
      translatey(120px);
  }
  50%{
    transform:translatex(75px)
      translatey(225px);
  }

 60%{
    transform:translatex(445px)
      translatey(210px);
  } 
   70%{
    transform:translatex(0px)
      translatey(0px);
  }
  80%{
    transform:translatex(550px)
      translatey(135px);
  }
  90%{
    transform:translatex(190px)
      translatey(120px);
  }
}

@keyframes animate{
  0%{
    opacity: 0;
    fill:none;
    stroke-dashoffset:2000;
  }
  30%{
    opacity:10;
    fill:none;
    stroke-dashoffset:2000;
  }
  90%{
    fill: (0,0,0);
  }
  100%{
    opacity:10;
    fill: rgb(0,0,0);
  }
}