HTML {
  height: 100%;
}

BODY {
  background: gold;
  background-image: 
    radial-gradient(
      purple 10%, purple 20%,
      crimson 20%, crimson 30%,
      red 30%, red 40%,
      orangered 40%, orangered 50%,
      gold 50%, gold 60%,
      yellowgreen 60%, yellowgreen 70%,
      skyblue 70%, skyblue 80%,
      steelblue 80%, steelblue 90%,
      violet 90%
    ),
    linear-gradient(45deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.2) 50%,
      rgba(255,255,255,0) 60%),
    linear-gradient(-45deg,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.2) 50%,
      rgba(255,255,255,0) 60%),
    radial-gradient(
      purple 10%, purple 20%,
      crimson 20%, crimson 30%,
      red 30%, red 40%,
      orangered 40%, orangered 50%,
      gold 50%, gold 60%,
      yellowgreen 60%, yellowgreen 70%,
      skyblue 70%, skyblue 80%,
      steelblue 80%, steelblue 90%,
      violet 90%
    ),
    radial-gradient(
      purple 10%, purple 20%,
      crimson 20%, crimson 30%,
      red 30%, red 40%,
      orangered 40%, orangered 50%,
      gold 50%, gold 60%,
      yellowgreen 60%, yellowgreen 70%,
      skyblue 70%, skyblue 80%,
      steelblue 80%, steelblue 90%,
      violet 90%
    );
  background-blend-mode: 
    lighten, 
    normal, 
    normal,
    overlay,
  lighten;
  background-size: 
    6em 6em,
    2em 2em,
    2em 2em,
    12em 12em,
    3em 3em;
  animation: color 10s infinite;
  background-position: 
    50% 50%;
  }

@keyframes color {
  10% {
    background-color: purple;
  }
  20% {
    background-color: yellowgreen;
  }
  30% {
    background-color: royalblue;
  }
  40% {
    background-color: violet;
  }
  50% {
    background-color: steelblue;
  }
  60% {
    background-color: crimson;
  }
  70% {
    background-color: gold;
  }
  80% {
    background-color: skyblue;
  }
  90% {
    background-color: greenyellow;
  }
}