/* Do not edit this file. This file is generated. */

/* Default color scheme */
:root {
color-scheme: light dark;

--text-color: black;
--link-color: rgb(50, 50, 50);
--visited-link-color: rgb(50, 50, 50);
--code-text-color: black;
--code-background-color: rgb(230, 230, 230);
/*--background-color: rgb(229, 255, 229);*/
--background-color: rgb(248,248,255);
/*--nav-background-color: rgb(229,255,229);*/
/*--card-background-color: rgb(248, 255, 248);*/
--card-background-color: white;
--title-background-color: rgb(229, 255, 229);
--title-color: rgb(30, 30, 30);

/* The below needs to be added to both the light- and darkmode files, unfortunately. */
--constant-text-color-light: rgb(238, 238, 238);
--constant-background-color-dark: rgb(30, 30, 30);
--constant-background-color-semi-transparent: rgba(30,30,30, 0.5);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: light dark;

--text-color: rgb(238, 238, 238);
--link-color: var(--text-color);
--visited-link-color: var(--text-color);
--code-text-color: white;
--code-background-color: black;
--background-color: rgb(30, 30, 30);
--card-background-color: rgb(60, 60, 60);
--title-background-color: rgb(229, 255, 229);
--title-color: rgb(30, 30, 30);

/* The below needs to be added to both the light- and darkmode files, unfortunately. */
--constant-text-color-light: rgb(238, 238, 238);
--constant-background-color-dark: rgb(30, 30, 30);
--constant-background-color-semi-transparent: rgba(30,30,30, 0.5);

}
}

/* Below are the CSS rules that apply color */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

#center {
    background-color: var(--background-color);
}

select, input, textarea {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* The .highlight is for the larger code blocks */
code, .highlight, button {
    background: var(--code-background-color);
    color: var(--code-text-color);
}

.card {
     color: var(--code-text-color);
     box-shadow: inset 3em 1em 0 0 var(--card-background-color);
 }

a {
    color: var(--link-color);
}
a:visited {
    color: var(--visited-link-color);
}

hr {
    color: var(--text-color);
}