Responsive color-scheme aware checkered CSS background

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>
  <body>
    <h1>Color-scheme aware CSS checkered background</h1>
    <div class="checkered"></div>
    <p>The guy above shold be light or dark depending on your prefered color-scheme. <a href="https://gist.github.com/hallojoe/60225de3433f5970b17a12a528b9915f" title="Color-scheme aware CSS checkered background.">See gist</a>
  </body>
</html>

// Add your code here

:root {
    font-size:24px;
    --backgroundColor: rgba(255, 255, 255);
    --squareColor: rgba(100, 100, 100, .5);
    --squareSize: 1em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: rgb(0, 0, 0);
  }
}

.checkered {
    background-color: var(--backgroundColor);
    background-image:
      linear-gradient(45deg, var(--squareColor) 25%, transparent 25%), 
      linear-gradient(135deg, var(--squareColor) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--squareColor) 75%),
      linear-gradient(135deg, transparent 75%, var(--squareColor) 75%);
    background-position:0 0, var(--squareSize) 0, var(--squareSize) calc(-1 * var(--squareSize)), 0 calc(-1 * var(--squareSize)); 
    background-size:calc(2 * var(--squareSize)) calc(2 * var(--squareSize)); 

}

body > div {
  width:20rem;
  height:20rem;
}