html {
	font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    font-weight: normal;
	font-size: 15pt;
	line-height: 1.7;
	margin: auto;
	max-width: 50em;
	padding: 1.5rem 1em 3em
}

img {
	max-width: 100%
}

img:not([src$=".svg"]),
article>div,
blockquote,
pre {
	border-radius: .4rem
}

img[src$="#pixelate"] {
	image-rendering: pixelated
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 1.5rem 0 .75rem
}

h1 {
	font-size: 1.75rem
}

h2 {
	font-size: 1.375rem
}

h3 {
	font-size: 1.125rem
}

p {
	text-align: justify
}

p,
ul,
ol,
article>footer,
article>header {
	margin: 0 0 1.5rem
}

pre,
blockquote {
	padding: 1.5rem;
	margin: 0 0 1.5rem
}

pre {
	overflow-x: auto;
	font-size: .875rem;
	line-height: 1.5
}

pre code {
	background: 0 !important;
	padding: 0;
	font-size: inherit
}

code {
	font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    font-weight: normal;
	font-size: .9em;
	padding: .15em .4em;
	border-radius: .25rem
}

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

article>img,
article>p>img,
article>div {
	display: block;
	margin-bottom: 1.5rem;
	width: 100%
}

.yt {
	aspect-ratio: 16/9;
	width: 100%;
	overflow: hidden
}

.yt iframe {
	width: 100%;
	height: 100%;
	border: 0
}

.s {
	font-size: .85rem
}

.theme {
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	vertical-align: middle;
	margin-bottom: .15rem
}

.theme img,
.theme svg {
	width: 100%;
	height: 100%
}

html.light .theme img:first-child,
html.light .theme svg:first-child,
html.dark .theme img:last-child,
html.dark .theme svg:last-child {
	display: none
}

header strong {
	font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
	font-weight: 600;
	color: var(--accent)
}

.site-icon {
	width: 2.25rem;
	height: 2.25rem;
	vertical-align: middle;
	margin-right: 1rem;
	color: var(--accent)
}

.header-brand {
	display: flex;
	align-items: center
}

.custom-icon {
	height: auto;
	max-height: 3rem;
	width: auto;
	margin-right: 1rem
}

body>footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem
}

body>footer img,
body>footer svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em
}

.tags {
	list-style: none;
	padding: 0;
	margin: .75rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem
}

.tags li {
	display: inline
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-bottom: 1.5rem
}

nav a {
	font-weight: 500
}

nav img,
nav svg {
	display: none
}

.p {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem
}

.p li {
	display: flex;
	gap: 1.5rem;
	margin-bottom: .75rem;
	align-items: baseline
}

.p li:last-child {
	margin-bottom: 0
}

.p time {
	opacity: .7;
	flex-shrink: 0
}

.profile-pic {
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto 1.5rem
}

.projects .project {
	margin-bottom: 1.5rem
}

.project header {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: .75rem
}

.project header h2 {
	margin: 0;
	font-size: 1.375rem
}

.project-emoji {
	font-size: 1.5rem
}

.project-image {
	max-width: 200px;
	aspect-ratio: 1;
	object-fit: cover;
	float: right;
	margin: 0 0 1.5rem 1.5rem;
	border-radius: .4rem
}

.project p {
	margin-bottom: .75rem
}

.project .tags {
	margin: 0
}

.lb {
	position: fixed;
	inset: 0;
	background: #000d;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	cursor: pointer
}

.lb img {
	max-width: 95vw;
	max-height: 95vh
}

.meta {
	font-size: 80%;
    padding-left: 2rem;
}

@media(max-width:30em) {
	header .desc {
		display: none
	}
}


/* Light theme */
html.light {
	background: #FAF7F2;
	--tc: #FAF7F2;
	--accent: #B85450;
	--accent-hover: #7A3533;
	color: #1a1a1a
}

html.light a {
	color: var(--accent);
	text-decoration: underline
}

html.light a:visited {
	color: var(--accent)
}

html.light a:hover {
	color: var(--accent-hover)
}

html.light header>div>span>a {
	text-decoration: none
}

html.light header>div>span>a:hover {
	text-decoration: underline
}

html.light p,
html.light ul,
html.light ol,
html.light .desc {
	color: #3a3a3a
}

html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
	color: #1a1a1a
}

html.light strong {
	color: #1a1a1a
}

html.light header strong {
	color: var(--accent)
}

html.light blockquote {
	border-left: 3px solid var(--accent);
	color: #555
}

html.light pre,
html.light article>img,
html.light article>p>img {
	background: #f0ebe3
}

html.light code {
	background: #f0ebe3;
	color: #1a1a1a
}

html.light hr {
	border-color: #e0d9ce
}

/* Light syntax highlighting */
html.light .z-comment {
	color: #6a737d;
	font-style: italic
}

html.light .z-keyword {
	color: #d73a49
}

html.light .z-string {
	color: #22863a
}

html.light .z-number {
	color: #005cc5
}

html.light .z-function {
	color: #6f42c1
}

html.light .z-type {
	color: #005cc5
}

html.light .z-constant {
	color: #005cc5
}

html.light .z-variable {
	color: #e36209
}

html.light .z-attribute {
	color: #6f42c1
}

html.light .z-tag {
	color: #22863a
}

html.light .z-operator {
	color: #d73a49
}

html.light .z-punctuation {
	color: #24292e
}

html.light .z-builtin {
	color: #6f42c1
}

html.light .z-label {
	color: #005cc5
}

html.light .z-namespace {
	color: #e36209
}

/* Dark theme */
html.dark {
	background: #141413;
	--tc: #141413;
	--accent: #E07A5F;
	--accent-hover: #F4A594;
	color: #e8e8e8
}

html.dark a {
	color: var(--accent);
	text-decoration: underline
}

html.dark a:visited {
	color: var(--accent)
}

html.dark a:hover {
	color: var(--accent-hover)
}

html.dark header>div>span>a {
	text-decoration: none
}

html.dark header>div>span>a:hover {
	text-decoration: underline
}

html.dark p,
html.dark ul,
html.dark ol,
html.dark .desc {
	color: #a0a0a0
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
	color: #fff
}

html.dark strong {
	color: #fff
}

html.dark header strong {
	color: var(--accent)
}

html.dark blockquote {
	border-left: 3px solid var(--accent);
	color: #a0a0a0
}

html.dark img[src$=".svg"],
html.dark nav svg,
html.dark .theme svg,
html.dark footer svg {
	filter: invert(1)
}

html.dark pre,
html.dark article>img,
html.dark article>p>img {
	background: #1e1e1d
}

html.dark code {
	background: #1e1e1d;
	color: #e8e8e8
}

html.dark hr {
	border-color: #2a2a29
}

/* Dark syntax highlighting */
html.dark .z-comment {
	color: #8b949e;
	font-style: italic
}

html.dark .z-keyword {
	color: #ff7b72
}

html.dark .z-string {
	color: #a5d6ff
}

html.dark .z-number {
	color: #79c0ff
}

html.dark .z-function {
	color: #d2a8ff
}

html.dark .z-type {
	color: #79c0ff
}

html.dark .z-constant {
	color: #79c0ff
}

html.dark .z-variable {
	color: #ffa657
}

html.dark .z-attribute {
	color: #d2a8ff
}

html.dark .z-tag {
	color: #7ee787
}

html.dark .z-operator {
	color: #ff7b72
}

html.dark .z-punctuation {
	color: #c9d1d9
}

html.dark .z-builtin {
	color: #d2a8ff
}

html.dark .z-label {
	color: #79c0ff
}

html.dark .z-namespace {
	color: #ffa657
}

/* Shared styles */
a.active {
	color: var(--accent)
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px
}

hr {
	border: 0;
	border-top: 1px solid;
	clear: both;
	margin: 1.5rem 0
}

blockquote {
	border-left: 3px solid var(--accent);
	padding-left: 1.25rem;
	font-style: italic
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	padding: .5rem 1rem;
	background: var(--accent);
	color: #fff;
	z-index: 1000
}

.skip-link:focus {
	top: 0
}

.footnote-definition {
    display: grid; 
    grid-template-columns: auto 8fr;
    gap: 1em;
}