:root {
  --flexoki-black:           #100F0F;
  --flexoki-paper:           #FFFCF0;

  --flexoki-50:              #F2F0E5;
  --flexoki-100:             #E6E4D9;
  --flexoki-150:             #DAD8CE;
  --flexoki-200:             #CECDC3;
  --flexoki-300:             #B7B5AC;
  --flexoki-400:             #9F9D96;
  --flexoki-500:             #878580;
  --flexoki-600:             #6F6E69;
  --flexoki-700:             #575653;
  --flexoki-800:             #403E3C;
  --flexoki-850:             #343331;
  --flexoki-900:             #282726;
  --flexoki-950:             #1C1B1A;
  
  color-scheme: light dark;
}

body, body.light {
	background-color: var(--flexoki-50);
	color: var(--flexoki-black);
	font-family: Arial, sans-serif;
}
body.dark {
	background-color: var(--flexoki-950);
	color: var(--flexoki-200);
}

a, .light a {
	color: var(--flexoki-black);
}
.dark a {
	color: var(--flexoki-200);
}

a:hover; .light a:hover {
	color: var(--flexoki-600);
}
.dark a:hover {
	color: var(--flexoki-500);
}

#container {
	width: 800px;
	margin: auto;
	max-width: 100%;
}
header {
	margin-bottom: 1em;
}
header img {
	max-width : 100%;
}
nav {
	text-align: center;
}
nav .link {
}
nav .link.active {
	text-decoration: none;
}
nav .flag img {
	height: 1em;
	opacity: 0.6;
}
nav .flag.active img, .light nav .flag.active img {
	border-color: var(--flexoki-500);
	border-width: 3px;
	border-style: solid;
	opacity: 1;
}
.dark nav .flag.active img {
	border-color: var(--flexoki-600);
}
nav .lightdark {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}
nav .lightdark.active {
	border-color: var(--flexoki-500);
	border-width: 3px;
	border-style: solid;
}
.dark nav .lightdark.active {
	border-color: var(--flexoki-600);
}
#TitleImage, .light #TitleImage {
	background-image: url("../img/title-dark.png");
	width: 100%;
	max-width: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 1em;
	margin-bottom: 1em;
}
#ThemeLightDark, .light #ThemeLightDark {
	background-image: url("img/light-dark/theme-light-dark-light.svg");
}
#ThemeLight, .light #ThemeLight {
	background-image: url("img/light-dark/weather-sunny-light.svg");
}
#ThemeDark, .light #ThemeDark {
	background-image: url("img/light-dark/weather-night-light.svg");
}
.dark #ThemeLightDark {
	background-image: url("img/light-dark/theme-light-dark-dark.svg");
}
.dark #ThemeLight {
	background-image: url("img/light-dark/weather-sunny-dark.svg");
}
.dark #ThemeDark {
	background-image: url("img/light-dark/weather-night-dark.svg");
}
.dark #TitleImage {
	background-image: url("../img/title-light.png");
}
.ListItem, .light .ListItem {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	background-color: var(--flexoki-paper);
}
.dark .ListItem {
	background-color: var(--flexoki-black);
}
.ListItem a, .light .ListItem a {
	display: block;
	text-decoration: none;
	color: var(--flexoki-600);
	font-size: 1.5em;
	height: 3em;
	margin: auto;
}
.dark .ListItem a {
	color: var(--flexoki-500);
}
.ListItem a:hover, .light .ListItem a:hover {
	color: var(--flexoki-black);
	background-color: var(--flexoki-150);
}
.dark .ListItem a:hover {
	color: var(--flexoki-200);
	background-color: var(--flexoki-800);
}
.ListItem img {
	vertical-align: middle;
	margin: 0.5em 0.5em 0.5em 0.5em;
	max-width: 2em;
	max-height: 2em;
	height: 100%;
}
footer, .light footer {
	text-align: center;
	margin-top: 1em;
	border-top-width: 1px;
	border-top-color: var(--flexoki-500);
	border-top-style: solid;
}
.dark footer {
	border-top-color: var(--flexoki-600);
}
footer .link {
}
.wip {
	text-align: center;
}
@media (prefers-color-scheme: dark) {
	#ThemeLightDark {
		background-image: url("img/light-dark/theme-light-dark-dark.svg");
	}
	#ThemeLight {
		background-image: url("img/light-dark/weather-sunny-dark.svg");
	}
	#ThemeDark {
		background-image: url("img/light-dark/weather-night-dark.svg");
	}
	#TitleImage {
		background-image: url("../img/title-light.png");
	}
	body {
		background-color: var(--flexoki-950);
		color: var(--flexoki-200);
	}
	a {
		color: var(--flexoki-200);
	}
	a:hover {
		color: var(--flexoki-500);
	}
	nav .flag.active img {
		border-color: var(--flexoki-600);
	}
	nav .lightdark.active {
		border-color: var(--flexoki-600);
	}
	.ListItem {
		background-color: var(--flexoki-black);
	}
	.ListItem a {
		color: var(--flexoki-500);
	}
	.ListItem a:hover {
		color: var(--flexoki-200);
		background-color: var(--flexoki-800);
	}
	footer {
		border-top-color: var(--flexoki-600);
	}
}