@media only screen and (max-width: 910px) {
.hamburger{
  transform: scale(0.8);
}
.tool-panel{
  transform: scale(0.8);
}
.tool-img{
  transform: scale(0.8);
  margin-right:50%
  
}
}

@media only screen and (max-width: 650px) {
 
  .combined{
    display: flex;
    flex-direction: column;
  }
  .tool-panel{
    position: absolute;
    top: 46vh;
    transform: scale(0.7) rotate(90deg);
    width: 110%;
    left: -46vw;
  }
  .hamburger{
    transform: scale(0.6);
    position: absolute;
    left: 1vw;
   top:20vh;
  }
  .toolBar{
    display: flex;
    flex-direction: column;
    transform: scale(1) ;
  }

  /* animation */
  .add-animation{
    animation-name: stretch;
    animation-duration: 0.7s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
    opacity: 1;
  }
  @keyframes stretch {
    0% {
      transform: scale(0) rotate(90deg);
      opacity: 0;
      border-radius: 100%;
    }
  
    50% {
      transform: scale(0.7) rotate(90deg);
      opacity: 0.5;
    }
    100% {
      transform: scale(0.7) rotate(90deg);
  opacity: 1;
    }
  }

  }