* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}
body{
    width: 100%;
    height: 100vh;
    background-color: rgba(150, 150, 150, 0.911);
}

#topHat{
    width: 200px;
    position: absolute;
    /* left:calc(61,8% - 100px);
    top:100px; */
    transition: all 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.move {
    transform: translateX(200px);

      /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}

@keyframes shake {
    0% { translate:1px 1px; rotate: 0deg; }
    10% { translate:-1px -2px; rotate:-1deg; }
    20% { translate:-3px 0px; rotate:1deg; }
    30% { translate:3px 2px; rotate:0deg; }
    40% { translate:1px -1px; rotate:1deg; }
    50% { translate:-1px 2px; rotate:-1deg; }
    60% { translate:-3px 1px; rotate:0deg; }
    70% { translate:3px 1px; rotate:-1deg; }
    80% { translate:-1px -1px; rotate:0deg; }
    100% { translate:1px -2px; rotate:-1deg; }
  }