@font-face {
	font-family: 'Fira Sans';
	src: url('FiraSans-Regular.ttf');
}

@font-face {
	font-family: 'Fira Sans';
	src: url('FiraSans-Bold.ttf');
	font-weight: bold;
}

@font-face {
	font-family: 'Fira Sans';
	src: url('FiraSans-Italic.ttf');
	font-style: italic;
}

@font-face {
	font-family: 'Fira Sans';
	src: url('FiraSans-BoldItalic.ttf');
	font-weight: bold;
	font-style: italic;
}


/* accent-color was #2A4 */

:root {

	--back-color: #EEF2EE;
	--text-color: #444;
	--translucent-back: rgba(238, 238, 238, 0.75);
	--translucent-title: rgba(238, 238, 238, 0.85);
	--accent-color: #193;
	--link-underline-color: var(--accent-color);
	--link-text-color: var(--text-color);
	--live-link-color: var(--accent-color);
	--code-color: #444;
	--code-back-color: #CCC;
	--menu-back: #FFF;
	--image-surround: #FFF;
	--shadow: 3px 3px 6px #0002;

	--color0: #193;
	--color1: #F82;
	--color2: #48E;
	--color3: #F77;
	--color4: #777;

	--color-yes: #2C6;
	--color-no: #F99;
	--color-maybe: #FB1;
	--color-empty: #D8D8D8;
	
	--outline-width: 6px;
	--half-outline-width: 3px;

	--table-cell-border: 1px solid var(--text-color);
	--table-head-border: 2px solid var(--text-color);
	
}

@media (prefers-color-scheme: dark) {
	:root {
		--back-color: #222;
		--text-color: #DDD;
		--accent-color: #3B5;
		--color0: #3B5;
		--code-color: #AEB;
		--code-back-color: #444;
		--translucent-back: rgba(34, 34, 34, 0.75);
		--translucent-title: rgba(34, 34, 34, 0.85);
		--menu-back: #000;
		--image-surround: #000;
		--shadow: 3px 3px 6px #0008;
		--color-yes: #073;
		--color-no: #844;
		--color-empty: #000;
	}
}

* {
	box-sizing: border-box;
}

html, body {
	color: var(--text-color);
	background-color: var(--back-color);
	margin: 0;
	font-family: 'Fira Sans', sans-serif;
	font-size: 14pt;
}

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: start;
}

#container {
	color: var(--back-color);
}

header, footer {
	margin: 0;
	padding: 0.5em;
	text-align: center;
	min-height: 1em;
	background-color: var(--accent-color);
	color: var(--back-color);
}

footer p {
	margin: 0;
	text-align: right;
}

main {
	flex-grow: 1;
	padding: 0 0.5em 3em 0.5em;
}

main article p, main article div, main article ul, main article ol, main article pre {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
}

article a {
	text-decoration: underline;
	text-decoration-color: var(--link-underline-color);
	text-decoration-thickness: 2px;
	color: var(--link-text-color);
}

article a:hover {
	color: var(--live-link-color);
}

header > div {
	font-weight: bold;
	font-size: 24pt;
	margin: 0;
}

header a, footer a {
	color: var(--back-color);
}

header a {
	text-decoration: none;
}

header a:hover {
	text-decoration: none;
	border-bottom: 2px solid var(--back-color);
}

h1, h2, h3 {
	font-weight: bold;
	color: var(--accent-color);
	text-align: center;
}

h1 {
	font-size: 24pt;
	margin: 1.5em 0.5em 1.0em 0.5em;
}

h2 {
	font-size: 19pt;
	margin: 1.5em 0.5em 1.0em 0.5em;
}

h3 {
	font-size: 15pt;
	margin: 1.0em 0.5em 0.5em 0.5em;
}

p {
	line-height: 140%;
	margin: 1em 0;
}

ul {
	margin: 0;
	padding-left: 1.0em;
}

ol {
	margin: 0;
	padding-left: 1.6em;
}

li {
	line-height: 140%;
	margin: 0.5em 0;
}

img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--outline-width);
	background-color: var(--image-surround);
	box-shadow: var(--shadow);
}

.twopics {
	font-size: 0;
	text-align: center;
}

.twopics img {
	display: inline-block;
	max-width: calc(50% - var(--half-outline-width));
	vertical-align: middle;
}

.twopics :nth-child(1) {
	margin-left: 0;
	margin-right: var(--half-outline-width);
}

.twopics :nth-child(2) {
	margin-right: 0;
	margin-left: var(--half-outline-width);
}

.z1aemu-container {
	padding: 0;
	border: none;
	max-width: 100%;
	width: min(640px, 100%);
}

.z1aemu-canvas {
	display: block;
	margin: 0 auto;
	padding: 0;
	box-shadow: var(--shadow);
	background-color: black;
	outline: none;
	max-width: 100%;
	width: min(640px, 100%);
}

.z1aemu-controls {
	text-align: center;
	padding: 0 0 var(--outline-width) 0;
}

s {
	text-decoration-thickness: 2px;
}

hr {
	width: 20%;
}

nav hr {
	width: 100%;
	height: 1px;
	border: none;
	border-top: 1px solid var(--link-text-color);
	margin : 3px 0;
}

nav a.currentheading {
	color: var(--live-link-color);
}

nav a:hover, nav a:active {
	color: var(--live-link-color);
}

div.tablewrapper, div.tabletype {
	overflow-x: auto;
}

div.fullwidth {
	max-width: none;
}

o {
	display: inline;
	text-decoration: overline;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border: none;
	margin-left: auto;
	margin-right: auto;
}

th, td {
	border-right: var(--table-cell-border);
	padding: 0.1em 0.25em;
	background-color: var(--back-color);
}

th {
	border-top: var(--table-head-border);
}

td {
	border-bottom: var(--table-cell-border);
}

tr td:first-child, tr th:first-child {
	border-left: var(--table-head-border);
}

tr td:last-child, tr th:last-child {
	border-right: var(--table-head-border);
}

tbody tr:first-child td {
	border-top: var(--table-head-border);
}

tbody tr:last-child td {
	border-bottom: var(--table-head-border);
}

div.leftings tr th:first-child, div.leftings tr td:first-child {
	font-weight: bold;
	position: sticky;
	left: 0;
	z-index: 2;
	border-right: var(--table-head-border);
}

div.midline tr th:nth-child(2), div.midline tr td:nth-child(2) {
	border-right: var(--table-head-border);
}

td.y {
	background-color: var(--color-yes);
}

td.n {
	background-color: var(--color-no);
}

td.m {
	background-color: var(--color-maybe);
}

td.e {
	background-color: var(--color-empty);
}

pre {
	padding: 0.25em;
	overflow-x: auto;
	background-color: var(--code-back-color);
}

code {
	background-color: var(--code-back-color);
	color: var(--code-color);
	padding-left: 0.25em;
	padding-right: 0.25em;
	font-weight: bold;
	font-size: 13pt;
}

pre code {
	padding: 0;
}

div.footnotes {
	font-size: 90%;
}

div.footnotes hr {
	width: 100%;
	margin: 2em 0 1em 0;
}

div.project {
	display: flex;
	flex-direction: row;
	margin: calc(var(--outline-width) * 4) 0;
	padding: var(--outline-width);
	/* border-radius: calc(var(--outline-width) * 2); */
	align-items: center;
	box-shadow: var(--shadow);
}

div.project.open {
	background-color: var(--color1);
}

div.project.openlater {
	background-color: var(--color3);
}

div.project.closed {
	background-color: var(--color2);
}

div.project.unspecified {
	background-color: var(--color4);
}

/*
div.project:nth-child(3n+1) { background-color: var(--color1); }
div.project:nth-child(3n+2) { background-color: var(--color2); }
div.project:nth-child(3n+3) { background-color: var(--color3); }
*/

.projname {
	font-weight: bold;
	font-size: 125%;
	flex: 0 0 20%;
	text-align: center;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.projname a {
	color: var(--translucent-title);
	text-decoration: none;
}

.projname a:hover {
	color: var(--menu-back);
}

.projinfo {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

.projdesc {
	background-color: var(--translucent-back);
	/* border-radius: var(--outline-width); */
	flex-grow: 1;
	align-self: stretch;
	margin: 0 var(--outline-width);
	padding: var(--outline-width);
}

.projpic {
	flex: 0 0 35%;
	overflow: hidden;
	align-self: stretch;
}

.projpic img {
	display: block;
	height: 100%;
	width: 100%;
	padding: 0;
	object-fit: cover;
	/* border-radius: var(--outline-width); */
	box-shadow: none;
}

aside {
	display: block;
	height: 0;
	overflow: visible;
	position: fixed;
	top: 0;
}

aside.left {
	left: var(--outline-width);
	text-align: left;
}

aside.right {
	right: var(--outline-width);
	text-align: right;
}

nav {
	color: var(--link-text-color);
	background-color: var(--menu-back);
	/* border-radius: var(--outline-width); */
	display: inline-block;
	padding: 4px;
	max-width: 250px;
	width: calc(50vw - 444px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: var(--shadow);
	margin-top: var(--outline-width);
	text-align: left;
}

nav p {
	margin: 0;
	padding: 0;
	line-height: initial;
}

nav a {
	color: var(--link-text-color);
	text-decoration: none;
}

@media only screen and (max-width: 1076px) {
	nav {
		display: none;
	}
}

@media only screen and (max-width: 660px) {
	div.project {
		flex-direction: column;
	}
	.projinfo {
		margin-top: var(--outline-width);
	}
	.projdesc {
		margin-left: 0;
	}
}

@media only screen and (max-width: 500px) {
	header div {
		font-size: 20pt;
	}
}

@media only screen and (max-width: 400px) {
	header div {
		font-size: 16pt;
	}
}


a[href*="://"] {
	background: url('extlink-lightmode.svg') center right no-repeat;
	background-size: 0.8em;
	padding-right: 1.0em;
}

@media (prefers-color-scheme: dark) {
	a[href*="://"] {
		background: url('extlink-darkmode.svg') center right no-repeat;
	background-size: 0.8em;
    padding-right: 1.0em;
    
	}
}