/* © 2015, 2016 Rouven Spreckels <n3vu0r@qu1x.org> */

/*:root {
	--a-color: #777981;
	--img-padding: 1px;
}

@viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
	min-zoom: 1.0;
	user-zoom: fixed;
}
*/

/* no centering jumps when navigating */
html {
	overflow-y: scroll;
	height: 100%;
}

/* no trailing space for image links */
a {
	display: inline-block;
}
a img {
	display: block;
}

/* sticky footer */
body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
main {
	flex: 1;
}

/* centered content and limited width */
body {
	padding: 0 2%;
}
body > * {
	z-index: 1;
	margin: 0 auto;
	max-width: 65ch;
}
#container {
	z-index: 0;
	max-width: 100%;
}

/* containers */
header {
	margin-top: 1em;
}
nav {
	margin: 0 auto;
}
main {
	margin-top: 2em;
}
footer {
	margin: 0 auto;
	margin-top: 2em;
	margin-bottom: 1em;
}

/* text */
@font-face {
	font-family: LobsterTwo;
	src: url(/font/LobsterTwo-Regular.woff2);
}
@font-face {
	font-family: LobsterTwo;
	font-weight: bold;
	src: url(/font/LobsterTwo-Bold.woff2);
}
@font-face {
	font-family: LobsterTwo;
	font-style: italic;
	src: url(/font/LobsterTwo-Italic.woff2);
}
@font-face {
	font-family: LobsterTwo;
	font-weight: bold;
	font-style: italic;
	src: url(/font/LobsterTwo-BoldItalic.woff2);
}
/* text */
@font-face {
	font-family: FiraGO;
	src: url(/font/FiraGO-Regular.woff2);
}
@font-face {
	font-family: FiraGO;
	font-weight: bold;
	src: url(/font/FiraGO-Bold.woff2);
}
/* text */
@font-face {
	font-family: Fira Mono;
	src: url(/font/FiraMono-Medium.woff2);
}
@font-face {
	font-family: Fira Mono;
	font-weight: bold;
	src: url(/font/FiraMono-Bold.woff2);
}
@font-face {
	font-family: Fira Mono;
	font-style: italic;
	src: url(/font/FiraMono-Medium.woff2);
}
@font-face {
	font-family: Fira Mono;
	font-weight: bold;
	font-style: italic;
	src: url(/font/FiraMono-Bold.woff2);
}
@font-face {
	font-family: Fira Mono;
	font-style: oblique;
	src: url(/font/FiraMono-Medium.woff2);
}
@font-face {
	font-family: Fira Mono;
	font-weight: bold;
	font-style: oblique;
	src: url(/font/FiraMono-Bold.woff2);
}
body {
	text-align: center;
	font-family: Fira Mono;
	line-height: 1.5em;
	color: #777981;
	background-color: white;
}
article {
	text-align: left;
}


/* unordered lists */
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	line-height: 2em;
}
ul li:before {
	content: "» ";
}

/* unordered navigation lists */
nav ul {
	text-align: center;
}
nav ul li {
	display: inline;
}

/* unordered main lists */
main ul {
	margin-top: 1.5em;
	text-align: left;
}

/* headlines */
h1 {
	margin: .5em 0;
	font-size: 2.25em;
	color: #515151;
}
h2 {
	margin: 1em 0;
	font-size: 1.5em;
	color: #515151;
}
h3 {
	margin-top: 2em;
	margin-bottom: 1.5em;
}

/* paragraphs */
p.left {
	float: left;
	margin-right: 3ch;
}
p.right {
	float: right;
}
nav p {
	margin: .2em 0;
}
main p {
	margin: 2em auto;
	text-align: justify;
	line-height: 1.5em;
}
footer p {
	margin: 0;
}

/* text links */
a {
	color: /*var(--a-color)*/ #777981;
	text-decoration: none;
	transition: color .2s ease-out;
}
a:hover {
	color: #dadada;
}

/* header images */
header img {
	display: block;
}

/* images, frames */
img, iframe {
	padding: /*var(--img-padding)*/ 1px;
	border: /*var(--img-padding)*/ 1px dashed /*var(--a-color)*/ #777981;
	transition: border-color .2s ease-out;
}
img:hover, iframe:hover {
	border-color: #dadada;
}

/* floating image links */
p {
	overflow: auto;
}
a.left {
	float: left;
	margin-right: 1.5ch;
}
a.right {
	float: right;
	margin-left: 1.5ch;
}
a.left, a.right {
	clear: both;
	margin-top: .5em;
}

.icon, .logo {
	float: left;
	margin-top: .2em;
	margin-right: 1em;
}

.list {
	overflow: hidden;
	font-size: .9em;
}

.list dt {
	clear: both;
	float: left;
	font-weight: bold;
}

.list dd {
	float: right;
	text-align: right;
	margin-left: 2ch;
}

.list dd .hide {
	display: none;
}