* {
	box-sizing: border-box;
	scrollbar-color: var(--foreground-color) var(--background-color);
	scrollbar-width: thin;
}

:root {
	--foreground-color: white;
	--background-color: #1f1f1f;
	--file-list-height: 1rem;
}

body {
	background-color: var(--background-color);
	color: var(--foreground-color);
	font-family: 'Nimbus Sans', sans-serif;
	width: 30em;
	margin: 0 auto;
	margin-top: 5em;
	margin-bottom: 5em;
	font-size: 150%;
}
header > h1 { text-align: center; }
nav { text-align: center; }
header { margin-bottom: 3em; }
code { font-size: 1em; }
@media (max-width: 960px) {
	body {
		width: unset;
		margin-left: 2em;
		margin-right: 2em;
	}
}

a {
	color: var(--foreground-color);
	background-color: var(--background-color);
    transition: background-color 0.3s ease-in-out, color 0.5s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out, color 0.5s ease-in-out;
    -webkit-transition: background-color 0.3s ease-in-out, color 0.5s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out, color 0.5s ease-in-out;
}

a:hover {
	color: var(--background-color);
	background-color: var(--foreground-color);
}

table {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border-top: 4px var(--foreground-color) solid;
	border-bottom: 4px var(--foreground-color) solid;
	border-collapse: collapse;
	width: 100%;
}

th, td {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}

tr > th {
	text-align: left;
}

thead {
	border-top: 2px var(--foreground-color) solid;
	border-bottom: 2px var(--foreground-color) solid;
}

li { margin-top: 1em; margin-bottom: 1em; }

pre {
    font-size: 1rem;
    border-left: 2px var(--foreground-color) solid;
    padding-left: 1em;
    margin-left: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
}

header {
	padding-bottom: 1rem;
}

footer {
	padding-top: 1rem;
}

hr {
	height: 4px;
	border: none;
	background-color: var(--foreground-color);
}