:root {
  color-scheme: light dark;
  color: light-dark(#000, #BBB);
  background-color: light-dark(#FFF, #000);
}

body {
	font-family: sans-serif;
	margin-right: auto;
	margin-left: auto;
	max-width: 60em;
	padding:0.5em;
}

math {
	font-weight: bolder;
}

/* this makes math display blocks left-aligned, centered, big enough*/
math[display="block"] {
	margin: 1rem;
	> semantics {
		min-width:100%;
		> mtable {
			margin-right: auto;
			margin-left: auto;
			min-width: 80%;
			> mtr > mtd:first-of-type {
				width:0;
			}
		}
	}
}


/* The following two rules make h5 look like what h5 looks like in pandoc-generated latex */
h5:before {
	content:''; 
	display: block;
	margin-top: 1em;
}
h5 {
	font-size:initial;
	display: inline;
	+ p {
		display: inline;
	}
}

h5:after {
	font-weight:bold;
	content:'.';
}


h3 {
	counter-reset: h4count;
	counter-increment: h3count;
}
h3:before {
	content: "§" counter(h3count) " ";
}
h4 {
	counter-increment: h4count;
}
h4:before {
	content: "§" counter(h3count) "." counter(h4count) " ";
}


/*66 = 60 (body width) + max(4,5) (h4, h5):before plus some margin: better using --var I guess */
@media (min-width: 66rem) {
	h3:before {
		display:inline-block;
		width: 3rem;
		text-align: right;
		margin-right: 1rem;
		margin-left: -4rem;
	}
	h4:before {
		display:inline-block;
		width:4rem;
		text-align: right;
		margin-right: 1rem;
		margin-left: -5rem;
	}
}


div.qed {
	text-align: right;
}