:root {
    /* Background of the whole page */
    --background-fallback: rgb(156, 13, 75);
    --background-gradient: linear-gradient(180deg, #191b1a 50%, rgb(156, 13, 75) 100%);
    --background-circle: black;
    --pattern: url("./resources/images/patterns/hexellence-edit.png");
    /*--pattern: url("./resources/images/patterns/brushed-alum-dark.png");*/
    /* Background of the floating box with words in it */
    --main-box: rgba(242, 233, 241, 0.9);
    /* Used to lighten/darken boxes */
    --overlay-color: rgba(255,255,255,0.3);
    /* Text color */
    --text: black;
    /* Accent color: borders, mostly */
    --accent: #a80067;
    --mommy: #7d004d;
    /* The width of the box */
    --box-width: 65ch;
    /* For the h1 color adjustment */
    --brightness-filter: 70%;
}

.mommy, .mommy::after {
    color: var(--mommy);
    text-transform: capitalize;
    font-weight: bold;
}
.mommy::after {
    content: " <3 ";
}

.pink {
    color: var(--mommy);
    font-weight: bold;
}

h1 {
    color: var(--accent);
    text-shadow: 4.5ch 0em 0 rgba(255, 255, 255, 0.153);
    background-image: linear-gradient(var(--accent), white);
    color: transparent;
    background-clip: text;
}

dt {text-decoration: underline;}

/* Adjustments for dark theme */
@media only screen and (prefers-color-scheme: dark) {
    :root {
        /* Background of the whole page */
        --background-fallback: rgb(156, 13, 75);
        --background-gradient: linear-gradient(180deg, #191b1a 50%, rgb(156, 13, 75) 100%);
        --background-gradient: linear-gradient(180deg, #0d0e0d 50%, rgb(156, 13, 75) 100%);
        --pattern: url("./resources/images/patterns/lined-paper-2.png");
        /* Background of the floating box with words in it */
        --main-box: rgb(68, 48, 59);
        /* 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: #cc1972;
        --mommy: #ff72c9;
        /* For the h1 color adjustment */
        --brightness-filter: 150%;
    }

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

    /*p, li, dd {font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;}*/
}