body {
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 0;
	color: #fafafa;
	background: rgba( 0, 0, 0, .9 );
}
header, footer {
	text-align: center;
	padding: 1em;
}
header :link {
	color: #ccc;
}
header :visited {
	color: #777;
}
blockquote {
	font-style: italic;
}
ol {
	margin: 1em 0;
	padding: 0 1em;
	text-transform: center;
	overflow: hidden;
	text-align: center;
}
ol > li {
	list-style-position: inside;
	vertical-align: top;
	padding: 0;
	margin: 2em;
	position: relative;
	display: inline-block;
}
ol > li > h2 {
	display: inline;
}
ol > li > figure {
	display: block;
}
h2 {
	display: inline;
	padding: 0;
	font: 100%/1.5 sans-serif;
	text-align: center;
}
figure {
	text-align: center;
	background: #333;
	color: #fafafa;
	padding: 1em;
	margin: 0;
	box-shadow: .3em .3em 1em rgba( 0, 0, 0, .5 );
	/*max-width: -webkit-min-content;*/
}
img {
	height: 320px;
	width: auto;
	border: none;
}
figcaption {
	font-variant: small-caps;
}

/* lightbox */
:target > figure {
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	background: rgba( 0, 0, 0, .9 );
	margin: 0;
	padding: 2%;
	width: 96%;
	height: 96%;
	z-index: 1;
}
/*:target > figure > img,*/
:target > figure > a > img {
	max-height: 94%;
	max-width: 96%;
	width: auto;
	height: auto;
}

/* nav */
.close {
	position: fixed;
	z-index: 2;
	top: 1%;
	right: 1%;
	border: 1px solid #777;
}
nav {
	text-align: center;
}
nav > ul > li {
	margin: 0 .5em;
	padding: 0;
	display: inline-block;
	vertical-align: baseline;
}
nav > ul > li > a {
	padding: .3em;
	color: #777;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* small screens */
@media (max-width: 65em) {
	ol > li {
		margin: 2em 0;
	}

	img {
		height: auto;
		width: 100%;
	}
}