:root {
    --background-color-light: rgb(223, 223, 223);
    --background-color-dark: rgb(54, 54, 54);

    --header-color-light: rgb(69, 86, 197);
    --header-color-dark: rgb(0, 0, 89);

    --border-color-light: rgb(17, 24, 41);
    --border-color-dark: rgb(141, 151, 176);

    --bp-color-light: rgb(0, 0, 0);
    --bp-color-dark: rgb(216, 216, 216);

    --li-color-light: rgb(181, 192, 200);
    --li-color-dark: rgb(89, 86, 97);

    --font-color-light: black;
    --font-color-dark: white;
}

body {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    background-color: var(--background-color-light);
    color: var(--font-color-light);
}

#site-header {
    position: sticky;
    top: 0;
    background-color: var(--header-color-light);
    border: 2px solid var(--border-color-light);
    border-radius: 5px;
    margin: 3px;
}

li {
    list-style-type: square;
    border-radius: 4px;
    background-color: var(--li-color-light);
    margin-bottom: 25px;
    width: fit-content;
    min-width: 550px;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background-color-dark);
        color: var(--font-color-dark);
    }

    #site-header {
        background-color: var(--header-color-dark);
        border-color: var(--border-color-dark);
    }

    li {
        background-color: var(--li-color-dark);
    }
}