:root {
    --background: hsl(210, 40%,  5%);
    --foreground: hsl(0,    0%, 95%);
    --accent:     hsl(265, 40%, 50%);
    --success:    hsl(100, 40%, 50%);
    --failure:    hsl(0,   40%, 50%);
    --warn:       hsl(60,  65%, 50%);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: sans-serif;
    background: var(--background);
}

/* Background */
#background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    touch-action: none;
}

/* Vignette Effect */
#background::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,0) 30%,
            rgba(0,0,0,0.55) 70%,
            rgba(0,0,0,0.5) 100%
        );
}

/* Actual page content */
.content {
    position: relative;
    z-index: 1;
    padding: 5%;
    max-width: 100%;
}