html {
	margin: 0 auto;
	max-width: min(120ch, 95vw);
}

body {
	margin: 5ch auto;
	max-width: 80ch;

	font-family: sans-serif;
	font-size: 1rem;
}

header {
	margin-bottom: 2ch;
}

main {
	margin-top: 1ch;
	margin-bottom: 2ch;
}

footer {
	margin-top: 1ch;
}


/* Code snippet */

/* TODO: remove the last child in cmark-custom instead of here */
pre > code > .ln:last-child { display: none; }
pre {
	font-family: monospace;
	counter-reset: code-line-number;

	overflow: scroll;
	box-sizing: border-box;
	padding: 1ch 1ch 1ch 0;
	border: 1px solid black;

	.ln::before {
		position: sticky;
		left: 0;

		counter-increment: code-line-number;
		content: counter(code-line-number);

		padding-left: 1ch;
		padding-right: 1ch;
		margin-right: 1ch;
		background: white;

		color: dimgray;
	}
}

p + pre {
	margin: 1ch 0;
	&:has(+ p) {
		margin: 2ch 0;
	}
}

:not(pre) > code {
	border: 1px solid black;
	padding: 0 .5ch;
	text-wrap: nowrap;
}

/* Figure & Images */

figure, :not(figure) > img {
	max-width: 90%;
	margin: 2ch auto;
}
figcaption {
	margin-top: .5ch;
	text-align: center;
}

/* Misc */

ul {
	list-style: square;
}

li::marker {
	color: dimgray;
}

hgroup > p {
	color: dimgray;
}

time {
	font-size: .9rem;
	color: dimgray;
}

a {
	color: green;
}

main p + p {
	margin-top: 1ch;
}

p + :is(h1, h2, h3) {
	margin-top: 1ch;
}

h1, h2, h3, h4, h5, h6 {
	color: #005a00;
}

footer p {
	text-align: center;
	color: dimgray;
}

hr {
	border-color: whitesmoke;
	width: 70%;
	margin: 0 auto;
}