body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: white;
  position: relative;
  height: 100vh;
  width: 100vw;
}


.thumb {
  position: absolute;
  overflow: hidden;
  border-radius: 10px;

  animation-play-state: running;
  pointer-events: none;
}

.thumb img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
}


.thumb:hover {
  animation-play-state: paused;
  transform: scale(1.1);
  z-index: 10;
}

.thumb[data-direction="diag1"] {
  animation: move-diag1 var(--duration, 25s) linear infinite;
}

.thumb[data-direction="diag2"] {
  animation: move-diag2 var(--duration, 25s) linear infinite;
}




/* Animations */


@keyframes move-right {
  0%   { left: -200px; top: var(--start-y); }
  100% { left: 110vw; top: var(--start-y); }
}

@keyframes move-left {
  0%   { left: 110vw; top: var(--start-y); }
  100% { left: -200px; top: var(--start-y); }
}

@keyframes move-up {
  0%   { top: 110vh; left: var(--start-x); }
  100% { top: -200px; left: var(--start-x); }
}

@keyframes move-down {
  0%   { top: -200px; left: var(--start-x); }
  100% { top: 110vh; left: var(--start-x); }
}

@keyframes move-diag1 {
  0%   { top: 110vh; left: -200px; }
  100% { top: -200px; left: 110vw; }
}

@keyframes move-diag2 {
  0%   { top: -200px; left: 110vw; }
  100% { top: 110vh; left: -200px; }
}


/* Direction bindings */
.thumb[data-direction="right"] {
  --start-y: 30%;
  animation: move-right 20s linear infinite;
}

.thumb[data-direction="left"] {
  --start-y: 60%;
  animation: move-left 25s linear infinite;
}

.thumb[data-direction="up"] {
  --start-x: 40%;
  animation: move-up 22s linear infinite;
}

.thumb[data-direction="down"] {
  --start-x: 70%;
  animation: move-down 26s linear infinite;
}

.thumb[data-direction="diag1"] {
  animation: move-diag1 30s linear infinite;
}

.thumb[data-direction="diag2"] {
  animation: move-diag2 30s linear infinite;
}