:root {
    --background: #f9f9f9;
    --article-background: #f4f4f4;
    --text: #555555;
    --link: #1590d0;
    --link-hover: #1590d0;
    --link-hover-background: #eee8d5;
    --header-background: #04519b;
    --header-gradient-top: #055fab;
    --header-gradient-bottom: #033e80;
    --header-text: #ffffff;
    --header-link: #2da6fc;
    --article-header: #2aa198;
    --h1-link: #268bd2;
    --blockquote-border: #909090;
    --sidebar-link: #268bd2;
    --sidebar-link-hover: #2aa198;
    --footer-border: #eee8d5;
    --tooltip-background: #f9f9f9;
    --tooltip-text: #555555;
    --tab-background: #F9F9F9;
    --tab-border: #DAE0E7;
    --tab-hover: #f0f0f0;
    --tab-selected: #eaeaea;
    --tab-selected-hover: #e0e0e0;
    --table-text: #666666;
    --table-header-background: #eaebec;
    --table-header-gradient-top: #eeeeee;
    --table-header-gradient-bottom: #eaeaea;
    --table-background: #f9f9f9;
    --table-border: #e0e0e0;
    --table-hover: #f0f0f0;
    --blockquote-left: #000000;
}

/* Dark mode when browser prefers it */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #222222;
        --article-background: #282828;
        --text: #cccccc;
        --link: #93e0e3;
        --link-hover: #93e0e3;
        --link-hover-background: #1d1d1d;
        --header-background: #282828;
        --header-gradient-top: #2e2e2e;
        --header-gradient-bottom: #252525;
        --header-text: #ffffff;
        --header-link: #dfaf8f;
        --h1-link: #dfaf8f;
        --article-header: #93e0e3;
        --blockquote-border: #909090;
        --sidebar-link: #93e0e3;
        --sidebar-link-hover: #93e0e3;
        --footer-border: #93e0e3;
        --tooltip-background: #1d1d1d;
        --tooltip-text: #cccccc;
        --tab-background: #222222;
        --tab-border: #333333;
        --tab-hover: #303030;
        --tab-selected: #333333;
        --tab-selected-hover: #383838;
        --table-text: #bbbbbb;
        --table-header-background: #333333;
        --table-header-gradient-top: #353535;
        --table-header-gradient-bottom: #313131;
        --table-background: #282828;
        --table-border: #333333;
        --table-hover: #333333;
        --blockquote-left: #000000;
    }
}

html, body {
	color: var(--text);
	background-color: var(--background);
}

header {
    background: linear-gradient(var(--header-gradient-top), var(--header-gradient-bottom));
    background-color: var(--header-background);
    color: var(--header-text);
    border-radius: 5px;
}

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

a:hover, a:focus {
    color: var(--link-hover);
}

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

#sidebar a, #sidebar a:visited, #sidebar a:active {
	color: var(--sidebar-link);
}

h1 a:hover {
	background-color: var(--link-hover-background);
	border-color: var(--link-hover-background);
}

header h1, header h2, header h3, header h4, header h5, header h6 {
    color: var(--header-text);
}

header h1 a, header h1 a:visited, header h1 a:active {
	color: var(--header-link);
}

header h1 a:hover {
	background-color: var(--link-hover-background);
	border-color: var(--link-hover-background);
}

article {
    background-color: var(--article-background);
}

blockquote {
	border-color: var(--blockquote-border);
}

#sidebar a:hover {
	color: var(--sidebar-link-hover);
	background-color: var(--link-hover-background);
}

#footer {
	border-color: var(--footer-border);
}

/* `tooltip` is used to show footnotes on hover */
.tooltip .tooltiptext {
    background-color: var(--tooltip-background);
    color: var(--tooltip-text);
}

/* Tabs */

.tab {
    background: var(--tab-background);
    border: 1px solid var(--tab-border);
}

.tab:hover {
    background: var(--tab-hover);
}

.tabSelected {
    background: var(--tab-selected);
}

.tabSelected:hover {
    background: var(--tab-selected-hover);
}

.button {
    color: var(--text);
    background-color: var(--tab-selected);
}

.spoiler, .spoiler a {
    color: black;
    background-color: black;
}

.spoiler:hover, .spoiler:hover a {
    color: white;
}

commento-body {
    /* TODO: I added this to make Commento look better in dark mode but it doesn't work */
    color: var(--text);
}