:root {
    color-scheme: light dark;

    --light-bg: #ffd5e3;
    --dark-bg: rgb(76, 58, 85);
}

body {
    background-color: light-dark(#fee7ef, unset);
    /* font-family: monospace; */
    max-width: 1024px;
    margin: 0 auto;
    font-size: 1.2rem;
    /* background-color: light-dark(
        var(--light-bg),
        var(--dark-bg)
    ); */

}

div.highlight { /* this is the style for code blocks */
    font-size: 1rem;
    /* background-color: light-dark(rgb(255, 238, 202), rgb(49, 49, 49)); */
    background-color: light-dark(rgb(255, 238, 202), rgb(60, 47, 66));
    border-radius: 10px;
    box-shadow: 3px 5px light-dark(rgb(194, 181, 154), rgb(53, 42, 58));
}

header#indexheader {
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

#buttonarea a {
    color: #ffd5e3;
}


@media (max-width: 800px) { /* For small screens! This sits at the end so it overrides whatever was set before */
    body {
        font-size: 1rem;
    }   
}