:root {color-scheme: light dark}
body {
	background: #eeeeee; color: black;
	margin: 3px;
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif
}
@media print, (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio:2) {
	body {font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol}
}

h1, h2, h3, h4, header, aside, .credits, .sources {
	font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif 
}

footer, .latestPosts, .categoryPosts ul, .postslist
{
	font-family: system-ui, sans-serif
}

footer nav { text-align: center; margin-bottom: .5em }
footer nav .left { float: left } 
footer nav .right { float: right }

h1	{border-bottom: 2px solid black; margin-top: 0; font-weight: bold; font-size: 1.7em}
.photo h1 {border:none; font-size: 20pt; margin-top: .5em; margin-bottom: .5em; text-align:center}
h2	{font-weight: bold; font-size: 18pt}
h3	{font-weight: bold; font-size: 16pt}

article h2 {border-bottom: 1px solid #999}
.home p, article p, article blockquote, article li {font-size: 14pt; line-height: 1.5}
.comment .p-content {line-height: 1.5; margin-left: 1em}

header nav	{display:inline}
nav.crumbs {margin-top: 1em; margin-bottom: 1em}
nav.crumbs .prev {float:left}
nav.crumbs .next {float:right}
nav.crumbs .done {display: block;clear: both}

header	{
	font-weight: bold;
	line-height: 2;
	padding: 0;
	margin: -3px -3px 1em -3px;
	border-bottom: 3px black solid;
	border-top: 3px black solid;
}
a:link	{color: #c00}
a:visited	{color: #800}
a:active	{color: #ff8}
a:hover	{color: #ff9514}
a.canonical {font-weight: bold}
.commentHeader time { display: block; font-weight:normal; font-size: .66em}

pre {
	max-width:100%;
}

pre code {
	overflow-x: auto;
	display:block;
	border: 1px #000 solid;
	padding: .5em;
}

@media (prefers-color-scheme: dark) {
	body {background: #111; color: #fff}
	h1, h2 {border-color: #ccc}
	a:link	{color: #f33}
	a:visited	{color: #866}
	a:active	{color: #ff8}
	a:hover	{color: #ff9514}
} 

@media screen {
	header { background-color: #866; color: #fff }
	header a {
		text-decoration: none;
		display: inline-block;
		padding: 0 .5em 0 .5em;
		text-decoration: none;
		border-right: 2px black solid;
		border-left: 2px black solid;
	}
	header a:link, header a:visited {color: #fff; background-color: #644}
	header a:active {color: #660; background-color: #000}
	header a:hover	{color: #fff; background-color: #300}
	header .catLink {float: right; margin-left: .5em;}
	.stars {color: #f90}
}
aside, .postslist .detail, aside p, .sources, .sources p {font-size: 12pt}
.sources {font-style: italic}
.detail::after {content: "";clear:left}
footer {font-size: 10pt}
.postslist .detail {margin-left: 1em}
footer, .categories {border-top: 1px #333 solid; padding-top: .5em}
footer div {margin-top: 1em; margin-botton: 1em}
.alternates {text-align:right}
main.readable, .home p, .latestPosts {max-width: 40em}
main.photo img {max-height: 75vh; width: auto}
main.home {max-width: 99%}
main.photo {max-width:99%}
main.photo .caption {max-width: 40em; margin-left: auto; margin-right:auto}
main, aside {margin-left: 1em; margin-right: 1em}
.categoryPosts li {margin-bottom: .75em}
.categoryPosts li.morelink {text-align: right; list-style-type: none}

.galleryPic, previewThumb {display: inline-block;
		margin: .5em;
		padding-right: .5em;
		padding-left: .5em;
		vertical-align: top;
		text-align: center;
}
.galleryPic img, img.galleryPic {max-height: 200px; width: auto}
.previewThumb img, img.previewThumb {width: 6em; height: auto; float: left; margin-top: 1px; margin-right: .5em}
.galleryPic a {text-decoration: none}

.stream article {margin-bottom: 4em}
.stream article .byline {text-align: right}

img.cover {width: 150px; max-width: 40%; height: auto; margin-bottom: 0.5em}
img.right {float:right; margin-left: 0.5em}
img.left {float:left; margin-right: 0.5em}
img.center {display: block; margin-left: auto; margin-right:auto; max-width:100%; height: auto}
.postslist li {list-style-type: none; margin-bottom: 1em}
.postslist .detail {display: block; overflow: auto}


@media screen and (max-width: 46em)  {
	pre {
		white-space: pre-wrap;
		overflow-x: auto;
		max-width:100%;
	}
	/*header a {border-bottom: 2px black solid}*/
	header .subtitle {
		display: block;
		padding: .5em .5em 3px 1em;
		margin-top: 2px;
		text-align: right
	}
}

@media screen and (min-width: 42em)  {
	main {margin-left: auto; margin-right: auto}
	header .subtitle {margin-left: 1em; margin-right: 1em}
	aside.left, aside.right, img.left, img.right {max-width: 40%; height: auto; margin-bottom: 1em}
	aside.left {float:left; margin-right: 1em; margin-left:0}
	aside.right {float:right; margin-left: 1em; margin-right:0}

	.categoryPosts {display: inline-block;
		width: 43%;
		margin: .5em;
		padding-right: .5em;
		padding-left: .5em;
		vertical-align: top;
		background: #f7f7f7;
		
	}
	.categoryPosts li {margin-bottom: 1em}
	.categoryPosts a {text-decoration: none}
}
@media screen and (prefers-color-scheme: dark) and (min-width: 600px) {
	.categoryPosts {background: #111}
} 
@media screen and (min-width: 800px) {
	.categoryPosts {width: 28%}
	aside.right {float:right; width: 20%}
	aside.left {float:left; width: 20%}
}

@media screen and (min-width: 1000px) {
	.categoryPosts {width: 21%}
}

@media screen and (min-width: 1500px) {
	.categoryPosts {width: 20em}
}

@media screen and (prefers-contrast: more) {
	body, html {color: black; background: white}
	header {color: white; background-color: #211}
	header a:link, header a:visited {color: white; background-color: #900}
	header a:active {color: #660; background-color: black}
	header a:hover	{color: white; background-color: #f00}
}
@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
	body, html {color: white; background: black}
}

@media print {
	footer.main, .alternates, .noprint {display: none}
	.home p, article p, article blockquote, article li {font-size: 12pt}
	a:link, a:visited {color: #000; text-decoration: none}
	header .catLink {float: right; text-align:center; padding: 0; margin-right: -3px}
	abbr {text-decoration: none}
	pre {white-space: pre-wrap}
}