/* 
    USER PARAMETERS
    Enter your own settings here
*/
:root {
    --bp-unit-width:            20px;
    --bp-units-per-group:       5;
    --bp-units-line-width:      1px;
    --bp-groups-line-width:     1px;
    --bp-background-color:      #ffffff;
    --bp-groups-bounds-color:   #ededed;
    --bp-units-bounds-color:    #f6f6f6;
}

/* DO NOT EDIT BELOW */
:root {
    --bp-group: calc(var(--bp-unit-width) * var(--bp-units-per-group));
}
body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bp-background-color);
    background-image: linear-gradient(
            var(--bp-groups-bounds-color) var(--bp-groups-line-width),
            transparent var(--bp-groups-line-width)
        ),
        linear-gradient(
            90deg,
            var(--bp-groups-bounds-color) var(--bp-groups-line-width),
            transparent var(--bp-groups-line-width)
        ),
        linear-gradient(
            var(--bp-units-bounds-color) var(--bp-units-line-width),
            transparent var(--bp-units-line-width)
        ),
        linear-gradient(
            90deg,
            var(--bp-units-bounds-color) var(--bp-units-line-width),
            transparent var(--bp-units-line-width)
        );
    background-size: calc(var(--bp-units-per-group) * var(--bp-unit-width))
            calc(var(--bp-units-per-group) * var(--bp-unit-width)),
        calc(var(--bp-units-per-group) * var(--bp-unit-width))
            calc(var(--bp-units-per-group) * var(--bp-unit-width)),
        var(--bp-unit-width) var(--bp-unit-width),
        var(--bp-unit-width) var(--bp-unit-width);
}