@media (prefers-color-scheme: light) {
    :root {
        --page-bg: #fff;
        --page-line-color: rgba(0, 0, 0, 0.1);
        --page-gradient-left: #a575ff;
        --page-gradient-right: #ffe675;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #000;
        --page-line-color: rgba(255, 255, 255, 0.15);
        --page-gradient-left: #320e71;
        --page-gradient-right: #ba9b12;
    }
}

html {
    height: 100%;
    background:
        linear-gradient(to bottom, var(--page-bg) 0%, var(--page-bg) 40%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to right, var(--page-gradient-left), var(--page-gradient-right));
}

html::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, transparent 0px, var(--page-line-color) 1px, transparent 2px);
    background-size: 50px 100%;
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0) 70%);
}