span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(calc(var(--angle,0) * 1deg)) translateY(calc(var(--y,1) * -40vmin)) rotate(.5turn);
  color: var(--fore, black);
}

main, div {
  width: 90vmin;
  height: 90vmin;
  position: relative;
  animation: roll 3000ms infinite linear;
}
main {
  animation: clatter 140ms infinite alternate ease-in-out
}

@keyframes roll {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes clatter {
  100% {
    transform: translateY(-.667vmin);
  }
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  overflow: hidden;
  background: var(--back, white);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --back: black;
  }
  span {
    --fore: white;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
  }
}
