/* walker.css */

#walker-wrapper {
  position: fixed;
  bottom: 10vh;
  left: -100px;
  pointer-events: none;
  z-index: 9999;
  /* default animation: 15s to cross the screen once */
  animation: walkAcross 10s linear 1 forwards;
}

@keyframes walkAcross {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 100px)); }
}

/* speed up on narrow viewports (e.g. phones/tablets) */
@media only screen and (max-width: 768px) {
  #walker-wrapper {
    /* shorten the crossing time to 8s */
    animation-duration: 4s;
  }
}

#walker {
  display: block;
  height: 300px;
  width: auto;
}