html {
	background: #100e0d;
	color: white;
	font: 16px / 24px "Noto Serif", serif;
}

body {
	max-width: 64rem;
	margin: 1rem auto;
}

div.post {
	background: #211e1c;
	border: solid grey 2px;
	padding: 1.5rem;

	img {
		max-width: 100%;
	}

	h2 {
		margin-top: unset;

		>a {
			all: unset;
			text-decoration: underline;
		}
	}

	blockquote {
		--border-color: white;

		font-size: 0.875rem;
		line-height: 1.5;
		border-left: 3px solid var(--border-color);
		padding: 0.5em;
		padding-left: 1rem;
		margin-left: 1rem;

		&.AuthorBlocked {
			--border-color: maroon;
			font-style: italic;
		}
	}

	&.AuthorBlocked {
		border: solid maroon 2px;

		>div {
			font-style: italic;
		}
	}

	&+div.post {
		margin-top: 1.5rem;
	}

	pre {
		white-space: pre-wrap;
	}

	details {
		border: 2px solid gray;
		padding: 0.5rem 1rem;
		margin: 1rem 0;

		>details {
			font-style: italic;
		}
	}

	details[open]>summary {
		padding-bottom: 0.5rem;
	}

	details:not([open])>summary::before {
		content: 'Click to show spoilers'
	}

	details[open]>summary::before {
		content: 'Click to hide spoilers'
	}
}

:root {
	--link-color: orange;
}

a,
a:visited {
	color: var(--link-color);
}

.pagination {
	display: grid;
	grid-template-columns: 1fr max-content 1fr;
	grid-template-areas: 'prev label next';

	padding: 1rem;
	font-size: 1.5rem;

	a {
		all: unset;
		text-decoration: underline;
		color: var(--link-color);
	}

	.pagination__prev {
		grid-area: prev;
	}

	.pagination__label {
		grid-area: label;
	}

	.pagination__next {
		grid-area: next;
		text-align: right;
	}
}

.SearchWordExample {
	font-weight: bold;
}

.search {
	td {
		vertical-align: top;
	}
}