:root {
	--almost-black: rgb(50, 50, 50);
	--almost-almost-black: rgb(60, 60, 60);
	--almost-white: rgb(240, 240, 240);
}

body, html {
	height: 100%;
}

img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

body, h1, h2, h3, h4, h5 {
	font-family: 'avenir next', avenir, sans-serif;
}

h1 {
	font-size: 2.5rem;
	text-align: center;
}

h2 {
	font-size: 1.75rem;
	text-align: center;
}

h3 {
	font-size: 1.2rem;
}

h4 {
	font-style: italic;
}

h5 {
	margin-top: -1rem;
	text-align: center;
}

code {
	color: green;
}

select {
	width: 100%;
}

table {
	margin-top: 2rem;
	border: 0.1rem solid black;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}

th, td {
	padding: 0.5rem;
	border: 1px solid #ddd;
}

td {
	width: 33%;
}

footer {
	font-size: 0.75rem;
	padding: 1.5rem;
	text-align: center;
}

main {
	margin-left: 10%;
	margin-right: 10%;
}

@media all and (max-width: 768px) {
	main {
		margin: auto;
	}
}

@media (prefers-color-scheme: light) {
	body {
		background-color: white;
		color: var(--almost-black);
	}

	a {
		color: #555;
	}

	a:hover {
		color: var(--almost-black);
		background-color: white;
	}

	table {
		background-color: var(--almost-white);
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--almost-black);
		color: white;
	}
	
	a {
		color: #aaa;
	}
	
	a:hover {
		color: white;
		background-color: var(--almost-black);
	}
	
	table {
		background-color: var(--almost-almost-black);
	}
}

.langNav {
	margin-right: 1rem;
}

.navBar {
	text-align: center;
	margin-bottom: 3rem;
}

.navBar-nav-item {
	margin: 1.5rem;
}

.sideNav {
	float: left;
	width: 15rem;
	height: auto;
	margin-top: 5rem;
	margin: 2rem;
}

#helpNav {
  list-style-type: none;
}