:root {
	--color-txt: black;
	--color-bg: white;
	--color-bg-alt: #f5f5f5;
	--color-border: black;
	--color-title: black;
	--color-hover: black;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-txt: white;
		--color-bg: black;
		--color-bg-alt: #111;
		--color-border: white;
		--color-title: white;
		--color-hover: white;
	}
}

html.light {
	--color-txt: black;
	--color-bg: white;
	--color-bg-alt: #f5f5f5;
	--color-border: black;
	--color-title: black;
	--color-hover: black;
}

html.dark {
	--color-txt: white;
	--color-bg: black;
	--color-bg-alt: #111;
	--color-border: white;
	--color-title: white;
	--color-hover: white;
}

html.purple {
	--color-txt: white;
	--color-bg: darkslateblue;
	--color-bg-alt: darkslateblue;
	--color-border: white;
	--color-title: yellow;
	--color-hover: yellow;
}

html.hot-pink {
	--color-txt: white;
	--color-bg: #191919;
	--color-bg-alt: #1f1f1f;
	--color-border: #6f5b66;
	--color-title: #ff008f;
	--color-hover: #ff008f;
}

html.blue {
	--color-txt: black;
	--color-bg: white;
	--color-bg-alt: #1f1f1f;
	--color-border: #6f5b66;
	--color-title: blue;
	--color-hover: blue;
}

html.jungle {
	--color-txt: #f3ffe5;
	--color-bg: #002215;
	--color-bg-alt: #002618;
	--color-border: #354401;
	--color-title: #46d846;
	--color-hover: #c6ec12;
}

@font-face {
	font-family: 'Inconsolata';
	src: url('/assets/fonts/inconsolata.woff2') format('woff2');
	font-weight: 1 900;
	font-display: swap;
}

html {
	box-sizing: border-box;
	color: var(--color-txt);
	background-color: var(--color-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

@supports (font-variation-settings: normal) {
	html {
		font-family: "Inconsolata", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	}

	code {
		font-family: "Inconsolata", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	}
}

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

body {
	margin: 0;
	padding: 0;
	line-height: 1.4;

	margin: 0 auto;
	max-width: 1210px;
}

@media only screen and (min-width: 800px) {
	body {
		display: grid;
		grid-template-columns: 75% 25%;
		grid-template-rows: auto 60px;
		gap: 0;
		align-items: start;
		justify-content: center;
	}
}

body:has(.work-in-progress) {
	padding-top: 49px;
}

body:before {
	content: '';
	position: fixed;
	top: 0;
	left: calc( 50% - 300px );
	width: 1px;
	height: 100vh;
}

figure {
	margin-inline: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

video {
	max-width: 100%;
	border-radius: 3px;
}

h2,
h3 {
	color: var(--color-title);
}

a {
	color: var(--color-title);
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.1em;
	text-decoration-color: currentColor;
}

ol {
	padding: 0 0 0 1.5em;
}

ul {
	padding: 0 0 0 0.9em;
	list-style-type: '- ';
}

li {
	margin-block: 0 0.5em;
}

hr {
	margin-block: 2.5em;
	margin-inline: 40%;
	border: none;
	border-bottom: 0.1em solid var(--color-border);
}

blockquote {
	display: grid;
	grid-template-columns: 20px auto;
	margin-block: 1em;
	margin-inline: 2em;
	/* border-left: 1px solid var(--color-txt);
	padding-left: 1em; */
}

blockquote *:first-child {
	margin-block-start: 0;
}

blockquote *:last-child {
	margin-block-end: 0;
}

blockquote:before {
	content: '>';
	font-weight: bold;
}

pre {
	border: 1px solid var(--color-txt);
	border-radius: 3px;
	background-color: white;
}

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

code.hljs {
	border-radius: 3px;
}

h2:has(.headline-anchor) {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.25em;
}

h2 .headline-anchor {
	margin: 0;
	padding: 0em 0 0 0;
	display: block;
	display: flex;
	align-items: center;
}

h2 .headline-anchor svg,
h3 .headline-anchor svg {
	width: 0.75em;
	height: 0.75em;
	stroke-width: 2;
}

table {
	width: 100%;
	/* border-collapse: collapse; */
	border-spacing: 0;
	border: 1px solid var(--color-border);
	border-radius: 3px;
}

thead tr {
	border-bottom: 1px solid var(--color-border);
}

th {
	padding: 0.5em;
	text-align: left;
}

th {
	border-bottom: 1px solid var(--color-border);
}

tbody tr:nth-child(odd) td {
	background-color: var(--color-bg-alt);
}

td {
	padding: 0.5em;
	text-align: left;
}

th:last-child,
td:last-child {
	text-align: right;
}

@media only screen and (min-width: 800px) {
	.site-header {
		position: sticky;
		top: 0;
		padding-block: 65px 80px;
		padding-inline: 35px 50px;
		max-width: 310px;
		text-align: right;
		order: 2;
	}
}

.site-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	margin-block-end: 0;
	text-decoration: none;
	order: 2;
	padding: 15px;
	border-radius: 3px;
}

@media only screen and (min-width: 800px) {
	.site-title {
		margin-block-end: 70px;
	}
}

.site-title:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
}

.profile {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	order: 1;
}

.site-title .fn {
	font-size: 16px;
	order: 2;
	font-weight: 500;
	white-space: nowrap;
}

.site-nav {
	margin: 0;
	padding: 0 0 0 5px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

@media only screen and (min-width: 800px) {
	.site-nav {
		display: block;
		padding: 0;
	}
}

.site-nav li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 7px;
	margin-block: 0 1px;
}

@media only screen and (min-width: 800px) {
	.site-nav li {
		margin-block: 0 7px;
	}
}

.site-nav a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	text-decoration: none;
	border-radius: 3px;
	white-space: nowrap;
}

.site-nav a span {
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.1em;
	text-decoration-color: currentColor;
}

.site-nav a:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
}

.site-nav a:hover span {
	text-decoration: none;
}

.page,
.post,
.archive,
.main {
	padding-inline: 20px;
	padding-block: 25px 0;
	max-width: 900px;
}

@media only screen and (min-width: 800px) {
	.page,
	.post,
	.archive,
	.main {
		padding-inline: 50px;
		padding-block: 74px 0;
	}

	.archive.archive--tag {
		padding-block: 10px 0;
	}
}

.post {
	padding-block: 40px 0;
}

.post .page-title {
	margin-top: 8px;
}

.archive .page-title,
.page .page-title {
	margin-block: 0 46px;
}

.archive.archive--tag .page-title small {
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
}

@media only screen and (min-width: 800px) {
	.main {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 40px;
	}
}

.intro {
	grid-column: 1/3;
	margin: 0 0 60px 0;
}

.intro h1 {
	margin: 0 0 20px;
	font-size: 60px;
	line-height: 1;
}

.intro svg {
	float: left;
	margin: 5px 25px 10px 0;
}

.intro a {
	display: inline-block;
	margin: 0 -3px;
	padding: 0 5px 0;
	border-radius: 3px;
}

.intro a:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
	text-decoration: none;
}

.section-title {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	margin: 40px 0 40px;
	color: var(--color-txt);
	text-transform: uppercase;
	font-size: 18px;
	line-height: 1;
}

.status-updates {
	grid-column: 1/2;
	grid-row: 2/3;
}

.post-header {
	margin: 0;
	padding-block: 10px;
	background: var(--color-bg);
}

.post-date {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.75em;
	text-decoration: none;
}

.page-title {
	margin: 0 0 20px;
	font-size: 60px;
	line-height: 1;
	color: var(--color-title);
}

.tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

.tags a {
	display: inline-block;
	padding: 3px 10px;
	font-size: 13px;
	text-decoration: none;
	border-radius: 3px;
	border: 1px solid var(--color-hover);
}

.tags a:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
}

.project-meta {
	font-size: 18px;
	margin-block: -30px 30px;
}

.last-updated {
	display: inline-block;
	padding-block: 2px;
	padding-inline: 8px;
	color: var(--color-bg);
	background-color: var(--color-hover);
	font-size: 12px;
	border-radius: 3px;
}

.status {
	position: relative;
	background-color: var(--color-bg);
	margin: 0 0 40px 0;
	padding: 15px;
	border: 1px solid var(--color-txt);
	border: 1px solid var(--color-border);
	border-radius: 3px;
}

.status p:first-of-type {
	margin-top: 0;
}

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

.status .post-date {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	margin: -15px -15px 10px -15px;
	padding: 5px 5px;
	border-bottom: 1px dashed var(--color-border);
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1;
	border-radius: 2px 2px 0 0;
}

.status .post-date:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
	border-bottom: 1px solid var(--color-hover);
}

.status .reply {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	margin: 10px -15px -15px -15px;
	padding: 5px 5px;
	border-top: 1px dashed var(--color-border);
	font-size: 13px;
	line-height: 1;
	border-radius: 2px 2px 0 0;
}

.status:hover .reply {
	border-top: 1px dashed var(--color-border);
}

@media only screen and (min-width: 800px) {
	.page--status .status:before {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;
		left: auto;
		right: -30px;
		top: 35px;
		bottom: auto;
		border: 15px solid;
		border-color: var(--color-border) transparent transparent var(--color-border);
	}

	.page--status .status:after {
		content: ' ';
		position: absolute;
		width: 0;
		height: 0;
		left: auto;
		right: -28px;
		top: 36px;
		bottom: -20px;
		border: 15px solid;
		border-color: var(--color-bg) transparent transparent var(--color-bg);
	}
}

.status figure:last-of-type {
	margin-bottom: 0;
}

.status img {
	border-radius: 5px;
}

.blog-post-preview {
	display: block;
	margin-bottom: 40px;
	padding: 20px;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 3px;
	border: 1px solid var(--color-border);
}

.archive .blog-post-preview {
	border: none;
}

.blog-post-preview:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
	border-color: var(--color-hover);
}

.blog-post-preview h3 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	margin: 0 0 0.1em 0;
	font-size: 36px;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.1em;
	text-decoration-color: currentColor;
}

.blog-post-preview:hover h3 {
	color: var(--color-bg);
}

.blog-post-preview .excerpt {
	margin: 0;
	color: var(--color-txt);
}

.blog-post-preview:hover .excerpt {
	color: var(--color-bg);
}

.project-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media only screen and (min-width: 400px) {
	.project-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (min-width: 800px) {
	.project-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.project {
	display: flex;
	flex-direction: column;
	flex-wrap: warp;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 20px;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	text-decoration: none;
}

.project:hover {
	color: var(--color-bg);
	background: var(--color-hover);
	border: 1px solid var(--color-hover);
}

.project__thumbnail {
	margin: 0;
}

.project__title {
	margin: 10px 0 10px;
	line-height: 1.2;
}

.projects-preview .project__title {
	margin-top: 0;
}

.project:hover .project__title {
	color: var(--color-bg);
}

.project__intro {
	margin: 0;
	color: var(--color-txt);
}

.project:hover .project__intro {
	color: var(--color-bg);
}

.projects-preview {
	grid-column: 1/3;
}

.projects-preview .project {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-template-rows: auto auto;
	gap: 10px;
}

.projects-preview .project__title {
	grid-column: 2/3;
	grid-row: 1/2;
	align-self: flex-end;
	font-size: 36px;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.1em;
	text-decoration-color: currentColor;
}

.projects-preview .project__intro {
	grid-column: 2/3;
	grid-row: 2/3;
	align-self: flex-start;
}

.projects-preview .project__thumbnail {
	grid-column: 1/2;
	grid-row: 1/3;
	padding-right: 20px;
}

.site-footer {
	order: 3;
	grid-column: 1/3;
	text-align: center;
	padding-inline: 40px;
	padding-block: 60px 20px;
	font-size: 14px;
}

.copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.footer-button {
	margin: 0;
	padding: 2px;
	border: 1px solid transparent;
	border-radius: 3px;
}

.footer-button:hover {
	border-color: var(--color-hover);
	color: var(--color-bg);
	background-color: var(--color-hover);
	
}

.footer-button svg {
	margin: 0;
	padding: 0;
	width: 21px;
	height: 21px;
	line-height: 1;
	vertical-align: middle;
}

.edit-post-link {
	padding: 0.25em 0.5em;
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 0.75em;
	color: var(--color-bg);
	background-color: var(--color-txt);
	border: 1px solid var(--color-txt);
	text-decoration: none;
	z-index: 1;
}

.edit-post-link:hover {
	color: var(--color-txt);
	background-color: var(--color-bg);
	text-decoration: underline;
}

.pagination {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 100%;
	margin-block: 50px 0;
	width: 100%;
}

.pagination .prev,
.pagination .next {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	line-height: 1;
	border-radius: 3px;
}

.pagination .prev:hover,
.pagination .next:hover {
	color: var(--color-bg);
	background-color: var(--color-hover);
	text-decoration: none;
}

.pagination .prev {
	grid-column: 1/2;
	grid-row: 1/2;
	justify-self: start;
}

.pagination .next {
	grid-column: 2/3;
	justify-self: end;
	justify-content: flex-end;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
}

.gallery figure {
	margin: 0;
	width: calc( 50% - 10px );
}

@media only screen and (min-width: 800px) {
	.gallery figure {
		width: calc( 33.3333% - 14px );
	}
}

.gallery figure img {
	vertical-align: bottom;
}

.gallery__link {
	display: block;
}

.newsletter-form {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: 20px;
	border-top: 1px solid var(--color-txt);
	border-bottom: 1px solid var(--color-txt);
	margin-block: 30px;
}

.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	padding: 2em 76px;
}

.lightbox .lightbox__img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}

.lightbox .lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: block;
	width: 36px;
	height: 36px;
	appearance: none;
	border: none;
	text-indent: -10000px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E") no-repeat;
	cursor: pointer;
}

.work-in-progress {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px;
	width: 100%;
	font-size: 13px;
	color: var(--color-txt);
	border-bottom: 2px dashed var(--color-txt);
	backdrop-filter: blur(5px);
}

.work-in-progress__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 3px;
}

.theme-switcher {
	margin: 20px auto 0 auto;
	width: 134px;
}

.theme-switcher__inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 2px;
	width: 134px;
	border: 1px solid var(--color-title);
	border-radius: 3px;
}

input[type="radio"]:checked ~ .theme-switcher__inner:after {
	content: '';
	position: absolute;
	left: 2px;
	top: 2px;
	width: 24px;
	height: 24px;
	background: var(--color-title);
	border-radius: 2px;
	z-index: -1;
	transition: left 0.25s;
}

.theme-switcher input {
	display: none;
}

.theme-switcher label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 2px;
	cursor: pointer;
}

.theme-switcher label svg {
	width: 13px;
	height: 13px;
	fill: var(--color-title);
	pointer-events: none;
}

.theme-switcher label[for="os-default"] svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--color-title);
}

.theme-switcher [for="light"] span,
.theme-switcher [for="os-default"] span,
.theme-switcher [for="dark"] span,
.theme-switcher [for="hot-pink"] span,
.theme-switcher [for="jungle"] span {
	display: none;
}

.theme-switcher [for="light"] svg {
	width: 13px;
	height: 13px;
}

.theme-switcher [for="os-default"] svg {
	width: 16px;
	height: 16px;
}

.theme-switcher [for="hot-pink"] svg {
	width: 16px;
	height: 16px;
}

.theme-switcher [for="jungle"] svg {
	width: 16px;
	height: 16px;
}

.theme-switcher #os-default:checked ~ .theme-switcher__inner:after {
	left: 28px;
}

.theme-switcher #dark:checked ~ .theme-switcher__inner:after {
	left: 54px;
}

.theme-switcher #hot-pink:checked ~ .theme-switcher__inner:after {
	left: 80px;
}

.theme-switcher #jungle:checked ~ .theme-switcher__inner:after {
	left: 106px;
}


.theme-switcher #light:checked ~ .theme-switcher__inner [for="light"] svg,
.theme-switcher #dark:checked ~ .theme-switcher__inner [for="dark"] svg {
	fill: var(--color-bg);
}

.theme-switcher #os-default:checked ~ .theme-switcher__inner [for="os-default"] svg {
	stroke: var(--color-bg);
}

.theme-switcher #hot-pink ~ .theme-switcher__inner [for="hot-pink"] svg,
.theme-switcher #jungle ~ .theme-switcher__inner [for="jungle"] svg {
	stroke: var(--color-title);
	fill: var(--color-title);
}

.theme-switcher #hot-pink:checked ~ .theme-switcher__inner [for="hot-pink"] svg,
.theme-switcher #jungle:checked ~ .theme-switcher__inner [for="jungle"] svg {
	stroke: var(--color-bg);
	fill: var(--color-bg);
}