html {
	font-family: "Trebuchet MS", sans-serif;
	font-size: 18px;
	background: #433;
	color: white;
	overflow-x: hidden;
	overflow-y: auto;
}

body {
	margin: 0;
}

h1 {
	background: #877;
	margin: 0;
	padding: 0.5em;
	font-size: 18px;
	text-align: center;
	color: #fdd
}

.navBarText {
	background: #655;
	font-size: 12px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
	line-height: 1.2;
}

.navBarText > li {
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
}

.navBarText li ul {
	display: none;
	position: absolute;
	list-style-type: none;
	margin: 0;
	padding: 0;
	top: 100%;
	background: #655;
	z-index: 1000;
	min-width: 100%;
}

.navBarText li:hover > ul, .navBarText li:active > ul {
	display: block;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.75);
}

.navBarText a {
	padding: 0.75em 2vw;
	display: inline-block;
}

.navBarText li ul a {
	display: block;
}

a {
	color: #f98;
	text-decoration: none;
	font-weight: bold;
}

a:visited {
	color: #FFCCCC;
}

.navBarText a:hover {
	background: #877;
}

a[href]:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.content {
	margin: auto;
	padding: 1em;
	max-width: 70ch;
}

.centerContainer {
	display: table; /* hack to make container the same width as content */
	position: relative;
	left: 50%; /* align left edge of centerContainer with center of parent */
}

.centerContainer > * {
	position: relative;
	left: -50%; /* align center of content with left edge of centerContainer */
}

img {
	max-width: 100vw;
}