body {
	padding:				5vw;
	font-family:			'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:			1.5em;
	margin:				0;
	overflow-x:			hidden;
	}

h1 {
	font-size:			calc(1.5em + 1vw);
	line-height:			1.2em;
	font-weight:			bold;
	margin:				5vw 0 0 0;
	}

.flexbox {
	display:				flex;
	flex-direction:		row;
	flex-wrap:			wrap;
	justify-content:	flex-start;
	}

a {
	text-decoration:	none;
	}

hr {
	height:				1px;
	border:				0;
	margin:				1em -5vw 2em -5vw;
	}

h2 {
	font-size:			0.85em;
	text-transform:		uppercase;
	letter-spacing:		0.3em;
	}

.progress-bar {
	margin-top:			0.8em;
	height:				0.4em;
	border-radius:		0.2em;
	}

.progress {
	height:				0.4em;
	border-radius:		0.2em;
	}

.big_subtitle {
	text-transform:		uppercase;
	letter-spacing:		0.3em;
	font-size:			0.7em;
	}


@media screen and (min-width: 768px) {

	div.big_container {
		border-radius:		1em;
		width:				100%;
		margin-top:			3vw;
		margin-bottom:		3vw;
	}

	h1.big_value {
		text-align:			center;
		width:				100%;
		font-size:			calc(1.5em + 10vw);
		margin:				5vw 0 5vw 0;
		}

	p.big_subtitle {
		text-align:			center;
		width:				100%;
		margin:				-5vw 0 5vw 0;
		}

	.menu a {
		border-radius:		0.5em;
		margin-right:		0.5em;
		margin-bottom:		0.5em;
		padding:			0.5em 0.9em;
		display:			inline-block;
		-webkit-transition:	box-shadow 300ms, transform 300ms, background-color 300ms;
		transition:			box-shadow 300ms, transform 300ms, background-color 300ms;
		}

	.menu a:hover {
		transform:			scale(1.05, 1.05);
		}

	.menu a.current:hover {
		transform:			none;
		}

	.value {
		font-size:			1.5em;
		margin-bottom:		0;
		margin-top:			0.2em;
		}

	.name {
		margin-bottom:		0;
		margin-top:			0;
		}

	.comment {
		font-size:			0.7em;
		line-height:		1.3em;
		}

	.one-value {
		padding:			2em;
		width:				calc(10em + 11vw);
		margin-right:		1em;
		margin-bottom:		1em;
		border-radius:		0.5em;
		-webkit-transition:	box-shadow 300ms, border 300ms, transform 300ms, background-color 300ms;
		transition:			box-shadow 300ms, border 300ms, transform 300ms, background-color 300ms;
		}

	.one-value:hover {
		transform:			scale(1.15, 1.15);
		}

	.chart-container {
		display:			block;
		width:				calc(14em + 11vw);
		margin-left:		-2em;
		margin-right:		-2em;
		margin-bottom:		-2em;
		padding:			0;
		height:				50px;
		}

	.chart-container-pressure, .chart-container-wind {
		width:				90vw;
		height:				200px;
		margin-bottom:		5vw;
		}

	.footer {
		margin-top:			2em;
		}

	.index .index_menu_double {
		display:				inline-block;
		width:				200px;
		text-align:			center;
		padding:				1em 0;
		border-radius:		0.5em;
		margin-bottom:		1em;
	}

	.index .index_menu_double .value {
		font-size:			1.5em;
	}

	.index .index_menu_double .subtitle {
		font-size:			0.8em;
	}

	.index .index_menu_single {
		display:				inline-block;;
		width:				200px;
		text-align:			center;
		padding:				1em 0;
		border-radius:		0.5em;
		margin-bottom:		0.5em;
	}

	.index .index_menu_single .value {
		font-size:			1em;
	}

}

@media screen and (max-width: 767px) {

	div.big_container {
		border-radius:		1em;
		width:				100%;
		margin-top:			3vw;
		margin-bottom:		3vw;
	}

	h1.big_value {
		text-align:			center;
		width:				100%;
		font-size:			calc(1.5em + 20vw);
		margin:				5vw 0 5vw 0;
		}

	p.big_subtitle {
		text-align:			center;
		width:				100%;
		margin:				-5vw 0 5vw 0;
		}

	.menu {
		position:			fixed;
		bottom:				1em;
		left:				1em;
		right:				1em;
		display:				block;
		padding:				0.5em;
		border-radius:		1.4em;
		}

	.menu a {
		padding:				0.5em 1em;
		display:				inline-block;
		margin:				0.2em;
		border-radius:		0.6em;
		}

	.value {
		font-size:			1.5em;
		margin-bottom:		0;
		margin-top:			0.2em;
		}

	.name {
		margin-bottom:		0;
		margin-top:			0;
		}

	.comment {
		font-size:			0.7em;
		line-height:		1.3em;
		}

	.one-value {
		width:				90vw;
		border-radius:		0;
		margin-bottom:		1em;
		}

	.chart-container {
		width:				100vw;
		margin-right:		-5vw;
		margin-left:		-5vw;
		padding:				0;
		height:				calc(2em + 2vw);
		}

	.chart-container-pressure, .chart-container-wind {
		width:				100vw;
		margin-right:		-5vw;
		margin-left:		-5vw;
		height:				200px;
		}

	.footer {
		margin-top:			5em;
		margin-bottom:		10em;
		}

	.index .index_menu_double {
		display:				inline-block;
		width:				calc(49%);
		text-align:			center;
		padding:				1em 0;
		border-radius:		0.5em;
		margin-bottom:		1em;
	}

	.index .index_menu_double .value {
		font-size:			1.5em;
	}

	.index .index_menu_double .subtitle {
		font-size:			0.8em;
	}

	.index .index_menu_single {
		display:				block;
		text-align:			center;
		padding:				1em 0;
		border-radius:		0.5em;
		margin-bottom:		0.5em;
	}

	.index .index_menu_single .value {
		font-size:			1em;
	}

}

@media screen and (prefers-color-scheme: light) {

	body {
		background-color:	#ffffff;
		color:				#000000;
		}

	.yellow {
		color:				#FFA500;
		}

	.red {
		color:				#f03e3e;
		}

	hr {
		background-color:	rgba(0,0,0,0.1);
		}

	.progress-bar {
		background:			#f0f0f0;
		}

	.progress {
		background:			#F75F4E;
		}

	.zero .progress {
		background:			#d0d0d0;
		}

	.zero {
		color:				#d0d0d0;
		}

	div.big_container {
		border:				1px solid #f0f0f0;
	}

}

@media screen and (min-width: 768px) and (prefers-color-scheme: light) {

	.menu a {
		color:				#000000;
		background:			#f0f0f0;
		box-shadow:			0px 0px 0px rgba(0,0,0,0.3);
		}

	.menu a:hover {
		color:				#000000;
		background:			#f0f0f0;
		box-shadow:			0px 5px 10px rgba(0,0,0,0.2);
		}

	a.current {
		color:				#ffffff;
		background:			#478AF2;
		box-shadow:			0px 10px 20px rgba(71,138,242,0.7);
		}

	a.current:hover {
		color:				#ffffff;
		background:			#478AF2;
		box-shadow:			0px 10px 20px rgba(71,138,242,0.7);
		}

	a {
		color:				#478AF2;
		}

	.comment {
		color:				#c0c0c0;
		}

	.one-value {
		background:			#ffffff;
		border:				1px solid rgba(0,0,0,0.1);
		}

	.one-value:hover {
		background:			#ffffff;
		border:				1px solid rgba(255,255,255,0.0);
		box-shadow:			0 20px 50px rgba(0,0,0,0.1);
		}

	.index .index_menu_double {
		background:			rgba(40,40,40,0.1);
		}

	.index a {
		color:				#000000;
		}

	.index .index_menu_single {
		background:			rgba(40,40,40,0.1);
		}

}

@media screen and (max-width: 767px) and (prefers-color-scheme: light) {

	.menu {
		background:			rgba(250,250,250,0.7);
/* 		box-shadow:			0px 0px 30px rgba(0,0,0,0.1); */
		-webkit-backdrop-filter:blur(15px);
		backdrop-filter:		blur(15px);
		}

	.menu a {
		color:				#000000;
		background:			none;
		}

	a.current {
		color:				#ffffff;
		background:			#478AF2;
		box-shadow:			0px 10px 20px rgba(71,138,242,0.7);
		}

	a {
		color:				#478AF2;
		}

	.comment {
		color:				#c0c0c0;
		}

	.index .index_menu_double {
		background:			rgba(40,40,40,0.1);
		}

	.index a {
		color:				#222222;
		}

	.index .index_menu_single {
		background:			rgba(40,40,40,0.1);
		}

}

@media screen and (prefers-color-scheme: dark) {

	body {
		background-color:	#000000;
		color:				#ffffff;
		}

	.yellow {
		color:				#FFA500;
		}

	.red {
		color:				#f03e3e;
		}
	hr {
		background-color:	rgba(255,255,255,0.2);
		}

	.progress-bar {
		background:			#303030;
		}

	.progress {
		background:			#F75F4E;
		}

	.zero .progress {
		background:			#666666;
		}

	.zero {
		color:				#666666;
		}

	div.big_container {
		background:			rgb(30,30,30);
	}

}

@media screen and (min-width: 768px) and (prefers-color-scheme: dark) {

	.menu a {
		color:				#ffffff;
		background:			#303030;
		}

	.menu a:hover {
		background:			#478AF2;
		}

	a.current {
		color:				#ffffff;
		background:			#478AF2;
		}

	a {
		color:				#478AF2;
		}

	.comment {
		color:				#c0c0c0;
		}

	.one-value {
		background:			#000000;
		border:				1px solid rgba(255,255,255,0.2);
		}

	.one-value:hover {
		background:			#202020;
		border:				1px solid rgba(255,255,255,0.0);
		box-shadow:			0 20px 50px rgba(0,0,0,0.1);
		}

	.index .index_menu_double {
		background:			rgba(40,40,40,0.6);
		}

	.index a {
		color:				#ffffff;
		}

	.index .index_menu_single {
		background:			rgba(40,40,40,0.6);
		}

}

@media screen and (max-width: 767px) and (prefers-color-scheme: dark) {

	.menu {
		background:			rgba(40,40,40,0.6);
		-webkit-backdrop-filter:blur(15px);
		backdrop-filter:		blur(15px);
		}

	.menu a {
		color:				#ffffff;
		background:			none;
		}

	a.current {
		color:				#ffffff;
		background:			#478AF2;
		box-shadow:			0px 10px 20px rgba(71,138,242,0.7);
		}

	a {
		color:				#478AF2;
		}

	.comment {
		color:				#c0c0c0;
		}

	.index .index_menu_double {
		background:			rgba(40,40,40,0.6);
		}

	.index a {
		color:				#ffffff;
		}

	.index .index_menu_single {
		background:			rgba(40,40,40,0.6);
		}

}