:root 
{
	color-scheme: light dark;
	--bg-dark: #1d2224;
	--bg-light: #ddd;
	--bg-darker: #050709;
	--bg-lighter: #fff;
	--text-dark: #f0f0f0;
	--text-light: #000;
	--link-dark: #2186d9;
	--link-light: #0f0fef;
	--link-light-visited: #5b228f;
	--link-dark-visited: var(--link-dark);
}

.light 	{ color-scheme: light; }
.dark { color-scheme: dark; }

a { color: light-dark(var(--link-light), var(--link-dark)); }

a:hover { text-decoration: underline; }
a:visited { color: light-dark(var(--link-light-visited), var(--link-dark)); }
body
{
	width: 55%;
	margin: 0 auto;
	font-family: Courier New, courier;
	font-size: 1rem;
	background: light-dark(var(--bg-lighter), var(--bg-darker));
	color: light-dark(var(--text-light), var(--text-dark));	
}

pre
{
	font-size: 1em;
	white-space: pre-wrap;
}

h1,h2 { font-size: 1.1rem; }
h3,h4 { font-size: 1rem; }

h1
{
	text-align: left;
	padding: 0 10px;
	background: light-dark(var(--bg-light), var(--bg-dark));
}

h1#footer { font-weight: normal; }

p { margin: auto; word-break: break-word; }

header ul
{ 
	list-style: none; 
	padding: 0; 
	padding-right: 3px;
	li { display: inline; }
}

.float-right { float: right; }						

.columns
{
	display: flex;
	width: 100%;
}

.flex-25 { flex: 0.25; }
.flex-75 { flex: 0.75; }

@media only screen and (max-width: 1444px)
{
	body { width: 85%; }
	.columns { display: block; }
}

@media only screen and (max-width: 480px)
{
	* { font-size: 0.9em; }
}