/* ettedh's webpage
 * Default theme is based on example.com CSS.
 * Print theme is modified from AGPLv3 code;
 * see github://lowtechmag/solar_v2 */

:root {
	--text:      black;
	--page:      white;
	--bg-color:  whitesmoke;
	--gray:      dimgray;
	--highlight: #2684d6;
	--lowlight:  #0063bf;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text:      beige;
		--page:      #1b1b1b;
		--bg-color:  #222;
		--gray:      #a89984;
		--highlight: #fabd2f;
		--lowlight:  #d79921;
	}
	img:not(:hover) { filter: invert(0.9); }
}

body {
	font-family: "Charis SIL", "Noto Serif", "Georgia", serif;
	background: var(--bg-color);
	margin: 0; padding: 0;
	color: var(--text);
}

header {
	max-width: 40ch;
	font-size: 1.75em;
	text-align: right;
	margin: 0.30em auto;
	padding: 0 1ch;
}

aside, figcaption {
	font-style: italic;
	color: var(--gray);
}

main {
	max-width: 70ch;
	margin: 0 auto 1em auto;
	padding: 2em;
	background-color: var(--page);
	border-radius: 0.5em;
	box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
}

footer {
	max-width: 70ch;
	margin: 0 auto 5em;
}

h1, h2 { margin-top: 0; margin-bottom: 0; }

h4, h5, h6 {
	font-size: 1em;
	float: left;
	margin: 0 1ch 0 0;
	line-height: 1.7em;
}

h5, h6 { font-style: italic; }

h4::after, h5::after, h6::after { content: "."; }

a {text-decoration: none; }
a:link    { color: var(--highlight); }
a:visited { color: var(--lowlight); }
a:hover   { color: var(--highlight); text-decoration: underline; }

a.external::after {
	vertical-align: top;
	font-size: 0.6em;
	content: " ↗";
}

.small-caps {font-variant-caps: all-small-caps;}

p, li {	line-height: 1.7em; }

p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}

blockquote {
	font-size: smaller;
	margin: 0 40px;
}

img { max-width: 100%; }

figcaption {
	font-size: smaller;
	line-height: 1.2em;
	}

hr { margin: 1em; }

aside, p[rel="author"], sup { line-height: 1em; }

table {line-height: 1.2em;}

p[rel="author"] { font-weight: bold; }

::selection {
	background: var(--text);
	color:      var(--page);
}

@media (max-width: 40em) {
	header { font-size: 1.3em; }
	main {
		margin: 0 auto;
		width: auto;
		padding: 1em;
	}

	p { text-align: left; }
	blockquote { margin: 0 0 0 20pt; }
	figure {
		margin-inline-start: 1em;
		margin-inline-end: 1em;
	}
	footer { margin: 0.5em auto; }
}

@media print {
	html {
		font-size: 10.5pt;
	}
	body { background: none; }
	header, footer, .taglist, .footnote-backref { display: none; }
	main {
		padding: 0 1em;
		max-width: 100%;
		columns: 2;
		column-gap: 20pt;
		box-shadow: unset;
	}
	/*a {color: black; }*/
	p, li, h1, h2, h3, h4, h5, h6 { line-height: 1.3em;}
	img { page-break-inside: avoid; }
	blockquote { margin: 0 0 0 20pt; }
	sup {
		::before { content: "["}
		::after { content: "]"}
	}
	a:link, a:visited {
		color: inherit;
    }
}

ul#tagcloud {
	margin-bottom: 0;
	li {
		display: inline;
		padding-right: 1ch;
	}
}

#nextprev { overflow: hidden }

#prevart {
	float: left;
	text-align: left;
}
#nextart {
	float: right;
	text-align: right;
}
#nextart,#prevart { max-width: 45%; }