* {
    margin: 0;
    padding: 0;
	font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2em;
    color: black;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html{
    height: 100%;
}
body{
	height: 100%;
	width: 100%;
}

h1, h2, h3 {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 400;
	color: #445856;
}

h1, .h1, h2, .h2, h3, .h3,
h1 > a, .h1 > a, h2 > a, .h2 > a, h3 > a, .h3 > a {
	text-decoration: none;
}
h1, .h1,
h1 > a, .h1 > a,
h1 > em, .h1 > em {
	font-size: 2rem;
	margin: 1.6rem 0 1rem;
}
h1:first-child, .h1:first-child{
	margin: 0 0 1rem;
}
h2, .h2,
h2 > a, .h2 > a,
h2 > em, .h2 > em {
	font-size: 1.6rem;
	margin: 1.2rem 0 0.8rem;
}
h3, .h3,
h3 > a, .h3 > a,
h3 > em, .h3 > em {
	font-size: 1.2rem;
	margin: 1rem 0 0.5rem;
}

.page {
	margin-left: 1rem;
}

.section {
	margin-left: 1rem;
}

p {
	margin: 1rem 0;
}
p:first-child {
	margin-top:0;
}

p:last-child {
	margin-bottom:0;
}

#app {
	display:table;
	height:100%;
	width:100%;
}
.page-row {
	display: table-row;
	height: 1px;
}
.page-row > div {
	padding: 1rem;
}
.page-row-expanded { 
	height: 100%; 
}

#background {
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 0;
	overflow: hidden;
}

#background img {
	filter: blur(4px);
}

#app > header,
#app > section,
#app > footer {
	position: relative;
	z-index: 1;
}

#app > header,
#app > footer {
	background: white;
	text-align: center;
}

#app > header *,
#app > footer * {
	color: #445856;
}

#app > header {
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.35);
}

#app > footer {
	box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.35);
}

#app > section {
	background: rgba(104, 147, 141, 0.6);
}

#app > section > article {
	position: relative;
	z-index: 1;
	margin: 1em;
	padding: 1em;
	background: rgba(255, 255, 255, 0.8);
	/* left:50%;
	top:50%;
	transform: translate(-50%, -50%); */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
}

header img {
	width: 2em;
}

code {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	margin-left: 1em;
	padding: 1em;
	white-space: pre;
	background: rgba(104, 147, 141, 0.1);
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2) inset;
}

ul, ol {
	margin-left: 2em;
}

a {
	color: #68938D;
	font-weight: 600;
}

dt,
dd {
	display: inline;
}

dt::before {
	content: "- ";
	margin-left: 0.5em;
}

dt::after {
	content: ": ";
}

dd::after {
	content: "\A";
	display: inline;
	white-space: pre;
}