:root {
	color-scheme: dark;
}

html {
	--WebsiteIcon: url('media/dark-favicon.png');

	--DefaultFgColor: #FFFFFF;
	--DefaultBgColor: #333333;
	--DefaultBorderRadius: 7px;

	--MenuFgColor: #CCCCCC;
	--MenuBgColor: #000000E0;
	--MenuBorderColor: #333333;
	--MenuShadowColor: #66666633;
	--MenuSelectFgColor: #FFD100;
	--MenuSelectBgColor: #FFD10033;

	--HeaderFgColor: #FFFFFF;
	--HeaderBgColor: #333333;
	--HeaderImage: url('media/dark-header-image.jpg');

	--FooterFgColor: #AAAAAA;
	--FooterBgColor: #222222;
	--FooterLinkFgColor: #FFFFFF;
	--FooterActiveLinkFgColor: #FFD100;

	--ContentFgColor: #AAAAAA;
	--ContentBgColor: #222222;
	--ContentBgImageColor: #333333;
	--ContentBgImage: url('media/dark-article-image.jpg');

	--HeadingFgColor: #FFFFFF;
	--MetaDataColor: #808080;
	--AccentColor: #FFD100;
	--LinkFgColor: #C8A500;
	--SeparatorColor: #666666;
	--ImageBorderColor: #666666;
	--ButtonFgColor: #000000;
	--ButtonBgColor: #C8A500;
	--ButtonBgColorHover: #FFD100;
	--NavButtonFgColor: #E0E0E0;
	--NavButtonBgColor: #3B3B3B;
	--NavButtonBgColorHover: #555555;
	--ActiveItemBgColor: #FFD10033;

	--InputFgColor: #FFFFFF;
	--InputBgColor: #333333;
	--InputBorderColor: #666666;

	--ErrorFgColor: red;

	--QuoteFgColor: #E0E0E0;
	--QuoteBgColor: #333333;
	--QuoteFgColorPale: #C8A500;
	--QuoteBorderColor: #444444;

	--PopupFgColor: #CCCCCC;
	--PopupBgColor: #333333;
	--PopupBorderColor: #666666;

	--TableFgColor: #E0E0E0;
	--TableBgColor: #FFFFFF14;
	--TableBgColorHead: #FFFFFF28;

	--MarkFgColor: black;
	--MarkBgColor: #FFFF00E0;

	--BibleQuoteFgColor: #CCCCCC;
	--BibleQuoteBgImage: url('media/dark-biblequote-bg.png');
}

header {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), /* make bg image darker */
		var(--HeaderImage);
}

blockquote.bibelzitat,
blockquote.biblequote {
	color: var(--BibleQuoteFgColor);
}

article b {
	color: #DDDDDD;
}

article blockquote b {
	color: #FFFFFF;
}

article a b {
	color: revert;
}

/* Sidebar on the left side: */
@media (min-width: 800px) {
	body {
		grid-template-areas:
			"menu-left-space     menu                menu                menu-right-space"
			"header              header              header              header"
			"left-space          sidebar             main                right-space"
			"footer-left-space   footer              footer              footer-right-space";
		grid-template-columns:
			auto                 280px               minmax(auto, 800px) auto;
	}
}
