body { display: flex; flex-wrap: wrap; font-family: sans; background-color: gainsboro; }
	a { text-decoration: none ; color: inherit; }
	a:hover { text-decoration: underline ; }
	blockquote { font-size: 0.8em; text-decoration: italic; border-left: 1px solid rgba(0,0,0,0.2); padding-left: 1em; }
	table, tr > * { border: 1px solid black; }
		th { background-color: #abc }
		td { background-color: #def }

body ol li, body > ul li { margin: 0.5em; }

header { flex-basis: 100%; }
	header nav { display: flex; justify-content: space-between; }
	header h1 span { margin-left: 1em; font-size: 50%; font-style: italic; }

body > nav { flex-basis: content; padding-right: 1vw; min-width: 10vw; }
	nav ul { display: flex; flex-direction: column; list-style-type: none; list-style-position: outside; padding-left: 0;  }
	nav li ul { padding-left: 0.6em }

main { display: flex; flex-basis: 70vw }
	article a { text-decoration: underline; color: darkolivegreen; }

footer { display: flex; flex-basis: 100%; flex-shrink: 0; justify-content: space-between; align-self: end; }

img { max-width: 100%; max-height: 100% }

pre { font-size: 1.2em; overflow: auto; max-height: 80vh; max-width: 60vw; background-color: rgba(128,128,128,0.2); margin: 1em; padding: 1em; }

@media only screen and (max-width: 768px) {
	article { flex-basis: max-content; }
}

@media (prefers-color-scheme: dark) { 
	body { background-color: black; color: gainsboro; } 
	article a { color: olive; } 
	table, tr > * { border: 1px solid grey; }
		th { background-color: #223 }
		td { background-color: #332 }
}