:root {
	--main-width: 55%;
	--sidebar-max-width: 200px;
}

.page { /* wrapper around everything */
	grid-template-rows: auto max-content max-content 1fr; /* vertical sizes */
	grid-template-columns: minmax(180px,max-content) 1fr; /* horizontal sizes */
	grid-template-areas: "l ."
						 "h m"
						 "t m"
						 "r m"
						 "f f";
}
@media screen and (max-width: 999px ) {
	.page {
		grid-template-columns: 1fr;
		grid-template-areas: "l"
							 "h"
							 "m"
							 "t"
							 "r"
							 "f";
	}
}

.related {
	grid-area: r;
	margin: 0.85em 1.2em;
}
.related h2 {
	font-size: 0.9em;
}
.related li {
	padding: 3px 0;
	max-width: var(--sidebar-max-width);
}
.related a {
	font-size: 0.8em;
	font-style: italic;
	word-break: break-all;
	white-space: nowrap;
	text-decoration: none;
	-webkit-text-decoration: none;
	background: -webkit-linear-gradient(currentColor, currentColor);
	background: linear-gradient(currentColor, currentColor);
	-webkit-background-size:  1px 1px;
	-moz-background-size: 1px 1px;
	background-size: 1px 1px;
	background-repeat: repeat-x;
	background-position: 0% 93%;
	text-shadow: 0.03em 0 var(--bg-col), -0.03em 0 var(--bg-col), 0 0.03em var(--bg-col), 0 -0.03em var(--bg-col), 0.06em 0 var(--bg-col), -0.06em 0 var(--bg-col), 0.09em 0 var(--bg-col), -0.09em 0 var(--bg-col), 0.12em 0 var(--bg-col), -0.12em 0 var(--bg-col), 0.15em 0 var(--bg-col), -0.15em 0 var(--bg-col);
	transition: color,text-shadow var(--trans-dflt);
}
@media screen and (max-width: 999px ) {
	.related {
		border-top: 1px solid var(--midgrey-col);
		margin: 0.85em 0;
		padding: 1rem 0;
	}
	.related h2 {
		font-size: 1.2em;
		padding-bottom: 5px;
	}
	.related li {
		padding: 8px 0;
		max-width: 100%;
	}
	.related a {
		font-size: 1em;
	}
}

.tags {
	grid-area: t;
	padding: 0 5px;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	font-size: .75rem;
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	max-width: var(--sidebar-max-width);
}
@media screen and (max-width: 999px ) {
	.tags {
		max-width: 100%
	}
}
.tags a {
	margin: 3px 4px;
	padding: 5px;
	background: var(--txt-col);
	color: var(--bg-col);
	opacity: 0.2;
	border-radius: 2px;
	transition: var(--trans-all);
	display: inline-block;
}
.tags a:hover {
	opacity: 1;
}
.tags .tagcount {
	margin-left: 4px;
	padding-left: 5px;
	border-left: 2px dotted var(--bg-col);
}

article > header {
	width: var(--main-width);
}

article > header time {
	font-size: 0.7em;
	color: var(--txt-lt-col);
}

section > p,
section > div.himg,
section > footer,
section > table,
section > ul,
section > ol,
.update > p {
	width: var(--main-width);
}

section > ul li {
	/* ::marker styling not really well supported at the moment */
	list-style: circle;
	margin-left: 1em;
}

section {
	padding: 1rem 0;
}
section.star {
	padding-bottom: 3rem;
}
section.star::after {
	content: "\A⁂"; /* \A => css Newline char (0x0A) */
	font-size: 2rem;
	white-space: pre; /* important! otherwise the newline char does nothing */
	text-align: center; /* does prolly nuffin */
	position: relative;
	left: calc(var(--main-width)/2 - 1.5rem); /* hopefully close to center */
	top: 1.2rem;
}
section.star > p:last-of-type {
	margin-bottom: 0;
	/* don't have a margin when we have star */
}
.text section:last-child::after {
	content: "\A✾"; /* \A => css Newline char (0x0A) */
	font-size: 2rem;
	white-space: pre; /* important! otherwise the newline char does nothing */
	text-align: center;
	position: relative;
	left: calc(var(--main-width)/2 - 1.5rem); /* hopefully close to center */
	top: -2rem;
	color: var(--red-col);
}

blockquote:not(.remark):not(.epigraph)  {
	border-left: 3px solid var(--litegrey-col);
	border-top: 3px solid var(--litegrey-col);
	border-right: 3px solid var(--midgrey-col);
	border-bottom: 3px solid var(--midgrey-col);
	border-radius: 25px 0 25px 0;
	width: var(--main-width);
	box-shadow:
		0 3.3px 1.7px -12px rgba(0, 0, 0, 0.01),
		0 6.1px 5.7px -12px rgba(0, 0, 0, 0.015),
		0 8.6px 12.4px -12px rgba(0, 0, 0, 0.018),
		0 11px 22.4px -12px rgba(0, 0, 0, 0.022),
		0 13.2px 36.6px -12px rgba(0, 0, 0, 0.025),
		0 15.2px 56px -12px rgba(0, 0, 0, 0.03),
		0 17px 80px -12px rgba(0, 0, 0, 0.04);
}
blockquote p {
	margin-bottom: 0 !important;
	padding: 7px 0 5px 10px;
	font-size: 0.9em !important;
	line-height: 1.55em !important;
}
blockquote footer {
	width: var(--main-width);
	font-size: 1.1rem;
	text-align: right;
}
blockquote.remark,
blockquote.epigraph {
	font-style: italic;
	font-size: 1.05em;
	letter-spacing: 0.02em;
	padding-left: 1rem;
}
blockquote.remark {
	color: var(--txt-lt-col);
}
blockquote.epigraph footer {
	font-style: normal;
}

pre {
	width: var(--main-width);
	margin-left: 2.5%;
}
pre.fullwidth {
	width: 90%;
	clear: both;
}
.sidenote > code,
.marginnote > code {
	font-size: 0.8em;
}

/***** IMAGES *****/
section > figure {
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	margin: 0 0 3em 0;
}
:not(div):not(.himg) > figure {
	/* nur für Fließtextbilder */
	max-width: var(--main-width);
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
figcaption {
	font-family: minima, sans-serif !important;
	font-size: 0.7em;
	margin-bottom: 1rem;
	line-height: 1.6;
	vertical-align: baseline;
}
figcaption:not([id^=tobi]) {
	/* nur für Fließtextbilder */
	margin-left: 15%;
	text-align: right;
}
/* class for small pictures viewed table like, floated right */
.himg {
	display: grid;
	grid-template-columns: auto calc(var(--main-width)*0.4);
	grid-template-rows: auto;
	gap: 1em 1.5em; /* row column */
}
.himg figure {
	justify-self: end;
}
.text img {
	max-width: 100%;
}

#title {
	padding: 0 0 10vh;
	text-align: center;
}

#title h1 {
	font-weight: 400;
	font-size: calc(1vw + 2rem);
	margin-bottom: 1rem;
}

.video {
	position: relative;
	padding-bottom: calc(var(--main-width) / (16/9)) !important; /* 16:9 */
	padding-top: 25px;
	margin-top: 1.8rem;
	height: 0;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
video {
	width: var(--main-width);
}

.sidenote,
.marginnote {
	float: right;
	clear: right;
	margin-right: -60%;
	width: 50%;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.1rem;
	line-height: 1.3;
	vertical-align: baseline;
	position: relative;
	top: 0.4rem;
}
.sidenote-number {
	counter-increment: sidenote-counter;
	margin-right: 3px;
}
.sidenote-number:after,
.sidenote:before {
	font-family: et-book-roman-old-style;
	position: relative;
	vertical-align: baseline;
}
.sidenote-number:after {
	content: counter(sidenote-counter);
	font-size: 1rem;
	top: -0.5rem;
	left: 0.1rem;
}
.sidenote:before {
	content: counter(sidenote-counter) " ";
	font-size: 1rem;
	top: -0.5rem;
}
input.margin-toggle {
	display: none;
}
label.sidenote-number {
	display: inline;
}
label.margin-toggle:not(.sidenote-number) {
	display: none;
}
.marginnote > img {
	padding-bottom: 5px;
	display: block;
}

.update {
	margin-bottom: 2rem;
}
.update h3 {
	padding-bottom: 0.8rem;
}

/* style the https://utterranc.es comments */
.utterances {
	margin: 0 !important;
	width: var(--main-width); /* aligns the comment section with the text part */
}


@media screen and (max-width: 999px) {
	:root {
		--main-width: 100%;
		/* this auto sets the width for:;
			article > header,
			hr,
			section > p,
			section > footer,
			section > table,
			pre,
			blockquote p,
			blockquote footer
		*/
	}

	blockquote {
		margin-left: 1.5em;
		margin-right: 0em;
	}

	label.margin-toggle:not(.sidenote-number) {
		display: inline;
	}
	.sidenote,
	.marginnote {
		display: none;
	}
	.margin-toggle:checked + .sidenote,
	.margin-toggle:checked + .marginnote {
		display: block;
		float: left;
		left: 1rem;
		clear: both;
		width: 95%;
		margin: 1rem 2.5%;
		position: relative;
	}
	.margin-toggle {
		margin: 0 4px 0 5px;
		font-size: 1.3em;
	}
	label {
		color: var(--contrast-col);
		cursor: pointer;
		transition: var(--trans-all);
	}
	label:hover {
		color: var(--hazard-col);
	}

}