main img.draggable {
    max-width: 150px;
    max-height: 150px;
    position: absolute;
    filter: saturate(2);
}


.draggable {
    cursor: move;
    position: relative;
    width: fit-content;
    user-select: none;
    z-index: 1;
    filter: drop-shadow(5px 3px 2px #000000b7);
}

.draggable:hover {
      /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 3s;

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

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

span.draggable {
    display: inline-block;
    /* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */
}

.draggable[data-moving="1"] {
    transform: rotate(-3deg);
    filter: drop-shadow(15px 15px 6px #20202052);
}