:root {
	--background: #ffffff;
	--text: #000000;
}

* {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	
	font: 400 14px/20px 'Roboto Mono', monospace;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	
	color: var(--text);
	
	background: url('/images/bg.png') repeat;
	animation: background-slide 70s linear infinite;
}

@keyframes background-slide {
	0% { background-position: -512px -512px; } 
	100% { background-position: 512px 512px; } 
}

@media only screen and (min-width: 400px) {
	html {
		font: 400 16px/24px 'Roboto Mono', monospace;
	}
}

@media only screen and (min-width: 600px) {
	html {
		font: 400 24px/32px 'Roboto Mono', monospace;
	}
}

body {
	margin: 0;
	padding: 1.5em;
	overflow-y: scroll;
}

main {
	margin: 20vh auto 20vh auto;
	padding: 1em 1em;
	background: white;
	border: 0.5em solid black;
	max-width: 600px;
	box-shadow: -0.8em 0.8em rgba(0,0,0,0.1);
}

@media only screen and (min-width: 600px) {
	main {
		padding: 1em 1.5em;
	}
}

img {
	max-width: 100%;
}

hr {
	margin: 2em 0;
	border: 0;
	border-top: 0.15em dashed black;
}

h1, h2, h3 {
	text-transform: uppercase;
	/* text-align: justify; */
}

h1 {
	font: 700 1.9em/1.2em 'Roboto Mono', monospace;
	margin: 0.6em 0 0.4em 0;
}

h2 {
	font: 700 1.6em/1.2em 'Roboto Mono', monospace;
	margin: 0.6em 0 0.4em 0;
}

h3 {
	font: 700 1.4em/1.2em 'Roboto Mono', monospace;
	margin: 0.6em 0 0.4em 0;
}

p {
	text-align: left;
}

@media only screen and (min-width: 400px) {
	p {
		text-align: justify;
	}
}

p.subtitle {
	font: italic 500 1.1em/1.5em 'Roboto Mono';
	margin: 0.6em 0 0.4em 0;
}

a {
	text-decoration: none;
	color: inherit;
	border-bottom: 0.1em solid black;
}

a:hover {
	border-bottom: 0.1em dashed black;
}

a.noborder, a:hover.noborder {
	border: 0;
}

.videoContainer {
	margin: 1.5em 0;
}

video {
	max-width: 100%;
	height: auto;
}

main > h1:first-child {
	margin-top: 0;
}

ul {
	padding-left: 1.5em;
	margin: 1em 0 2em 0;
}

ul li {
	margin-bottom: 1em;
	text-align: left;
}

ul.tight li {
	margin-bottom: 0.25em;
}

@media only screen and (min-width: 400px) {
	ul li {
		text-align: justify;
	}
}

.foldout {
	cursor: pointer;
	font: 700 1.1em/1.2em 'Roboto Mono', monospace;
	margin: 1em 0 0 0;
	text-align: left;
}

.foldout + p {
	margin: 0.5em 0 2em 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.foldout:after {
	display: block;
	content: "+ Show answer";
	color: rgb(187, 187, 187);
	font-size: 0.7em;
}

.knownissue:after {
	content: "+ Show description";
}
  
.foldoutactive:after {
	content: "- Hide it again";
}