html {
	min-height:100vh;
}

body {
	background-color: var(--body-color);
	color:var(--font-color, #000);
	font-family: sans-serif;
	line-height: 1.5em;
	box-sizing: content-box;
	background-image: linear-gradient( var(--grad-dir), var(--grad-col-beg), var(--grad-col-end) );
}
code, pre {
	font-size: 1rem;
}

#colorswitcher {
	background-color:var(--font-color);
	color:var(--background-color);
	position:fixed;
	top:1em;
	right:1em;
	width:2em;
	height:2em;
	border-radius:2em;
	border: solid 2px var(--background-color);
	box-sizing: content-box;
}

#container {
	line-height:1.5rem;
	max-width: 60em;
	width:100%;
	background-color:var(--background-color);
	padding:.5em;
	min-height:70vh;
	border-radius:1em;
	margin-top: 2em;
	margin-bottom:2em;
	margin-left: auto;
	margin-right:auto;
	box-shadow: 0px 0px 8px 2px var(--border-color);
}

a, a:hover, a:focus, a:visited {
	color: var(--link-color);
	text-decoration: none;
	border-bottom: solid transparent .2em;
}

a:focus, a:hover {
	border-color: var(--link-color);
}
pre, .pre {
	padding: .5em;
	line-height: 1.5em;
	background-color: var(--pre-bg-color);
	color: var(--pre-color);
	overflow-y: none;
	overflow-x: auto;
}

figure {
	width: 800px;
	max-width:100%;
	margin: 1.5em auto 1.5em auto;
}
img {
	width:100%;
	border: solid 2px var(--pre-bg-color);
}