:root {color-scheme: light dark}
body {
	background: #eee; color: #000;
	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, pre, code {font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace}

aside, .detail, .sources {
	font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif 
}
footer, .categoryPosts ul {
	font-family: system-ui, sans-serif
}



h1	{border-bottom: 2px solid #000; margin-top: 0; font-weight: bold; font-size: 20pt}
h2	{font-weight: bold; font-size: 18pt; border-bottom: 1px solid #999}
h3	{font-weight: bold; font-size: 16pt}
h4	{font-weight: bold; font-size: 14pt}
nav	{display:inline}

.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	{
	font-weight: bold;
	background-color: #060; color: #fff;
	line-height: 2;
	padding: 0;
	margin: -3px -3px 1em -3px;
	border-bottom: 3px black solid;
	border-top: 3px black solid;
}
header .subtitle {white-space: nowrap}
a:link	{color: #070}
a:visited	{color: #030}
a:active	{color: #8ff}
a:hover	{color: #1495ff}

.shadowbox {
	border: 3px black solid;
	box-shadow: 5px 5px 5px #666;
}

pre {
	max-width:100%;
}

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

@media (prefers-color-scheme:dark) {
	body {background: #222; color: #fff}
	h1, h2, h3, h4, footer, .categories {border-color: #666}
	a:link	{color: #0f0}
	a:visited	{color: #090}
	a:active	{color: #ccf}
	a:hover		{color: #88f}
	.shadowbox {border-color: #eee; box-shadow: 5px 5px 5px #0c0}
}

.commentHeader time { display: block; font-size: 10pt}

header a {
	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: #030}
header a:active, header a:hover {color: #fff; background-color: #000}
header a.catLink {float: right; margin-left: .5em}
.categoryPosts a {text-decoration: none}

aside, aside p, aside li, .detail, .sources, .sources p {font-size: 12pt}
footer {font-size: 10pt}
.sources {font-style: italic}
.postslist .detail {margin-left: 1em}
footer, .categories {border-top: 1px #333 solid; padding-top: .5em}
.alternates {text-align:right}
footer div {margin-top: 1em; margin-botton: 1em}

main, aside {margin-left: 1em; margin-right: 1em}
.categoryPosts li {margin-bottom: .75em}
.postslist li {font-size:14pt; list-style-type: none; margin-bottom: .5em}
.postslist .detail {display: block}

img {max-width: 100%; height: auto}
li.obsolete {opacity: 0.5}

@media screen {
	main.readable {max-width: 40em}
	code {color: #000; background-color: #c90}
}

@media screen and (prefers-color-scheme:dark) {
	pre code {border-color: #666}
	code {background-color: #000; color: #c90}
}

@media screen and (max-width: 46em)  {
	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.readable, main.photo {margin-left: auto; margin-right: auto}
	header .subtitle {margin-left: 1em; margin-right: 1em}
	img.third {max-width: 30%}
	img.half {max-width: 46%}
	img.right {float:right; max-width: 60%}
	img.left {float:left; max-width: 60%}
	img.center {display: block;margin-left: auto; margin-right:auto}
	.categoryPosts {display: inline-block;
		width: 45%;
		vertical-align: top
	}
	.categoryPosts li {margin-bottom: 1em}
}
@media screen and (min-width: 800px)  {
	.categoryPosts {width: 31%;}
	float.right {float:right; width: 20%}
	float.left {float:left; width: 20%}
}

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

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

@media print {
	main {margin: 0}
	header .subtitle {margin-left: 1em}
	.home p, article p, article blockquote, article li {font-size: 12pt}
	img.center {display: block;margin-left: auto; margin-right:auto}
	.alternates, .noprint {display:none}
	header, h2, h3, footer, .categories {border-color: #000}
	header a {border: none}
	a:link,	a:visited {color:#000; text-decoration: none}
	pre {white-space: pre-wrap}
}
@media print and (min-width: 5in) {
	img.right {float:right; max-width: 60%}
	img.left {float:left; max-width: 60%}
}