body {
	margin: 0;
	padding: 0;
	font-family: verdana;
	line-height: 150%;
	color: #555566;
	background-color: #dddddd;
}

h1, h2 {
	line-height: 125%;
}

#banner {
	margin: 36px 0;
	height: 200px;
	background: url('banner.png') center; /*image is nearly 10000 pixels wide because repeat-X didn't want to cooperate and thanks to PNG compression it only added 1.5 kbytes*/
	outline-width: 36px;
	outline-style: solid;
	outline-color: #555566;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	background-size: auto 100%;
}

h2 {
	text-align: center;
}

#intro {
	padding: 0.5em 15% 0;
}

hr {
	margin: 1em 0;
}

a, a:link { /*link colors and underlining*/
	text-decoration: none;
	color: #991144;
	font-weight: bold;
}

a:hover, a:active {
	text-decoration: underline;
	color: #441199;
	font-weight: bold;
}

a:visited {
	color: #449911;
	font-weight: bold;
}

/*
fix banner on narrow displays
note that this needs the device-pixel-ratio Javascript described in ../gallery.css
*/
@media(max-width: 450px), (max-width: 39em) {
	#banner {
		margin: calc(36px / var(--device-pixel-ratio)) 0;
		height: calc(200px / var(--device-pixel-ratio));
		outline-width: calc(36px / var(--device-pixel-ratio));
	}
}