:root {
  --size: 40px;
}
body {
  color: white;
  margin: 0;
  padding: 0;
}
.generated-background {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template-areas: "left right";
  grid-row: 1fr 1fr;
  transition: all linear 0.1s;
}

.left {
  grid-area: left;
  background-image: repeating-radial-gradient(
    circle at 100%,
    white 0,
    white var(--size),
    currentColor 0,
    currentColor calc(2 * var(--size))
  );
}
.right {
  grid-area: right;
  background-image: repeating-radial-gradient(
    circle at 0,
    currentColor 0,
    currentColor var(--size),
    white 0,
    white calc(2 * var(--size))
  );
}

h1 {
  color: black;
  position: absolute;
  font-family: "Arial Black";
  left: calc(50% + 20px);
  top: 40%;
  width: 10ch;
  padding: 1ch;
  text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 0;
}

const changeColor = () => {
        document.body.style =
          "color: #" +
          [1, 2, 3, 4, 5, 6]
            // generates lighter color, add 8 to a random number between 0 and 8
            .map(_ => "0123456789abcdef"[Math.floor(Math.random() * 8 + 8)])
            .join("");
      };
      window.onload = changeColor;
      document.body.addEventListener("click", changeColor);