body {
    position: relative;
    -webkit-box-sizing: border-box;
    /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box;
    /* <=28 */
    box-sizing: border-box;
    background-image: url("/mist.gif");
    background-position: center;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: monospace;
}

main {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  text-align: center;

  color: whitesmoke;
  filter: drop-shadow(1rem 5rem crimson) drop-shadow(4rem -5rem blue);
  text-shadow: 3px 3px 2px #000, -3px 3px 2px #000, -3px -3px 0 #000, 3px -3px 0 #000;
  background-color: rgba(.4, .4, .4, .2);

  * {
    margin: 2rem;
  }
}

.box {
  position: fixed;
  left: 0;
  top: 0;
  animation: jump 4s steps(1, end) infinite;

  font-size: 4rem;
  /* color: whitesmoke; */
}

  .two {
    animation-delay: -2s;
  }

  .three {
    animation-delay: -1.5s;
  }

  .four {
    animation-delay: -3s;
  }

/* @keyframes jump {
  0%   { left: 10vw; top: 20vh; color: whitesmoke; font-size: 4rem;}
  25%  { left: 70vw; top: 15vh; color: #444; font-size: 2rem;}
  50%  { left: 35vw; top: 25vh; color: slateblue; font-size: 4rem; }
  60%  { left: 60vw; top: 70vh; }
  75%  { left: 85vw; top: 60vh; color: rgb(123, 183, 32); font-size: 3rem; }
  100% { left: 10vw; top: 20vh; color: slateblue; font-size: 1rem; }
} */

@keyframes jump {
  0%   { left: 10%; top: 20%; color: whitesmoke; }
  25%  { left: 70%; top: 15%; color: #444; }
  50%  { left: 35%; top: 35%; color: slateblue; }
  60%  { left: 60%; top: 70%; }
  75%  { left: 80%; top: 60%; color: rgb(123, 183, 32); }
  100% { left: 10%; top: 20%; color: slateblue; }
}