:root {
	--bg: black;
	--fg: white;
	--fnt00: "Michroma", system-ui;
	--fnt01: "Nineteen Ninety Three", system-ui;
	--fnt02: "Pixel Operator", system-ui;
	--fntsize: 16px;
	--pad00: 4px;
	--pad01: calc(var(--pad00) / 2);
	--pad02: calc(var(--pad01) / 2);
	--accent: white;
}
* { box-sizing: border-box; }
html {
	image-rendering: pixelated;
	scrollbar-width: none;
	min-width: 100vw;
	min-height: 100vh;
	max-width: 100vw;
	max-height: 100vw;
	cursor: url("/images/wincur/Cursor79.cur"), auto;
	background: var(--bg);
	font-family: var(--fnt02);
	line-height: 1;
	font-size: var(--fntsize);
	color: var(--fg);
	display: flex;
	flex-direction: column;
}
body {
	flex: 1;
	border: 4px solid var(--accent);
	min-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
header {
	order: 1;
	display: flex;
	flex-direction: column;
}
header > span#header {
	font-family: var(--fnt00);
	font-size: 32px;
	line-height: 1;
	padding: 0 1em;
	background: linear-gradient(to right, var(--accent), black);
	text-align: right;
	text-shadow: 4px 0 0 black;
}
header > span#header > img {
	height: 1em;
	width: auto;
	filter: drop-shadow(4px 2px 0 black)
}
main {
	order: 2;
	flex: 1;
	display: flex;
	flex-direction: row;
}
aside {
	min-width: 256px;
	max-width: 256px;
}
#aside-left  { order: 1; }
#main        { order: 2; }
#aside-right { order: 3; }
footer {
	order: 3;
	line-height: 1;
	font-size: 32px;
	min-height: 1em;
	background: linear-gradient(to right, var(--accent), black);
}