html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #ccc;
	font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
	font-size: normal;
	font-weight: normal;
}
body.dark {
	color: #eee;
	background-color: #000;
}

.center-panel {
	position: relative;
	min-width: 320px;
	max-width: 1024px;
	padding: 16px 0px;
	margin: 0 auto;
	background-color: #eee;
}

.head-item {
	width: 90%;
	margin: 0 auto;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 500;
}

.center-item {
	display: block;
	width: 90%;
	margin: 0 auto;
}

.center-sticky-item {
	display: block;
	position: -webkit-sticky;
	position: sticky;
	z-index: 15;
	top: 0;
	width: 90%;
	padding: 12px;
	margin: 0 auto;
	text-align: center;
	background-color: #ddd;
	border-radius: 7px;
	box-shadow: 1px 5px 12px #888;
}

#offer-part1 {
	display: none;
	color: #800;
	font-weight: bold;
}
#offer-more {
	display: none;
	color: #800;
	text-decoration: underline;
	cursor: pointer;
}
#offer-more:hover {
	color: #111;
}
#offer-part2 {
	display: none;
	color: #800;
}

#charts-panel {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
}

.chart {
	display: inline-block;
	min-width: 46%;
	padding: 8px 16px 0px 0px;
	margin: 0;
	background-color: #eee;
	box-shadow: 1px 3px 7px #999;
}

#footer {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-items: center;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #def;
	background-color: #236;
	border-top: 8px solid #125;
}

#foot-left {
	/*flex: 1 0;*/
	display: inline-block;
	padding: 24px;
}

#foot-center {
	display: inline-block;
	padding: 24px;
	text-align: center;
}

#foot-right {
	/*flex: 1 0;*/
	display: inline-block;
	padding: 24px;
}

.code-block {
	position: relative;
	color: #ddd;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
.code-block > .toolbar {
	top: 0.4em;
	right: 1.2em;
	color: #ccc;
}

@font-face {
	font-family: 'Roboto';
	src: url('fonts/Roboto-Medium-X.ttf');
}

/* Flexible layout */
@media only screen and (orientation: landscape) and (min-width: 1700px) {
	#center-panel {
		max-width: 1280px;
	}
	.chart {
		min-width: 30.4%;
	}
}

@media only screen and (orientation: portrait) {
	#center-panel {
		max-width: 800px;
	}
	.chart {
		min-width: 90%;
	}
}