:root {
	--background-color: #f2f2ef;
	--text-color: #0f0f0f;
	--border-color: #dcdcdc;
	--emphasis-color: black;
}
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #0f1314;
		--text-color: #cdcbc8;
		--border-color: #191f21;
		--emphasis-color: #edebe8;
	}
}
html {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2rem;
	color: #202020;
}

html, body {
	color: var(--text-color);
	width: 100%;
}

body {
	margin: 0px;
	background: var(--background-color);
	display: flex;
	flex-direction: row;
}

canvas {
	margin: 0;
	padding: 0px;
	width: 640px;
	height: 480px;
	position: absolute;
	background: black;
	z-index: 0;
}

a, a:visited {
	color: orange;
}

h1, h2, h3, h4, h5, h6 {
	text-align: left;
	line-height: 3.2rem;
	margin: 0;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
h1 > a:visited, h2 > a:visited, h3 > a:visited, h4 > a:visited, h5 > a:visited, h6 > a:visited {
	color: unset;
	text-decoration: none;
}
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
	color: orange;
	text-decoration: underline;
}
i, b {
	color: var(--emphasis-color);
}

ul {
	padding: 0px;
	list-style-type: none;
}

header {
	background: var(--background-color);
	position: sticky;
	height: 100vh;
	padding-top: 1rem;
	width: 480px;
	top: 0;
	box-sizing: border-box;
	border-right: 1px solid var(--border-color);
}

header > * {
	padding-left: 4rem;
}

main {
	flex: 0 1 800px;
	height: 100%;
	padding-left: 4rem;
	padding-top: 3rem;
	padding-bottom: 8rem;
	box-sizing: border-box;
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.4rem;
}

@media (max-width: 1440px) {
	header {
		width: 400px;
	}
	main {
		padding-right: 4rem;
	}
}

@media (max-width: 1080px) {
	body {
		flex-direction: column;
	}
	main {
		flex: 1;
	}
	header {
		height: unset;
		padding-top: unset;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: min-content;
		border-right: unset;
		border-bottom: 1px solid var(--border-color);
	}
	header {
		display: flex;
		flex-direction: row;
	}
	header > nav {
		padding: unset;
	}
	header > nav > ul {
		padding: unset;
		display: flex;
		flex-direction: row;
	}
	header > nav > ul > li {
		padding-left: 1rem;
	}
}
@media (max-width: 768px) {
	main {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	header > h1  {
		line-height: 3.2rem;
		padding-left: 2rem;
	}
	h1, h2, h3, h4, h5, h6 {
		line-height: 1.8rem;
	}
}
@media (max-width: 640px) {
	header {
		flex-direction: column;
		padding: 0.5rem 0rem;
	}
	header > h1 {
		padding: unset;
		margin: unset;
		margin-left: auto;
		margin-right: auto;
		font-size: 1rem;
		line-height: 1rem;
	}
	header > * {
		padding: unset;
	}
	header > nav {
		margin: unset;
	}
	header > nav > ul {
		margin: unset;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header > nav > ul > li {
		padding: 0 0.2rem;
	}
	main {
		text-align: left;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}