Printer paper CSS background

body {
  --white: hsl(240, 5%, 92%);
  --grey: hsl(240, 5%, 62%);

  --green: hsl(132, 37%, 84%);
  --darkgreen: hsl(132, 37%, 64%);

  --row-height: 100px;
  --column-width: 50px;

  --holes: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0.2) 0% 20%,
    rgba(0, 0, 0, 0.25) 20% 21%,
    rgba(0, 0, 0, 0.3) 21% 22%,
    transparent 22% 100%
  );

  height: 100dvh;
  margin: 0;

  background-image:
    /* Holes on left-hand column */ var(--holes),
    /* Holes on right-hand column */ var(--holes),
    /* Columns - start of left and right sides*/
      linear-gradient(
        90deg,
        var(--white) calc(var(--column-width) * 0.98),
        var(--grey) calc(var(--column-width) * 0.98) var(--column-width),
        transparent var(--column-width) calc(100% - var(--column-width)),
        var(--grey) calc(100% - var(--column-width))
          calc(100% - (var(--column-width) * 0.98)),
        var(--white) calc(100% - (var(--column-width) * 0.98)) 100%
      ),
    /* 2 striped rows */
      linear-gradient(
        var(--white) 50%,
        var(--darkgreen) 50% 51%,
        var(--green) 51% 99%,
        var(--darkgreen) 99% 100%
      );

  background-size: var(--column-width) var(--column-width),
    var(--column-width) var(--column-width), 100%, 100% var(--row-height);
  background-position: 100% 0%, 0% 0%, 0% 0%, 0% 0%;
  background-repeat: repeat-y, repeat-y, repeat, repeat;
}