* { box-sizing: border-box; }
body {
	background: #000;
	color: #ededed;
	font: 15pt/20pt sans-serif;
	padding: 0;
	margin: 0;
}
.grid-wrapper {
	display: grid;
	grid-template-areas:
     "header"
     "navigation"
     "content"
     "footer";
}

@media only screen and (min-width: 650px)  {
	.grid-wrapper {
		position: absolute;
		top: 10px; left: 10px; right: 10px; bottom: 10px;
		grid-template-columns: auto 250px;
		grid-template-rows: 70px auto 32px;
		grid-template-areas:
			"header   header"
			"content  navigation"
			"footer   footer";
		
	}
}
@media only screen and (min-width: 1000px)  {
	.grid-wrapper {
		position: absolute;
		top: 10px; left: 10px; right: 10px; bottom: 10px;
		grid-template-columns: 300px auto;
		grid-template-rows: 70px auto 32px;
		grid-template-areas:
			"header			content"
			"navigation	content"
			"footer 		content";
		
	}
}
h1,h2,h3,h4,h5,h6 {color: #ffcc79;}
a {color: #BA7E35;}
a:hover {color: #EF9318}
.logo {
	grid-area: header;
	background: #333; margin: 0; padding: 0; }
.logo a {text-decoration:none;}
.logo a:hover {color: #ffcc79;}
.logo img {float:left;}
.logo h1 {margin: 0; padding: 20px 10px;}
.navigation {
	grid-area: navigation;
	list-style:none; background: #222;
}
.navigation ul {
	list-style:none; padding: 0; margin: 0;
}
.navigation h2 { border-bottom: 1px solid #111; margin: 0; padding: 20px 10px;}
.navigation li a { display: block; padding: 10px; text-decoration: none; border-bottom: 1px solid #111;}
.navigation li a:hover {background: #111; border-color: #000; border-width: 0 1px 0 0; }
.content {
	grid-area: content;
	padding: 10pt;
	background: #111;
	overflow-y: auto;
	color: beige;
}
.footer {
	grid-area: footer;
	font-size: 7pt;
	color: #999;
	background: #333;
	padding: 4px 10px;
}