/* Better box sizing */
* {
  box-sizing: border-box;
}

body {
  background-image:
    radial-gradient(
      circle at top left,
      rgba(139, 92, 246, 0.5),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(245, 158, 11, 0.5),
      transparent 30%
    ),
    radial-gradient(rgba(184, 128, 33, 0.3) 1px, transparent 1px),
    radial-gradient(rgba(184, 128, 33, 0.25) 1px, transparent 1px),
    radial-gradient(rgba(184, 128, 33, 0.4) 1px, transparent 1px);

  background-size:
    auto,
    auto,
    75px 75px,
    50px 50px,
    100px 100px;

  background-attachment: fixed;

  animation: moveDots 15s linear infinite;
}

@keyframes moveDots {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      0 0,
      0 0,
      200px 60px,
      100px 40px,
      80px 50px;
  }
}

.dice {
  display: inline-block;
  animation: diceBounce 6s ease-in-out infinite;
}

@keyframes diceBounce {
  0%,
  90%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  93% {
    transform: translateY(-15px) rotate(-90deg);
  }

  96% {
    transform: translateY(0) rotate(360deg);
  }
}