/* wanted to do three separate animations; 
one for the 'fingers', one for the whole paw, one for having everything show up 
individually. But the animations do not want to work with me. 
Also, layering animations seems to cancel out each other, 
I do not know how to fix it yet. alightly fixed, sadly off-beat; 
I need help to fix it. the delay of animations and 
ordering of stuff with gsap/greensock is not great; 
but, again I need help to fix it, 
I wonder if my teacher even reads this shit to even help the students?*/

body {
    background: darkolivegreen;
    display: grid;
    place-content: center;
    height:100vh;
  }

  h2 {
    position: relative;
    right: 192px;
    bottom: 70px;
    color: rgb(97, 192, 109);
  }
  
  /* * {
    outline: .5px solid rgba(255, 145, 0, 0.952);
  } */
  
  #paw-main {
    scale: 6;
    fill: darkgreen;
    stroke: limegreen;
    stroke-width: 1;

    position: relative;
    left: 55px;
    bottom: 35px;
    
    animation-duration: 1.25s;
    animation-iteration-count: 1;
    animation-delay: 1s;
    animation-direction: forwards;
    
    transition: color, background 1s;
  }
  
  #paw-main:active {
    fill: blueviolet;
    stroke: #3b9aff;
  /*   animation-name: bounceInDown; */
    
  /*   animation orders: NAME , DURATION, DELAY */
    animation:sayHi 1s 6.25s;
  }
  
  /* keyframe animation */
  
  @keyframes sayHi {
    
  /*   first versus 0% */
   0% {
      rotate: 0deg;
    }
    
    25% {
      rotate: 15deg;
    }
    
  /*   middle versus 50% */
    50% {
  rotate: -10deg;
    }
    
  /*   last versus 100% */
    100% {
      rotate: 0deg;
    }
  }
  
  
  /* .middle {
    animation-delay: 2s;
  }
  
  .bottom {
    animation-delay: 3s;
  } */
  
  #up-arrow {
    position: relative;
    right: 200px;
    bottom: 28px;
    
    scale: 6;
    fill: darkgreen;
    stroke: limegreen;
    stroke-width: 1;
  }
  
  #up-arrow:active {
      
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: 2s ease-in forwards start-up, 3s 2 ease-in forwards go-up ;
    animation-delay: go-up 3s;
  }
  
  @keyframes start-up {
    0% {
      stroke-dashoffset: 40;
      
    }
    
    100% {
      stroke-dashoffset: 0;
      fill: firebrick;
    }
  }
  
  @keyframes go-up {
    
   0% {
     bottom: 0px;
    }
    
    100% {
      bottom: 1000px;
    }
    
  }
  
  
  
  #battery {
    position: relative;
    left: 230px;
    bottom: 28px;
    
    scale: 6;
    fill: darkgreen;
    stroke: limegreen;
    stroke-width: 1;
  }
  
  .bat2 {
      stroke-width: 1.5;
    }
  
  .batbar {
    stroke-width: 3;
  /*   stroke-opacity: 25%; */
  }
  
  /* #battery:active { stroke-opacity: 100; }
   */