:root {
	color-scheme: light dark;
}
body, body.light {
	background-image: url('img/fond.jpg');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;
	padding-top: 1em;
	padding-bottom: 1em;
    color: #0F0F0F;
}
body.dark {
	background-image: url('img/fond-dark.jpg');
    color: #e0e0e0;
}

#container, .light #container {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	width: 100%;
	background-color: #F0F0F0;
	box-shadow: -6px 0px 10px #111111, 6px 0px 10px #111111, 0px -6px 10px #111111, 0px 6px 10px #111111;
	padding: 1em;
}
.dark #container {
	background-color: #0F0F0F;
	box-shadow: -6px 0px 10px #EEEEEE, 6px 0px 10px #EEEEEE, 0px -6px 10px #EEEEEE, 0px 6px 10px #EEEEEE;
}

header {
	text-align: center;
}

header>p>img {
	border-width: 0px;
	max-width: 100%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

header .flag>img {
	max-height : 1em;
}

header .flag {
	display: block;
	float: right;
	width: 2em;
	text-align: center;
}

header .flag:not(.active) {
	opacity: 0.6;
}

header .flag.active>img {
	border-width: 2px;
	border-style: solid;
	border-color: yellow;
}

header .flag:hover {
	opacity: 1;
}

a, .light a {
	color: #337ab7;
	text-decoration: underline;	
}
.dark a {
	color: #63aae7;
}

a:hover, .light a:hover {
	color: #23527c;
}
.dark a:hover {
	color: #6382ac;
}

article h1, .light article h1 {
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #cccccc;
	color: #323017;
	text-align: center;
}
.dark article h1 {
	border-bottom-color: #333333;
	color: #e0e0e0;
}

article h2, .light article h2 {
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #cccccc;
	color: #323017;
}
.dark article h2 {
	border-bottom-color: #333333;
	color: #e0e0e0;
}

article p>img {
	border-width: 0px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

footer, .light footer {
	margin-top: 1em;
	border-top-style: double;
	border-top-width: 3px;
	border-top-color: #cccccc;
	padding-top: 0.5em;
	text-align: center;
}
.dark footer {
	border-top-color: #333333;
}

.ListItem {
	height: 3em;
	margin: 1em;
}

.ListItem a, .light .ListItem a {
	display: block;
	height: 100%;
	text-decoration: none;
	padding: 0.3em;
	background-color: #fbfbf8;
}
.dark .ListItem a {
	background-color: #1f1f1f;
}

.ListItem a:hover, .light .ListItem a:hover {
	border-style: solid;
	border-width: 5px;
	border-color: #f7f7f4;
}
.dark .ListItem a:hover {
	border-color: #232323;
}

.ListItem img {
	max-width: 3em;
	max-height: 3em;
	height: 100%;
	vertical-align: middle;
}

.download {
	text-align: center;
}

.storebadge img {
	height: 5em;
}

.wip {
	text-align: center;
}
#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");
}
@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");
	}
	body {
		background-image: url('img/fond-dark.jpg');
		color: #e0e0e0;
	}
	#container {
		background-color: #0F0F0F;
		box-shadow: -6px 0px 10px #EEEEEE, 6px 0px 10px #EEEEEE, 0px -6px 10px #EEEEEE, 0px 6px 10px #EEEEEE;
	}
	a {
		color: #63aae7;
	}
	a:hover {
		color: #6382ac;
	}
	article h1 {
		border-bottom-color: #333333;
		color: #e0e0e0;
	}
	article h2 {
		border-bottom-color: #333333;
		color: #e0e0e0;
	}
	footer {
		border-top-color: #333333;
	}
	.ListItem a {
		background-color: #1f1f1f;
	}
	.ListItem a:hover {
		border-color: #232323;
	}
}
.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");
}
nav .lightdark {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-position: center;
	background-size: contain;
	cursor: pointer;
}
nav .lightdark.active {
	border-color: yellow;
	border-width: 3px;
	border-style: solid;
}