:root {
	/*
	 * Font Families
	 */

	/* Narrow Sans-Serif */

	--fontNarrowSansSerif: "Liberation Sans", "Nimbus Sans L", "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Wide Sans-Serif */

	--fontWideSansSerif: "DejaVu Sans", "Bitstream Vera Sans", Geneva, Verdana, sans-serif;

	/* Narrow Serif */

	--fontNarrowSerif: "Liberation Serif", "Nimbus Roman No 9 L",  "FreeSerif", "Hoefler Text", Times, "Times New Roman", serif;

	/* "Antique" Serif */

	--fontAntiqueSerif: "Bitstream Charter", "URW Palladio L", Palatino, "Palatino Linotype", "Book Antiqua", serif;

	/* Wide Serif */

	--fontWideSerif: "DejaVu Serif", "Bitstream Vera Serif", "Century Schoolbook L", "Lucida Bright", Georgia, serif;

	/* Monospace */

	--fontMonospace: "Liberation Mono", "Nimbus Mono L", "FreeMono", "DejaVu Mono", "Bitstream Vera Mono", "Lucida Console", "Andale Mono", "Courier New", monospace;
}

html {
	min-height: 100%;
}

body {
	background-color: hsl(275, 25%, 15%);
	color: hsl(90, 40%, 90%);
	margin: 0.25rem;
	padding: 0;
	font-family: var(--fontWideSansSerif);
}

h1, h2, h3, h4, h5, h6 {
        font-family: var(--fontNarrowSansSerif);
}

body > * {
	margin: 0.75rem;
	padding: 0.25rem;
	width: 40rem;
	max-width: calc(100% - (2 * 0.75rem) - (2 * 0.25rem));
	background-color: hsl(275, 35%, 25%);
	border: 0.25rem outset hsl(275, 35%, 95%);
	border-radius: 0.375rem;
	box-shadow: 0.125rem 0.125rem 0.25rem hsl(275, 25%, 5%);
}

body > header, body > footer {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

body > nav {
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: inherit;
	border: none;
	box-shadow: none;
}

body > nav > ul {
	display: flex;
	margin: 0;
	padding: 0;
	flex-flow: row wrap;
	justify-content: end;
	align-items: center;
}

li.button {
	list-style-type: none;
	margin: 0;
	padding: 0.25rem;
	background-color: hsl(240, 35%, 35%);
	border: 0.25rem outset hsl(275, 35%, 95%);
	border-radius: 0.375rem;
}

li.button > a {
	color: hsl(90, 40%, 90%);
	text-decoration: none;
}

li.button:hover {
	font-size: larger;
}

li.button-active {
	background-color: hsl(0, 35%, 25%);
}

body > main {
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0.125rem 0.125rem 0.25rem hsl(275, 25%, 5%);
}

body > footer {
	font-size: small;
}

main > * {
	margin: 0;
	padding: inherit;
}

#site-title {
	font-family: var(--fontWideSansSerif)
	font-style: bold;
	text-shadow: 0.125rem 0.125rem 0.25rem hsl(275, 25%, 5%);
}

#site-banner {
	width: 38rem;
	max-width: 75vmin;
}

#tagline {
	font-family: var(--fontNarrowSerif);
	font-style: italic;
}

img {
	/*
	border: 0.25rem outset hsl(275, 35%, 95%);
	*/
	border-radius: 0.25rem;
	box-shadow: 0.125rem 0.125rem 0.25rem hsl(275, 25%, 5%);
}

img.art {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 38rem;
	max-width: 75vmin;
}

img.profile_picture {
	display: block;
	float: right;
	margin-right: 5%;
	width: 15rem;
	max-width: 37.5vmin;
	border-radius: 50%;
}

a:link {
	color: hsl(240, 55%, 80%);
}

a:visited {
	color: hsl(0, 55%, 75%);
}

a:link:active, a:visited:active {
	color: hsl(90, 55%, 70%);
}

a.site-header {
	color: inherit;
	text-decoration: none;
}