/* !- Defaults */
:root {
	--bg: #f5f5f0;
	--text: #2b2b2b;

	--border-radius: 0.5rem;

	--content-max: 40rem;
	--pad-x: clamp(1rem, 4vw, 1.5rem);
	--pad-t: 3rem;
	--pad-b: 1.5rem;

	--sans-serif: system-ui, sans-serif;
	--serif: -apple-system-ui-serif, ui-serif, "Georgia", serif;
	--monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* !- Purple theme */
.theme-purple {
	--bg: #cfc9eb;
	--text: #4b4a59;
	/*
	--link: #2a9d8f;
	--accent: #e76f51;
	*/
	--link: #5c4d9f;
	--accent: #9b5de5;
}

/* !- Green theme */
.theme-green {
	--bg: #d0e9e3;
	--text: #333;
	--link: #0077b6;
	--accent: #ff6f61;
	--dark-accent: rgba(51, 51, 51, 0.25);
}

/* !- Blue theme */
.theme-blue {
	--bg: #c6e1f0;
	--text: #02080c;
	--link: #005f73;
	--accent: #ee6c4d;
	--dark-accent: rgba(2, 8, 12, 0.25);
}

/* !- Orange theme */
.theme-orange {
	--bg: #ffd6a5;
	--text: #5c4033;
	--link: #2a6f97;
	--accent: #ff6f61;
	--dark-accent: rgba(92, 64, 51, 0.25);
}

/* !- Pink theme */
.theme-pink {
	--bg: #ffe0e0;
	--text: #805757;
	--link: #3a86ff;
	--accent: #ff4d6d;
	--dark-accent: rgba(128, 87, 87, 0.25);
}

/* !- Yellow theme */
.theme-yellow {
	--bg: #fdffb6;
	--text: #474830;
	--link: #457b9d;
	--accent: #e63946;
	--dark-accent: rgba(71, 72, 48, 0.25);
}

/* !- Newsprint theme */
.theme-newsprint {
	--bg: #f5f5f0;
	--text: #2b2b2b;
	--link: #003049;
	--accent: #d62828;
	--dark-accent: #b08968;
}

/* !- Pastel breeze theme */
.theme-pastel-breeze {
	--bg: #c5f0f5;
	--text: #37474f;
	--link: #7e57c2;
	--accent: #f48fb1;
	--dark-accent: rgba(55, 71, 79, 0.25);
}

/* !- Dark theme */
.theme-dark {
	--bg: #192432;
	--text: #fffaf0;
	--link: #4fc9e4;
	--accent: #f535aa;
	--dark-accent: rgba(255, 250, 240, 0.25);
}

@media (prefers-color-scheme: dark) {
	.theme-purple,
	.theme-green,
	.theme-blue,
	.theme-orange,
	.theme-pink,
	.theme-yellow,
	.theme-newsprint,
	.theme-pastel-breeze,
	.theme-dark {
		--bg: #192432;
		--text: #cbd2db;
		--link: #4fc9e4;
		--accent: #f535aa;
		--dark-accent: rgba(203, 210, 219, 0.25);
	}

	h1,
	h2,
	h3,
	h4 {
		color: #e0e4eb !important;
	}

	#site-header h1>a,
	#site-header h2>a,
	#site-header nav li a.active {
		color: #fff !important;
	}
}

/* !- Base elements */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg);
	color: var(--text);
	display: flex;
	flex-direction: column;
	font-family: var(--sans-serif);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	min-height: 100svh;
}

body.modal-open {
	overflow: hidden !important;
}

hr {
	border: 0;
	border-top: 2px solid var(--dark-accent);
	margin: 2rem 0;
}

h1,
h2,
h3,
h4 {
	line-height: 1.2;
	margin: 0 0 1.5rem 0;
}

h1 {
	font-size: 2.25rem;
	font-weight: 900;
}

h2 {
	font-size: 1.75rem;
	font-weight: 700;
}

h3 {
	font-size: 1.5rem;
	font-weight: 700;
}

h4 {
	font-size: 1.375rem;
	font-weight: 700;
}

ol,
ul {
	padding-left: 2rem;
}

ol,
ul,
dl {
	margin-bottom: 1.5rem;
	margin-top: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
	margin-bottom: 0;
}

ol li,
ul li {
	margin-bottom: 0.5rem;
}

ol li:last-child,
ul li:last-child {
	margin-bottom: 0;
}

dt {
	font-weight: 700;
}

dd {
	margin-bottom: 0.5rem;
	margin-left: 0;
}

b,
strong {
	font-weight: bolder;
}

small {
	font-size: 0.875rem;
}

sub,
sup {
	font-size: 0.75rem;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25rem;
}

sup {
	top: -0.25rem;
}

a:link,
a:visited {
	border-bottom: 1px solid var(--link);
	color: var(--link);
	text-decoration: none;
}

a:hover {
	border-bottom: 1px solid var(--accent);
	color: var(--accent);
	text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
	border: none;
	color: inherit;
	text-decoration: none;
}

pre,
pre[class*="language-"],
code,
code[class*="language-"],
kbd,
samp {
	font-family: var(--monospace);
}

pre {
	border-radius: 0.3125rem;
	display: block;
	margin: 0 0 1.5rem 0;
	overflow: auto;
}

pre code {
	color: inherit;
	font-size: 1rem;
	word-break: normal;
}

pre code.hljs {
	padding-bottom: 0.3125rem !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	padding-top: 0.3125rem !important;
}

pre[class*="language-"] {
	margin: 0 0 1.5rem 0;
}

code {
	word-wrap: break-word;
}

a>code {
	color: inherit;
}

p {
	margin: 0 0 1.5rem 0;
}

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

blockquote {
	background: var(--dark-accent);
	border-radius: var(--border-radius);
	font-family: var(--serif);
	font-size: 1.25rem;
	font-style: italic;
	margin: 0 0 1.5rem 0;
	padding: 1.5rem;
}

blockquote p {
	margin-bottom: 1rem;
}

iframe {
	border: none;
	border-radius: var(--border-radius);
}

input,
button,
textarea,
select {
	font: inherit;
}

#site-wrapper {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	margin: 0 auto;
	max-width: calc(var(--content-max) + (var(--pad-x) * 2));
	padding: var(--pad-t) var(--pad-x) var(--pad-b);
	width: 100%;
}

/* !- Header */
#site-header {
	align-items: center;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	margin-bottom: 3rem;
}

#site-header .avatar-link {
	align-self: flex-start;
	border: none;
	flex-shrink: 0;
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

#site-header .avatar-link img {
	border: 2px solid var(--text);
	border-radius: 50rem;
}

#site-header h1,
#site-header h2 {
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1;
	margin-bottom: 0.3125rem;
}

#site-header h1>a,
#site-header h2>a {
	border: none;
	color: var(--text);
	text-decoration: none;
}

#site-header nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-header nav ul {
	margin: 0;
	padding: 0;
}

#site-header nav li {
	display: inline;
	margin: 0 0.5rem;
}

#site-header nav li:first-of-type {
	margin-left: 0;
}

#site-header nav li:last-of-type {
	margin-right: 0;
}

#site-header nav li a {
	border: none;
	font-weight: 500;
	text-decoration: none;
}

#site-header nav li a:hover {
	border-bottom: 2px solid;
}

#site-header nav li a.active {
	border-bottom: 2px solid var(--text) !important;
	color: var(--text);
}

/* !- Content */
#site-main {
	flex: 1 0 auto;
	margin-bottom: 3.5rem;
}

#site-main img,
#site-main picture,
#site-main svg,
#site-main video,
#site-main canvas {
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--border-radius);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.post-list {
	list-style: none;
	margin: 0 0 3rem 0;
	padding: 0;
}

#home .post-list {
	margin-bottom: 1.5rem;
}

.post-list li {
	align-items: flex-start;
	display: flex;
	gap: 1.5rem;
	margin-bottom: 0.75rem;
}

.post-list time {
	align-self: flex-start;
	color: var(--accent);
	flex-shrink: 0;
	font-family: var(--monospace);
	line-height: 1.6;
	min-width: 4rem;
	text-align: right;
}

#home .all-posts-link {
	margin-bottom: 3rem;
}

.site-post {
	margin-bottom: 3rem;
}

#about .site-post {
	margin-bottom: 0;
}

.site-post .h-indent {
	padding-left: 1.625rem;
	text-indent: -1.75rem;
}

.footnotes {
	font-size: 0.875rem;
}

/* !- Footer */
#site-footer {
	font-size: 0.875rem;
	margin-top: auto;
	text-align: center;
}

#site-footer .heart {
	color: #f00;
	display: inline-block;
}

/* !- Images/figures & captions */
figure.md-image {
	margin: 1.25rem 0;
	text-align: center;
}

figure.md-image img {
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

figure.md-image figcaption {
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.4;
	margin-top: 0.75rem;
}

/* !- Animations */
@keyframes heartBeat {
	0% {
		transform: scale(1);
	}

	14% {
		transform: scale(1.3);
	}

	28% {
		transform: scale(1);
	}

	42% {
		transform: scale(1.3);
	}

	70% {
		transform: scale(1);
	}
}

@keyframes zoom {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes zoom-out {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0);
	}
}

.animate__animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

.animate__animated.animate__infinite {
	animation-iteration-count: infinite;
}

.animate__heartBeat {
	animation-name: heartBeat;
	animation-duration: calc(1s * 1.3);
	animation-timing-function: ease-in-out;
}

.zoom {
	animation: zoom 0.6s ease-in both;
}

.zoom-out {
	animation: zoom-out 0.6s ease-out both;
}

/* !- Utility classes */
.d-none {
	display: none;
}

.wide-media {
	left: -10%;
	max-width: 120% !important;
	position: relative;
	width: 120%;
}

.ratio {
	left: -10%;
	margin-bottom: 1.5rem;
	max-width: 120%;
	position: relative;
	width: 120%;
}

.ratio::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.ratio>* {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.no-shadow {
	box-shadow: none !important;
}

.bx-fw {
	font-size: 1.125rem;
	vertical-align: text-top;
}

a.footnote-ref {
	font-weight: 600;
}

/* !- Checkboard */
.checkerboard {
	background-image: linear-gradient(45deg, var(--text) 25%, transparent 25%), linear-gradient(-45deg, var(--text) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--text) 75%), linear-gradient(-45deg, transparent 75%, var(--text) 75%);
	background-position: 0 0, 0 0.625rem, 0.625rem -0.625rem, -0.625rem 0;
	background-size: 1.25rem 1.25rem;
	height: 1.875rem;
	flex: 0 0 auto;
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	.checkerboard {
		background-image: linear-gradient(45deg, #a8b1bc 25%, transparent 25%), linear-gradient(-45deg, #a8b1bc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a8b1bc 75%), linear-gradient(-45deg, transparent 75%, #a8b1bc 75%);
	}
}

/* !- Small screens */
@media (max-width: 575.98px) {
	.d-none-sm {
		display: none;
	}

	.wide-media {
		left: -3.125%;
		max-width: 106.25% !important;
		width: 106.25% !important;
	}
}