:root {color-scheme: light dark}
body {
	background: #ffffff; color: #000000;
	margin: 7px;
}

h1, h2, h3, h4, header, footer, aside, .credits, .sources, .latestPosts, .categoryPosts ul, .postslist
{
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif
}

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

.photo h1 {border:none; font-size: 1.25em; margin-top: .5em; margin-bottom: .5em; text-align:center}

.home p, article p, article blockquote, article li {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;
}
a:link	{color: #00c}
a:visited	{color: #008}
a:active	{color: #8ff}
a:hover	{color: #1495ff}
a.canonical {font-weight: bold}

@media (prefers-color-scheme: dark) {
	body {background: #111; color: #fff}
	a:link	{color: #3cf}
	a:visited	{color: #96b}
	a:active	{color: #8ff}
	a:hover	{color: #1495ff}
} 

@media screen {
	header a {
		text-decoration: none;
		display: inline-block;
		padding: 0 .5em 0 .5em;
		text-decoration: none;
	}
	header a:link, header a:visited {color: #fff; background-color: #666}
	header a:active {color: #fff; background-color: #000}
	header a:hover	{color: #333; background-color: #ccc}
	header .catLink {float: right; margin-left: .5em;}
}

@media screen and (prefers-color-scheme: dark) {
header a:link, header a:visited {color: #fff; background-color: #444}
	header a:active {color: #fff; background-color: #000}
	header a:hover	{color: #333; background-color: #ccc}
	header .catLink {float: right; margin-left: .5em;}
}
footer, aside, .postslist .detail, .sources p {font-size: .9em}
.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, .home p, .latestPosts {max-width: 40em}
main.home {max-width: 99%}
main.photo {max-width:99%}
main.photo img {max-height: 75vh; width: auto}
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 {display: inline-block;
		margin: .5em;
		padding-right: .5em;
		padding-left: .5em;
		vertical-align: top;
		text-align: center;
}
.galleryPic img {max-height: 200px; width: auto}
.galleryPic a {text-decoration: none}

img.center {display: block; margin-left: auto; margin-right:auto; max-width:100%; height: auto}
.postslist li {list-style-type: none; margin-bottom: .5em}
.postslist .detail {display: block}


@media screen and (max-width: 46em)  {
	pre {
		overflow-x: auto; 
		max-width:100%;
	}
}

@media screen and (min-width: 42em)  {
	main {margin-left: auto; margin-right: auto}

	.categoryPosts {display: inline-block;
		width: 23em;
		margin: .5em;
		padding-right: .5em;
		padding-left: .5em;
		vertical-align: top;
	}
	.categoryPosts li {margin-bottom: 1em}
	.categoryPosts a {text-decoration: none}
}