@font-face {
	font-family: 'Nunito';
	src: local('Nunito'),
		url('/assets/fonts/Nunito.woff2') format('woff2'),
		url('/assets/fonts/Nunito-Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	src: local('Montserrat'),
		url('/assets/fonts/Montserrat.woff2') format('woff2'),
		url('/assets/fonts/Montserrat-Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Fira Code';
	src: local('Fira Code'),
		url('/assets/fonts/FiraCode.woff2') format('woff2');
}

:root {
	/* FONT VARS */
	--main-font:        "Nunito", ui-rounded, Quicksand, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
	--code-font:        "Fira Code", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	--head-font:        "Montserrat", Corbel, 'URW Gothic', source-sans-pro, sans-serif;

	--bold-weight:      600;
	--line-height:      1.6em;
	--main-size:        18px;
	--small-size:       16px;

	--head1-size:       2.488em;
	--head2-size:       2.047em;
	--head3-size:       1.728em;
	--head4-size:       1.44em;
	--head5-size:       1.2em;
	/* h6 is 1em */

	/* COLOR VARS */
	/* palette: https://coolors.co/302f2c-765087-3f7cac-65816d-8b862d-e4a21d-dd7d2c-d5573b-ae4747-fefbf4 */
	--black:            48, 47, 44;    /* #302f2c */
	--purple:           118, 80, 135;  /* #765087 */
	--blue:             63, 124, 172;  /* #3F7CAC */
	--sea-green:        101, 129, 109; /* #65816D */
	--green:            139, 134, 45;  /* #8B862D */
	--yellow:           228, 162, 29;  /* #E4A21D */
	--orange:           221, 125, 44;  /* #DD7D2C */
	--red-orange:       213, 87, 59;   /* #D5573B */
	--red:              174, 71, 80;   /* #AE4750 */
	--white:            254, 251, 244; /* #FEFBF4 */

	/* SECONDARY COLOR VARS */
	--main-text:        var(--black);
	--color-list:       var(--purple); /* list markers, details, tooltips */
	--color-link:       var(--blue); /* links, bookmarks, checkboxes */
	--color-blqt:       var(--sea-green);
	--color-bg:         var(--green);
	--color-nav:        var(--yellow); /* header, title, selection, mark */
	--color-code:       var(--orange); /* code, media borders, hr */
	--color-card:       var(--red-orange);
	--color-table:      var(--red);
	--content-bg:       var(--white);

	/* OTHER VARS */
	--border:           0.1rem solid;
	--underline:        underline wavy 0.08rem;
	--bg-image:         url("/assets/images/bee_pattern.svg");
	--bg-opacity:       0.15;
	--theme-count:      2;
}

@keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-o-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

body {
	color: rgb(var(--main-text));
	background-color: rgb(var(--color-bg));
	font-family: var(--main-font);
	font-size: var(--main-size);
	line-height: 1.5;
	background-image: var(--bg-image);
	background-size: 50%;
}

::selection {
	background-color: rgba(var(--color-nav), var(--bg-opacity));
}

a {
	color: rgb(var(--color-link));
	text-decoration: var(--underline) transparent;
	transition: text-decoration 0.2s ease-in-out;

	&:hover {
		text-decoration: var(--underline) currentColor;
	}
}

a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([href^="tel:"]):not([name])::after {
	content: "↗";
	font-size: 1em;
	font-style: normal !important;
	font-weight: var(--main-weight) !important;
	font-family: var(--code-font);
	opacity: 0.6;
}

h1,
h2,
h3,
h4 {
	text-align: center;
	font-weight: var(--bold-weight);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--head-font);
	text-transform: uppercase;
}

h1 {
	color: rgb(var(--color-link));
	margin-block: 5rem 3rem;
	font-size: var(--head1-size);
}

h1:has(time) {
	margin-block: 5rem 0.2rem;
}

h2 {
	font-size: var(--head2-size);
	background-color: rgb(var(--color-nav));
	color: rgb(var(--content-bg));
	border-radius: 0.5rem;
	padding-inline: 0.5rem;

	&::selection {
		background-color: rgba(var(--content-bg), var(--bg-opacity));
	}
}

h3 {
	font-size: var(--head3-size);
	font-style: italic;
}

h4 {
	font-size: var(--head4-size);
}

h5 {
	font-size: var(--head5-size);
}

h6 {
	font-size: 1em;
	font-style: italic;
}

blockquote {
	--color: var(--color-blqt);

	border: var(--border) rgb(var(--color));
	border-left: 0.5rem solid rgb(var(--color));
	background-color: rgba(var(--color), var(--bg-opacity));
	padding: 0.5rem 1rem;
	margin: 1rem 0;
	border-radius: 0.5rem;

	>*:first-child {
		margin-top: 0;
	}

	>*:last-child {
		margin-bottom: 0;
	}
}

iframe {
	display: block;
	max-width: 100%;
	margin: 1em auto;
	border-radius: 0.5rem;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1em auto;
	border-radius: 0.5rem;
}

figure {
	margin-inline: 0;
}

figcaption,
.caption {
	font-size: var(--small-size);
	color: rgb(var(--color-code));
	font-style: italic;
	text-align: center;
}

.caption {
	margin-top: -0.1rem;
}

ul,
ol {
	padding-inline-start: 1.5rem;

	li {
		margin-block: 0.5em;

		&::marker {
			color: rgb(var(--color-list));
		}
	}
}

hr {
	--color: var(--color-code);

	border: unset;
	border-bottom: var(--border) rgb(var(--color));
}

button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	font-size: inherit;
	font-family: inherit;
	font-weight: bold;
	letter-spacing: .05rem;
	color: rgb(var(--content-bg));
	text-transform: uppercase;
	padding: .25rem .5rem;
	background: rgb(var(--color-link));
	border-radius: 0.5em;
	transition: transform .2s cubic-bezier(0, 0, 0.58, 1), background .2s cubic-bezier(0, 0, 0.58, 1);

	&:hover,
	&:focus {
		transform: translate(0, 0.25em);
	}

	&:active {
		transform: translate(0, 0.75em);
	}
}

mark {
	--color: var(--color-nav);

	border-radius: 0.2rem;
	padding: 0.1em;
	background-color: rgba(var(--color), var(--bg-opacity));
	color: inherit;
}

kbd,
code {
	--color: var(--color-code);

	border-radius: 0.2rem;
	padding: 0.1em 0.3em;
	background-color: rgba(var(--color), var(--bg-opacity));
	color: rgb(var(--color));
	font-family: var(--code-font);
	font-size: var(--small-size);
}

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
}

table {
	--color: var(--color-table);

	border: var(--border) rgb(var(--color));
	border-spacing: 0;
	border-collapse: collapse;
	margin: 1em auto;

	tr,
	td {
		border: none;
		padding: .3em;
	}

	/* styles header row plus header column if class=header-column */
	th,
	&.header-column td:first-child {
		background-color: rgb(var(--color));
		color: rgb(var(--content-bg));
		font-style: normal;
		font-weight: var(--bold-weight);
		text-transform: uppercase;
		padding: .3em;
	}

	tr:nth-child(even) {
		background-color: rgba(var(--color), var(--bg-opacity));
	}
}

details {
	--color: var(--color-list);

	background-color: rgba(var(--color), var(--bg-opacity));
	border: var(--border) rgb(var(--color));
	border-radius: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	margin: 0.5rem 0;

	summary {
		cursor: pointer;
		color: rgb(var(--color));
		font-weight: var(--bold-weight);
	}
}

/* ALIGNMENTS */
.right {
	float: right;
	margin-inline-start: 1em;
}

.left {
	float: left;
	margin-inline-end: 1em;
}

.center {
	display: block;
	margin-inline: auto;
	text-align: center;
}

sup {
	vertical-align: super;
	line-height: 0.5em;
}

/* CUSTOM ELEMENTS */
blockquote,
.bookmark,
.box,
.card,
.callout,
details,
#postMeta dl,
.series,
.thought {
	li::marker {
		color: rgb(var(--color));
	}

	blockquote {
		border-left: .5rem solid rgb(var(--color));
		background-color: rgba(var(--color), var(--bg-opacity));
	}

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

	mark {
		color: inherit;
		background-color: rgba(var(--color), var(--bg-opacity));
	}
}

.adn {
	--color: var(--color-code);
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	line-height: 2;
	font-size: var(--head5-size);

	a {
		color: rgb(var(--color));
	}

	p, div {
		padding-inline: 1rem;
	}

	>p:nth-of-type(even) {
		padding-left: 2.5rem;
	}

	>p:nth-of-type(odd) {
		background-color: rgba(var(--main-text), calc(var(--bg-opacity) / 3));
	}

	.tooltip::before {
		font-size: 0.75em;
	}
}

.ambig {
	--ct: 2;

	font-family: var(--code-font);
	display: inline-grid;
	grid-template-rows: repeat(var(--ct),
			calc(var(--main-size) / calc(var(--ct) * var(--ct) * 10)));

	&:hover {
		grid-template-rows: repeat(var(--ct), var(--main-size));
	}

	&:hover :not(.choice) {
		text-decoration: line-through 0.1rem currentColor;
	}
}

.attr {
	font-size: var(--small-size);
	text-align: right !important;
}

.bookmark {
	--color: var(--color-link);

	border-radius: .5rem;
	border: var(--border) rgb(var(--color));
	margin: 1em 0;
	color: var(--color);
	background-color: rgba(var(--color), var(--bg-opacity));
	overflow: hidden;

	a,
	a:hover {
		text-decoration: none;
	}

	a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([href^="tel:"]):not([name])::after {
		content: none;
	}

	.bookmark-head {
		background-color: rgb(var(--color));
		color: rgb(var(--content-bg));
		padding: 1rem 1.5rem .5rem 1.5rem;
		margin-top: -2px;

		& hr {
			border-color: rgb(var(--content-bg));
		}
	}

	.bookmark-title {
		text-align: center;
		font-size: var(--head3-size);
		font-family: var(--head-font);
		font-weight: var(--bold-weight);
		text-transform: uppercase;
	}

	.bookmark-description {
		margin-top: 1rem;
	}

	.bookmark-foot {
		padding: 1rem 1.5rem 1rem 1.5rem;
		margin-bottom: -2px;
		transition: all .35s ease-in-out;

		&::after {
			content: " →";
			color: transparent;
		}
	}

	&:hover {
		.bookmark-foot {
			background-color: rgb(var(--color));
			color: rgb(var(--content-bg));
			margin-bottom: -2px;

			&::after {
				color: rgb(var(--content-bg));
			}
		}
	}
}

.box {
	--color: var(--color-bg);
	background-color: rgba(var(--color), var(--bg-opacity));
	border: var(--border) rgb(var(--color));
	border-radius: 0.5rem;
	padding: 1rem;

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}
}

.buttons {
	.row {
		line-height: 10px;
		flex-wrap: wrap;
		justify-content: center;
	}

	a {
		transition: all .2s cubic-bezier(0, 0, 0.58, 1);

		&:hover,
		&:focus {
			transform: translate(0, 0.25em);
			background-color: transparent;
		}

		&:active {
			transform: translate(0, 0.75em);
		}
	}

	a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([href^="tel:"]):not([name])::after {
		content: none;
	}

	.button-img,
	img {
		display: inline-block;
		text-align: center;
		line-height: 31px;
		width: 88px;
		height: 31px;
		background-color: transparent;
		text-transform: uppercase;
		font-family: var(--head-font);
		font-weight: var(--bold-weight);
		margin: .2rem .5rem;
		border-radius: 0;
	}
}

.callout {
	--color: var(--color-nav);

	position: relative;
	margin: 0 0 1.5rem;
	background: rgba(var(--color), var(--bg-opacity));
	border: var(--border) rgb(var(--color));
	border-radius: 0.5rem;
	display: grid;
	grid-template-columns: 3rem auto;


	svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.icon {
		background: rgb(var(--color));
		color: rgb(var(--content-bg));
		display: grid;
		place-items: center;
		border-radius: 0.4rem 0 0 0.4rem;
	}

	.body {
		padding: 1rem;

		*:first-child {
			margin-top: 0;
		}

		*:last-child {
			margin-bottom: 0;
		}
	}
}

.card {
	--color: var(--color-card);
	border-radius: .5rem;

	border: var(--border) rgb(var(--color));
	background-color: rgba(var(--color), var(--bg-opacity));
	margin: 1rem 0;
	padding: 0 1rem;

	.title,
	.title a {
		background: rgb(var(--color));
		color: rgb(var(--content-bg));
		border-radius: .5rem .5rem 0 0;
		margin: -.1rem -1rem 1rem -1rem;
		padding: 0.2rem;
		text-align: center;
		font-size: var(--head3-size);
	}

	p.title {
		font-family: var(--head-font);
		font-style: italic;
		font-weight: var(--bold-weight);
		text-transform: uppercase;
	}

	.date {
		float: right;
		color: rgb(var(--color));
		font-family: var(--code-font);
		margin-top: 0;
	}
}

.cit {
	padding-left: 2em;
	text-indent: -2em;
}

.elegy {
	margin: 0.5rem;

	p {
		margin: 0;
	}

	>p:nth-of-type(even) {
		padding-left: 1.5rem;
	}
}

.grid {
	display: grid;
	gap: var(--line-height);
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: flex-start;
	align-content: space-between;
	margin: 1rem 0;

	>*>*:first-child {
		margin-top: 0;
	}

	>*>*:last-child {
		margin-bottom: 0;
	}
}

.ingredients {
	li {
		list-style-type: none;
		display: block;
		position: relative;
		padding-left: 1.5em;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;
		}

		&:hover input~.checkmark {
			background-color: rgba(var(--color-nav), 0.15);
		}

		input:checked~.checkmark {
			background-color: rgb(var(--color-link));
		}

		input:checked~.checkmark:after {
			display: block;
		}
	}

	.checkmark {
		position: absolute;
		top: 0.2em;
		left: 0;
		height: 1em;
		width: 1em;
		border: var(--border) rgb(var(--color-link));
		border-radius: .1rem;

		&::after {
			content: "";
			position: absolute;
			display: none;

			left: .25em;
			top: .05em;
			width: .3em;
			height: .6em;
			border: solid rgb(var(--content-bg));
			border-width: 0 2px 2px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	}
}

.lnno {
	float:right;
}

.row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
}

.shadow {
	--color: var(--color-list);

	width: calc(100% - 0.5rem);
	box-shadow: 0.5em 0.5em 0 0 rgb(var(--color));
}

.sidebar {
	position: sticky;
	top: 2rem;
}

.swatches {
	--col-no: 1;

	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(var(--col-no), 1fr);
	height: 50vh;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	margin-bottom: 0.5rem;
	color: rgb(var(--content-bg));

	>* {
		--color: var(--main-text);

		display: inline;
		text-align: right;
		writing-mode: vertical-lr;
		padding-bottom: 20%;
		padding-block: calc(50% - calc(1.6em / 2));
		font-size: var(--small-size);
		text-transform: uppercase;
		overflow: hidden;
		background-color: rgb(var(--color));

		&.dark {
			color: rgb(var(--white));
		}

		&.light {
			color: rgb(var(--black));
		}
	}
}

.text {
	margin-right: 6rem;
	font-style: italic;
}

.thought {
	--color: var(--color-link);
	border-radius: .5rem;
	border: var(--border) rgb(var(--color));
	font-family: var(--code-font);
	font-size: var(--small-size);
	margin-block: 1rem;

	.body {
		padding: 0.5rem 1rem;
	}

	.date {
		border-radius: 0 0 0.4rem 0.4rem;
		background-color: rgba(var(--color), var(--bg-opacity));
		border-top: var(--border) rgb(var(--color));
		padding: 0.1rem 1rem;
		text-align: center;
		color: rgb(var(--color));
	}
}

.thoughts {
	margin: 0 auto;
	border-radius: .5rem;
	border: var(--border) rgb(var(--color-link));

	>div {
		margin-inline: 1rem;
	}

	p:last-of-type {
		border-radius: 0 0 0.4rem 0.4rem;
		background-color: rgba(var(--color-link), var(--bg-opacity));
		border-top: var(--border) rgb(var(--color-link));
		padding-inline: 1rem;
		text-align: right;
		color: rgb(var(--color-link));
		margin: 0;
		transition: all .35s ease-in-out;

		&:hover {
			background-color: rgb(var(--color-link));
			color: rgb(var(--content-bg));
		}
	}

	>a {
		text-decoration: none;
	}
}

.toc {
	hyphens: none;
	font-family: var(--code-font);
	font-size: var(--small-size);
	padding-left: 0;

	a {
		text-decoration: none !important;

		&:not(:last-child)::after {
			content: " ";
		}
	}

	>ul {
		padding-inline-start: 0;
	}

	li,
	>ul>li.box {
		list-style-type: none;
		border: var(--border) rgb(var(--color));
		position: relative;
		display: inline-block;
		cursor: pointer;
		outline: none;
		text-decoration: none;
		text-transform: uppercase;
		padding: .25rem .5rem !important;
		margin: 0.5rem 0.2rem !important;
		border-radius: 0.5em;
		transition: transform .2s cubic-bezier(0, 0, 0.58, 1), background-color .35s ease-in-out;

		&:hover,
		&:focus {
			background-color: rgba(var(--color), calc(var(--bg-opacity) * 2));
		}

		&:active {
			transform: translate(0, 0.75em);
			background-color: rgba(var(--color), 0.5);
		}
	}
}

.tooltip {
	position: relative;
	text-indent: 0 !important;
	font-style: normal;
	font-weight: var(--main-weight);

	&::before {
		position: absolute;
		content: attr(data-text);
		background: rgb(var(--color-list));
		box-shadow: 0 4px 8px 0 rgba(var(--black), var(--bg-opacity)), 0 6px 20px 0 rgba(var(--black), 0.14);
		color: rgb(var(--content-bg));
		text-align: left;
		text-transform: none;
		font-weight: initial;
		font-size: var(--small-size);
		font-family: var(--main-font);
		transform: translateX(-50%);
		left: 50%;
		bottom: 115%;
		width: max-content;
		max-width: 400px;
		line-height: 1.2;
		padding: .3em .5em;
		border-radius: .5rem;
		z-index: 1089;
		display: block;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease-in;
	}

	&:hover::before {
		visibility: visible;
		opacity: 1;
	}
}

/* FUNCTIONAL CLASSES */
#skip-link {
	padding: 6px;
	position: absolute;
	top: 0px;
	left: 0px;
	color: rgb(var(--main-text));
	background-color: rgb(var(--content-bg));
	transform: translateY(-100%);
	transition: transform .2s ease-out;
}

#skip-link:focus {
	transform: translateY(0%);
	transition: transform 0.2s ease-in;
}

#switches {
	--theme-size: 2rem;

	position: sticky;
	top: 92vh;
	margin-bottom: -50px;
	margin-left: 1.5rem;

	display: grid;
	grid-template-columns: repeat(calc(var(--theme-count) + 1), calc(var(--theme-size) / 1.75));
	padding: 0.08em;
	font-size: var(--theme-size);

	@media screen and (max-width:1150px) {
		position: absolute;
		top: 0;
		margin-bottom: 0;

		.tooltip::before {
			bottom: -115%;
		}
	}

	.switch {
		display: block;
		border: var(--border) rgb(var(--main-text));
		border-radius: 50%;
		width: var(--theme-size);
		height: var(--theme-size);
		cursor: pointer;
		transition: transform .2s ease-in-out;

		&:hover~*,
		&:focus-within~* {
			transform: translateX(33%);
		}
	}
}

#content {
	width: 80%;
	max-width: 900px;
	margin: 2rem auto;
	background-color: rgb(var(--content-bg));
	border: var(--border) rgb(var(--color-nav));
	border-radius: 0.5rem;
}

#header {
	padding: .5rem 1rem 0.25rem 1rem;
	border-bottom: var(--border) rgb(var(--color-nav));
	background-color: rgba(var(--color-nav), var(--bg-opacity));
	border-radius: 0.5rem 0.5rem 0 0;

	nav {
		font-size: 1.2em;
		text-transform: uppercase;
		font-weight: var(--bold-weight);

		p {
			float: left;
			margin: 0 0.5rem 0 0;
			font-family: var(--head-font);

			a,
			a:hover,
			a:visited {
				color: rgb(var(--color-nav));
				text-decoration: none;
			}
		}

		ul {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-end;
			margin: 0;
			padding-left: 0.5rem;
			list-style-type: none;

			li {
				display: inline;
				margin-right: 0.5rem;
				margin-block: 0;

				a,
				a:hover,
				a:visited {
					color: rgb(var(--main-text));
					text-decoration: none;
				}
			}
		}
	}

	#headerMessage {
		margin-block: 0.2em;
		line-height: 1.4em;
		font-style: italic;

		a {
			color: inherit;
			background-color: inherit;
		}

		>svg {
			vertical-align: middle;
			margin-bottom: .2em;
			-webkit-animation: flickerAnimation 2s infinite;
			-moz-animation: flickerAnimation 2s infinite;
			-o-animation: flickerAnimation 2s infinite;
			animation: flickerAnimation 2s infinite;
		}
	}
}

#main {
	padding: 1rem 2rem;
}

#footer {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	padding: 0.5rem 1rem;
	border-top: var(--border) rgb(var(--color-nav));
	background-color: rgba(var(--color-nav), var(--bg-opacity));
	font-size: var(--small-size);

	a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href^="mailto:"]):not([href^="tel:"]):not([name])::after {
		content: "";
	}

	nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;

		ul {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-end;
			margin: 1em 0;
			padding: 0;
			list-style-type: none;

			li {
				display: inline;
				margin-right: 0.5rem;
				margin-block: 0;
				text-align: right;

				&::after {
					content: " | ";
				}
			}
		}

		a {
			color: rgb(var(--color-nav));
		}

		p {
			text-align: right;
			clear: right;
		}
	}
}

time#postDate {
	display: block;
	font-style: italic;
	text-align: center;
	font-size: var(--small-size);
	margin-bottom: 3rem;
}

.pageTitle {
	text-transform: uppercase;
	font-family: var(--head-font);
	font-weight: var(--bold-weight);
}

.index,
#postMeta {
	--color: var(--color-nav);

	dt {
		display: block;
		float: left;
		margin-right: 0.3em;

		&::after {
			content: ": ";
		}
	}

	dd {
		margin-inline-start: 0;
		list-style-type: none;

		ul {
			padding-left: 0;
		}

		li {
			display: inline;
			margin-inline-start: 0;
			list-style-type: none;

			&:not(:last-child)::after {
				content: ", ";
			}
		}
	}

	dd:not(:last-child) {
		margin-bottom: 0.5rem;
	}

	>ol,
	>ul {
		list-style: none;
		padding-left: 0;

		>li {
			padding: 1rem;
			margin-block: 1rem;
		}
	}

	dl {
		background-color: rgba(var(--color), var(--bg-opacity));
		border: var(--border) rgb(var(--color));
		border-radius: 0.5rem;
		padding: 1rem;
		margin-block: 1rem;
	}
}

#postMeta {
	margin-top: 3rem;
	margin-bottom: 5rem;
}

#recentPosts>p:last-child {
	text-align: right;
}

.index {
	details {
		padding: 1rem;
		margin-block: 1rem;
	}
}

ol.index,
ul.index {
	list-style: none;
	padding-left: 0;

	>li {
		padding: 1rem;
		margin-block: 1rem;
	}
}

.series {
	--color: var(--color-link);

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-block: 1rem;
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
	align-items: center;
	background-color: rgba(var(--color), var(--bg-opacity));
	border: var(--border) rgb(var(--color));


	div:nth-child(2) {
		text-align: center;
	}

	div:last-child {
		text-align: right;
	}
}

@media (max-width: 600px) {
	body {
		font-size: 0.9em;
	}

	.grid{
		grid-template-columns: 1fr;
	}
}