* { 
	margin: 0; padding: 0; 
	box-sizing: border-box; 
	--darkGrey: #1f1f1f;
	--darkerGrey: #181818;
	--blueGrey: #577681;
	--blue: #2d50a2;
	--lightbrown: #b78553;
	--redbrown: #b0836c;
	--gold: #fbb416;
	--aqua: #a9b6b5;
	--white: #d1d1d1;
}

body {
	background: url("../image/sky.jpg") no-repeat; background-position: center; background-size: cover; background-attachment: fixed;
	color: var(--white);
	text-align: center;
}

header {
	width: 100vw; height: 10vh;
	padding: 15px 30px;
	position: sticky; top: 0;
	background-color: var(--darkerGrey);
	border-bottom: 1px solid var(--blueGrey);
	display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;
}
header h1 {	color: var(--lightbrown) }
header p { color: var(--redbrown) }
div.icon {
	height: 100%; aspect-ratio: 1/1;
	background: url("../icon/favicon.png") no-repeat; background-position: center; background-size: contain;
}

div#contentContainer {
	width: 100vw; overflow-y: scroll;
}

section {
	width:100%; min-height: 100px;
	display: flex; justify-content: center; align-items: center;
	color: var(--white);
	border-top: 1px solid var(--blueGrey); border-bottom: 1px solid var(--blueGrey);
}
section:nth-of-type(odd) {	background-color: var(--blueGrey); color: var(--darkGrey) }
section:nth-of-type(even) {	background-color: var(--darkGrey); color: var(--white) }
section:first-of-type { background: transparent }
section > div {	
	width: 800px; max-width: 100%; padding: 10px;
	display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; 
}
section > div.column { flex-flow: row nowrap } section > div.column > div { width: 50% };
section h1 { color: var(--redbrown) }
section p {	font-size: 1.2em; color: inherit }


footer {
	width: 100vw; max-height: 5vh;
	position: sticky; bottom: 0;
	padding: 15px;
	background-color: var(--darkerGrey);
	border-top: 1px solid var(--blueGrey);
	color: var(--blueGrey);
}