:root {
    /* Background of the whole page */
    --background-fallback: #dbdbdb;
    --background-gradient: linear-gradient(180deg, #dbdbdb 50%, rgb(125, 10, 10) 100%);
    --background-circle: black;
    --pattern: url("./resources/images/patterns/lined-paper-2.png");
    /* Background of the floating box with words in it */
    --main-box: rgba(249, 249, 249, 0.9);
    /* Used to lighten/darken boxes */
    --overlay-color: rgba(255,255,255,0.3);
    /* Text color */
    --text: black;
    /* Accent color: borders, mostly */
    --accent: #c30000;
    /* The width of the box */
    --box-width: 65ch;
    /* For the h1 color adjustment */
    --brightness-filter: 70%;
}

h1 {
    text-shadow: 4.5ch 0em 0 rgba(255, 255, 255, 0.153);
}

/* Adjustments for dark theme */
@media only screen and (prefers-color-scheme: dark) {
    :root {
        /* Background of the whole page */
        --background-fallback: #000000;
        --background-gradient: linear-gradient(180deg, #000000 0%, #470000 100%);
        --pattern: url("./resources/images/patterns/lined-paper-2.png");
        /* Background of the floating box with words in it */
        --main-box: rgb(34, 34, 34);
        /* Used to lighten/darken boxes */
        --overlay-color: rgba(0,0,0,0.3);
        /* Text color */
        --text: rgb(255, 255, 255);
        /* Accent color: borders, mostly */
        --accent: rgb(165, 0, 0);
        /* For the h1 color adjustment */
        --brightness-filter: 150%;
    }

    a, a:link, a:visited {color: white;}
    h1 {
        text-shadow: 4.5ch 0em 0 black,
        -2px -2px 0 #0000006a,  
        2px -2px 0 #0000006a,
        -2px 2px 0 #0000006a,
        2px 2px 0 #0000006a;
    }
}