html {
	--background: rgb(149, 149, 149);
	--shadow: black;
	--highlight: white;
	--accent: rgb(59, 103, 162);
	--half-shadow: rgb(123, 123, 123);
	--half-highlight: rgb(175, 175, 175);
	--tint-shadow: rgb(170, 144, 124);
	--tint-highlight: rgb(255, 169, 151);
}
body {
	background-color: var(--background);
	color: var(--shadow);
	font-family: sans-serif;
	padding-top: 1em;
}
body:before {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--shadow);
	background-color: var(--highlight);
	content: "Anaerin's Website v3.12";
	padding: 3px;
}
window {
	display: block;
	border-color: var(--shadow) var(--highlight) var(--highlight) var(--shadow);
	border-style: solid;
	border-width: 1px;
	border-top: none;
	padding: 4px;
	position: relative;
	background-color: var(--background);
	margin-top: 2em;
	padding-right: 0px;
	min-height: 2em;
}
window container {
	top: 0;
	left: 0;
	right: 0px;
	bottom: 4px;
	display: block;
	padding: 4px;
	padding-top: 2px;
	padding-bottom: 10px;
	overflow: none;
}
window[scrolling], window[resizable] {
	margin-bottom: 20px;
}
window[scrolling] container {
	overflow: scroll;
	scrollbar-color: var(--highlight) var(--accent);
	scrollbar-width: thin;
	scrollbar-gutter: stable both-edges;
	bottom: -20px;
	right: -20px;
	overflow: clip;	
}
window[scrolling] {
	margin-right: 19px;
}
window[scrolling]:after {
	right: -23px;
}
window:before {
	background-color: var(--accent);
	content: attr(label);
	color: var(--shadow);
	display: block;
	position: absolute;
	top: calc(-2em + 5px);
	left: -1px;
	right: -2px;
	border-bottom-color: var(--shadow);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding: 3px;
	padding-left: 1.9em;
	padding-bottom: 5px;
	overflow: hidden;
	white-space: nowrap;
	
	background-image: 
		url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13px" height="16px" viewBox="0 0 13 16"><rect x="3" y="5" width="5" height="6" style="fill:white;stroke-width:1;stroke:black" /><line x1="12" y1="0" x2="12" y2="16" style="stroke-width:1;stroke:black" /><line x1="13" y1="0" x2="13" y2="16" style="stroke-width:1;stroke:white" /></svg>'), 
		url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="44px" height="16px" viewBox="0 0 44 16"><rect x="6" y="3" width="14" height="10" style="stroke-width:1;stroke:black;fill:none" /><rect x="7" y="4" width="7" height="6" style="fill:white;stroke-width:1;stroke:black" /><rect x="29" y="3" width="10" height="7" style="stroke-width:1;stroke:black;fill:rgb(149, 149, 149)" /><rect x="32" y="6" width="10" height="7" style="stroke-width:1;stroke:black;fill:white" /><line x1="1" y1="0" x2="1" y2="16" style="stroke-width:1;stroke:black" /><line x1="2" y1="0" x2="2" y2="16" style="stroke-width:1;stroke:white" /><line x1="24" y1="0" x2="24" y2="16" style="stroke-width:1;stroke:black" /><line x1="25" y1="0" x2="25" y2="16" style="stroke-width:1;stroke:white" /></svg>');
	background-repeat: no-repeat, no-repeat;
	background-position: top left, top right;
	background-size: contain, contain;
		
}
window:after {
	position: absolute;
	content: " ";
	top: calc(-2em + 4px);
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 1px solid red;
	border-color: var(--highlight) var(--shadow) var(--shadow) var(--highlight);
	z-index: -1;
	background-color: var(--accent);
}
window[resizable]:after, window[scrolling]:after {
	bottom: calc(-1em - 8px);
}

window.header {
	background-color: var(--highlight);
	color: var(--shadow);
}

grid {
	display: grid;
	grid-auto-flow: column;
	column-gap: 10px;
}
a {
	color: var(--shadow);
}
window container p:first-child {
	margin-top: 0;
}
window.header container {
	display: grid;
	grid-template-columns: 100fr 1fr;
}
window.header div.TopNavigation ul {
	list-style-type: none;
	margin: 0;
}
window.header div.TopNavigation ul li {
	display: block;
	border: 2px solid var(--background);
	border-color: var(--highlight) var(--shadow) var(--shadow) var(--highlight);
	background-color: var(--background);
	padding: 0.2em 0.5em;
	margin: 0.2em;
	text-align: center;
}
window.header div.TopNavigation ul li a {
	text-decoration: none;
	cursor: default;
	white-space: nowrap;
	text-align: right;
}
window.footer container {
	text-align: center;
}