html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-width: 640px;
	background-color: LightBlue;
}

	/* Page title top header */
header {
	background-color: LightGreen;
	max-width: 1080px;
	min-width: 640px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
div.page-title {
	margin: auto;
	text-align: center;
}
h1 {
	margin: 0;
	font-size: 3em;
}

div.bg-img-headerL {
	background-image: url("../img/index/waterfall-250px.gif");
	background-repeat: no-repeat;
	padding-left: 250px;
	padding-right: 0;
	margin-right: auto;
}
div.bg-img-headerR {
	background-image: url("../img/index/waterfall-250px.gif");
	background-repeat: no-repeat;
	padding-left: 0;
	padding-right: 250px;
	margin-left: auto;
}

	/* Secondary title area */
div.article-heading {
	text-align: center;
	background-color: Lightblue;
	padding-top: 15px;
	padding-bottom: 15px
}
h2.page-name {
	margin: 0;
	padding-bottom: 10px;
}

div.bg-img {
	background-image: url("../img/index/blue-and-white-stripe.png");
	background-repeat: repeat-x;
	padding-top: 12.5px;
	padding-bottom: 12.5px;
}

	/* Top header grid layout */
.page-title { grid-area: page-title; }
.bg-img-headerL { grid-area: bg-img-headerL; }
.bg-img-headerR { grid-area: bg-img-headerR; }

header {
	display: grid;

	grid:
	'bg-img-headerL page-title page-title bg-img-headerR';
}

	/* Main grid layout */
.header { grid-area: header; }
.article-heading { grid-area: Aheading; }
.main { grid-area: main; }
.sidebar-left { grid-area: menuL; }
.sidebar-right { grid-area: menuR; }
.footer { grid-area: footer; }

div.body {
	display: grid;

	grid:
	'header header header header'
	'Aheading Aheading Aheading Aheading'
	'menuL main main menuR'
	'footer footer footer footer';

	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

	/* Body text div */
div.bodyText {
	padding: 15px;
	border-style: solid;
	border-width: 2px;
	min-width: 300px;
	background-color: white;
}

	/* Sidebars */
div.sidebar-left {
	background-image: url("../img/index/waterfall-repeating.gif");
	width: 150px;
	height: 100%;
	background-color: #111;
}
div.sidebar-text-left {
	color: white;
}

div.sidebar-right {
	background-image: url("../img/index/waterfall-repeating.gif");
	width: 150px;
	background-color: #111;
}

div.sidebar-text-right {
	color: white;
	top: 0; /* Stay at the top */
 	position: sticky;
}

	/* Nav bar */
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

nav li {
	background-color: #04AA6D;
	width:  100px;
	height: 50px;
	margin: 25px;
	border-radius: 50%;
	color: white;
}
nav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 15px 15px;
	text-decoration: none;
}
nav li:hover:not(.active) {
	background-color: #000000;
}

li.active {
	background-color: #40E0D0;
}
a.active {
	color: black;
}

	/* Monk */
div.monk {
	position: fixed;
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 250px;
}
img.emoji-1 {
	display: block;
	margin: auto;
}

	/* Footer images */
	/* well, this worked 7 years ago https://old.reddit.com/r/web_design/comments/3jw1p6/delivering_pixel_art_responsively/ */
div.bg-footer {
	height: 60px;

	background-image: url("../img/index/wheat.gif"), url("../img/index/dirt.png"), url("../img/index/waterfall-repeating.gif");

	background-position: top, bottom, center;
	background-repeat: repeat-x, repeat-x, repeat-x;
	background-size: 35px 35px, 35px 35px, 150px;

	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;			/* Firefox */
	image-rendering: -o-crisp-edges;			/* Opera */
	image-rendering: -webkit-optimize-contrast;	/* Chrome */
	image-rendering: pixelated;					/* Chrome */
	image-rendering: optimize-contrast;			/* CSS3 Proposed */
	-ms-interpolation-mode: nearest-neighbor;	/* IE8+ */
	image-rendering: pixelated;
}