/* Reset */
* {
	padding: 0;
	margin: 0;
}

/* Globals */
body {
        box-sizing: border-box;
        height: 100%;
        background-color: #232323;
        background-image: url('/img/bg.jpg');
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
        font-family: monospace;
        color: rgba(224, 238, 255, 0.94);
        margin: 0;
        padding: 0;
}
a {
	color: burlywood;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	transition-duration: 0.15s, 0.15s, 0.15s;
	transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
	transition-delay: 0s, 0s, 0s;
	transition-property: color, background-color, border-color;
	text-decoration: none;
}
a:hover {
	color: bisque;
}
h1,h2 {
	margin: 12px 0;
	padding: 0 0 7px;
	border-bottom: 1px solid #4b4a49;
	font-weight: 600;
	color: antiquewhite;
}
h3,h4,h5,h6 {
	margin: 12px 0;
	padding: 0 0 3px;
}
h3,h4 {
	color: khaki;
}
h5,h6 {
	font-variant: all-small-caps;
	color: slategrey;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.1em; }
p { margin: 0 0 21px; }
br { margin: 0 0 5px; }
hr { margin: 47px 10% 61px; }
img { max-width: 90%; }

/* Page Layout and Responsive Tweaks */
#wrapper {
	display: grid;
	grid-template-columns: 25% 75%;
	width: 100%;
	gap: 0;
	min-height: 100vh;
	background-color: rgba(0,0,0,0.74);
}
#navigation,
#content {

}
#navigation {
	background-color: #111;
	border-right: 1px solid #232222;
}
#content {
}
#content-inner {
	padding: 21px 28px 48px;
}


/* Navigation Pane */
#nav-inner {

}
#navigation h4 {
	padding: 21px 7px 7px;
	margin: 0;
	font-size: 1.06em;
	color: slategrey;
	border-bottom: 1px solid #1c1c1c;
}
#navigation p {
	font-size: 14px;
	margin: 0;
	padding: 6px 10px 7px;
}
#navigation a {
	display: block;
	width: 100%;
	background-color: #0a0a0a;
	border-bottom: 1px solid #1c1c1c;
}
#navigation a:hover {
	background-color: #0d0d0d;
}
#navigation #logo {
	clear: both;
	text-align: center;
	margin: 21px 0 0;
}
#navigation #logo a {
	background-color: transparent;
	border-bottom: 0;
}
#navigation #logo img { border: 0; }
#navigation #logo p {
	font-size: 28px;
	line-height: 14px;
	font-weight: 700;
	font-variant: small-caps;
	padding: 0;
}
#navigation #social {
	padding: 0 14px;
}
#navigation #social a {
	color: #555;
	margin: 0 7px 14px;
}
#navigation #social a:hover { color: firebrick; }

/* Content Pane */
#content {
	margin: 0 0 47px;
}
.content {
	margin: 24px auto 74px;
	padding: 0 0 47px;
}
#content p {
	text-align: justify;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}
#content p.download {
	font-size: 21px;
	font-variant: all-small-caps;
	text-align: right;
	font-weight: 700;
}
#content p.footnote {
	font-size: 18px;
}
#content ul {
	margin-bottom: 2em;
}
#content li {
	margin-left: 28px;
	line-height: 1.5em;
}
#content pre {
	font-size: 0.9em;
	line-height: 1.5em;
	margin-bottom: 2em;
	padding: 7px 12px;
	border: 1px solid #1c1c1c;
	border-radius: 3px;
	background-color: rgba(12,12,12,0.74);
}
#content code {
	font-size: 0.9em;
	border-radius: 3px;
	border: 1px solid #1c1c1c;
	background-color: rgba(12,12,12,0.74);
}
#content pre code {
	border: 0;
	background-color: transparent;
}
#content img {
	border: 3px double #777;
	margin: 0 auto 21px;
	max-width: 98.7%;
	display: block;
}
@media (min-width: 768px) {
	#content img.img-center {
		margin: 0 auto 21px;
	}
	#content img.img-left {
		float: left;
		max-width: 40%;
		margin: 0 21px 21px 0;
	}
	#content img.img-right {
		float: right;
		max-width: 40%;
		margin: 0 0 21px 21px;
	}
}