body {
    --grid-hue: 200;
    --grid-gap: 20px;
    --grid-opacity: 0.35;

    --grid-border: 49px;

    --grid-bg: hsl(var(--grid-hue), 20%, 90%);

    --grid-minor: hsl(
        var(--grid-hue) 60% 20% / calc(var(--grid-opacity) * 0.125)
    );
    --grid-major: hsl(
        var(--grid-hue) 60% 20% / calc(var(--grid-opacity) * 0.35)
    );
    --grid-cross: hsl(var(--grid-hue) 60% 20% / var(--grid-opacity));

    --paper-lines-y: linear-gradient(
        var(--grid-minor) 0px 1px,
        transparent 1px var(--grid-gap)
    );
    --paper-lines-x: linear-gradient(
        to right,
        var(--grid-minor) 0px 1px,
        transparent 1px var(--grid-gap)
    );
    --paper-lines-y-major: linear-gradient(
        var(--grid-major) 0px 1px,
        transparent 1px calc(var(--grid-gap) * 5)
    );
    --paper-lines-x-major: linear-gradient(
        to right,
        var(--grid-major) 0px 1px,
        transparent 1px calc(var(--grid-gap) * 5)
    );
    --paper-cross-y: linear-gradient(
        var(--grid-cross) 0px 1px,
        transparent 1px calc(var(--grid-gap) * 5)
    );
    --paper-cross-x: linear-gradient(
        to right,
        var(--grid-cross) 0px 1px,
        transparent 1px calc(var(--grid-gap) * 5)
    );
    --paper-cross-mask: radial-gradient(
        circle at center,
        transparent calc(var(--grid-gap)/2),
        var(--grid-bg) calc(var(--grid-gap)/2) 100%
    );

    --paper-gradient:
        var(--paper-lines-y), var(--paper-lines-x), var(--paper-lines-y-major),
        var(--paper-lines-x-major), var(--paper-cross-mask),
        var(--paper-cross-y), var(--paper-cross-x);

    background-size:
        var(--grid-gap) var(--grid-gap),
        var(--grid-gap) var(--grid-gap),
        calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
        calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
        calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
        calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5),
        calc(var(--grid-gap) * 5) calc(var(--grid-gap) * 5);

    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat;

    background-position:
        var(--grid-border) var(--grid-border),
        var(--grid-border) var(--grid-border),
        var(--grid-border) var(--grid-border),
        var(--grid-border) var(--grid-border),
        calc(var(--grid-border) - var(--grid-gap) * 2.5)
            calc(var(--grid-border) - var(--grid-gap) * 2.5),
        var(--grid-border) var(--grid-border),
        var(--grid-border) var(--grid-border);

    background-color: var(--grid-bg);
    background-image: var(--paper-gradient);

    box-shadow:
        inset 0 0 0 var(--grid-border) var(--grid-bg),
        inset 0 0 0 calc(var(--grid-border) + 1px) var(--grid-cross),
        inset 0 0 0 calc(var(--grid-border) + 1px) var(--bg2);
    padding: var(--grid-border);
}