<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Page not found. - Nekkowe!</title>
		<meta name="description" content="Page not found.">
		<link rel="shortcut icon" href="/blog/img/favicon.gif">
		<link rel="alternate" href="feed/feed.xml" type="application/atom+xml" title="Nekkowe!">
		
		<style>/* This is an arbitrary CSS string added to the bundle */
/* Web Fonts */
@font-face {
	font-family:"Monaspace Neon";
	src: url('/blog/fonts/MonaspaceNeonVarVF[wght,wdth,slnt].woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'DejaVu Serif';
	src: url('/blog/fonts/DejaVuSerif-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DejaVu Serif';
	src: url('/blog/fonts/DejaVuSerif.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DejaVu Serif';
	src: url('/blog/fonts/DejaVuSerif-BoldItalic.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'DejaVu Serif';
	src: url('/blog/fonts/DejaVuSerif-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family:"Atkinson Hyperlegible";
	src: url('/blog/fonts/AtkinsonHyperlegible-Regular.woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family:"Atkinson Hyperlegible";
	src: url('/blog/fonts/AtkinsonHyperlegible-Bold.woff2');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family:"Atkinson Hyperlegible";
	src: url('/blog/fonts/AtkinsonHyperlegible-Italic.woff2');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family:"Atkinson Hyperlegible";
	src: url('/blog/fonts/AtkinsonHyperlegible-BoldItalic.woff2');
	font-weight: bold;
	font-style: italic;
}

/* Defaults */
:root {
	--font-family-sans: Atkinson Hyperlegible, -apple-system, system-ui, sans-serif;
	--font-family-serif: DejaVu Serif, Atkinson Hyperlegible, -apple-system, system-ui, sans-serif;
	--font-family-monospace: Monaspace Neon, Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

/* Theme colors */
:root {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #dad8d8;

	--background-color: #3a3a3aA0;
	--panel-color: hsla(261, 41%, 8%, 0.719);

	--text-color: var(--color-gray-90);
	--text-color-link: #a6a6f8;
	--text-color-link-active: #6969f7;
	--text-color-link-visited: #a6a6f8;

	--glow-color: #e7cfad;

	--syntax-tab-size: 2;
}



@media (prefers-color-scheme: light) {
	/* TODO */
}

/* Global stylesheet */
* {
	box-sizing: border-box;
}

@view-transition {
	navigation: auto;
}

html,
body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family-sans);
	color: var(--text-color);
	background-color: #0c0b11;
}
html {
	overflow-y: scroll;
	padding: 2em 1.5em;
	background-image: url("/blog/img/bg-pattern.png");
	background-position: top;
}
body {
	margin: 0 auto;
	max-width: 50em;

	background-image: 
		linear-gradient(
			var(--panel-color),
			var(--panel-color)
		),
		url("/blog/img/bg-pattern-blurred-50px-gaussian.png");

	background-position: top calc(-2em - 2px) center;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.nav, h1, h2 {
	font-family: var(--font-family-serif);
	font-weight: 400;
}

h1 {
	color: #fff;
	text-shadow: 0px 0px 20px var(--glow-color), 0px 0px 30px var(--glow-color);
	transition: text-shadow 0.3s, color 0.3s;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.1111111;
}
h1:hover {
	text-shadow: 0px 0px 20px var(--glow-color), 0px 0px 25px var(--glow-color), 0px 0px 2px #fff; 
}
h3 {
	font-weight: 600;
	font-size: 1.25rem;
	/* line-height: 1.6; /* Changing the line height misaligns the heading-anchor... alas... */
}
:is(h1, h2, h3, h4, h5, h6) span.ha-placeholder {
	/* Keeping the heading anchors uniform regardless of headline font */
	font-weight: 600 !important;
	font-family: var(--font-family-sans) !important;
}


time {
	font-family: var(--font-family-monospace);
}

p:last-child {
	margin-bottom: 0;
}
p {
	line-height: 1.75;
}

/* Lists */

ul, ol {
	padding-inline-start: 2em;
}

li, li p {
	line-height: 1.6;
}

li > p {
	margin: 0;
}

/* Links */

a[href] {
	color: var(--text-color-link);
	transition: text-shadow 0.1s ease, color 0.1s ease;
}
a[href]:visited {
	color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
	color: #fff;
	text-shadow: 0px 0px 20px var(--glow-color), 0px 0px 30px var(--glow-color), 0px 0px 40px #f1ebe2;
	/*color: var(--text-color-link-active);/**/
}

a[href].redlink {
	/* Spot & fix these placeholders! */
	color: #f00;
}

/* RSS Feed Link Component */
a.feed-link {
	text-decoration: none;
	white-space: nowrap;
}
a.feed-link .feed-link-text {
	text-decoration: underline;
}
a img.feed-link-icon,
a svg.feed-link-icon {
	display: inline-block;
	margin-left: 0.2em;
	height: 1.2em;
	width: auto;
	vertical-align: text-bottom;
	text-decoration: none;
	transition: box-shadow 0.1s ease, filter 0.1s ease;
}
a:hover img.feed-link-icon,
a:hover svg.feed-link-icon {
	filter: 
	drop-shadow(var(--glow-color) 0px 0px 5px) 
	drop-shadow(var(--glow-color) 0px 0px 20px) 
	drop-shadow(var(--glow-color) 0px 0px 25px);
}

hr {
	border: 1px dashed var(--color-gray-20);
}

hr.footnotes-sep {
	margin: 1em 0;
}

img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;

	background-color: var(--panel-color);
}

.neon-rim, aside {
  padding: 1rem;

	border-radius: 5px;
  border: 2px solid var(--glow-color);
	box-shadow: 0px 0px 30px 0px var(--glow-color), 0px 0px 4px 0px var(--glow-color) inset;
	transition: box-shadow 0.3s, text-shadow 0.3s;
}

.neon-rim:hover {
	opacity: 1;
  box-shadow: 0px 0px 35px 2px var(--glow-color), 0px 0px 4px 0px var(--glow-color) inset;
}

main,
footer {
	padding: 1rem;
}
main :first-child {
	margin-top: 0;
}

header {
	border-bottom: 1px dashed var(--color-gray-20);
}
/* 
header:after {
	content: "";
	display: table;
	clear: both;
}/* What is this even for. Did the header in the template once use floats instead of flex...? */

footer {
	border-top: 1px dashed var(--color-gray-20);
}


.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}

/* Tables */
table {
	width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
	overflow: hidden;
}

table, thead, tfoot {
	border: solid 1px #fff;
}

th, td {
	border: dotted 1px #fff;
} 

th, td {
	padding: 7px 10px !important;
	vertical-align: text-bottom;
}

thead tr {
	background-color: rgba(255, 255, 255, 0.2);
	/* I don't know... */
}

tbody tr:nth-of-type(odd) {
	color: var(--text-color);
}

tbody tr:nth-of-type(even) {
	background-color: rgba(255, 255, 255, 0.1);
}

tbody tr:hover {
	color: oklch(88.38% 0.0642 283.25);
	background-color: rgba(255, 255, 255, 0.2);

	border: solid 1px #fff;
}

tbody td {
	vertical-align: middle;

}

/* Highlight active column */
/*
tbody td {
	z-index: 2;
	position: relative;
}
tbody td:hover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  background-color: rgba(255, 255, 255, 0.1);
	z-index: 1;
	pointer-events: none;
}
/**/

pre,
code,
pre[class*="language-"]:has(code) > code,
pre:not([class*="language-"]):has(code) > code,
.named-fence-filename {
	font-family: var(--font-family-monospace);
	font-size: 0.94rem;
}
pre:not([class*="language-"]):not(:has(code)) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	overflow-x: auto;
}
pre:not([class*="language-"]):has(code) {
	/* 
		Because 11ty Syntax Highlighting doesn't assume plaintext for some reason,
		I've copied the plaintext-equivalent CSS rules into here. Bit of a pain.
		A bunch of this stuff gets overridden (just as does the default).
		See https://github.com/11ty/eleventy-plugin-syntaxhighlight/issues/66
	*/
	background: #272822;
	color: #f8f8f2;
	padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border-radius: 0.3em;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;  
	tab-size: 4;
	hyphens: none;
}
:not(pre) > code {
	/* Inline code 'like this'. */
	display: inline-flex;
	line-height: 1.0em;

	margin-left: 0.05em;
	margin-right: 0.05em;
	
	max-width: 100%;
	padding: 5px 5px 3px;
	word-break: break-word;
	border-radius: 0.3em;
	color: #fff;
	background-color: #444;
	border: solid 1px #777;

	white-space: nowrap;
	overflow: auto;

	/* This bit's nice for copying text easily/reliably */
	user-select: all;
}

pre.code.named-fence-block {
  position: relative;
  padding-top: 2em;
}

.named-fence-filename {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.5em;
  font-weight: bold;
  color: #171618;
  background: #aaa;
  opacity: 1;

	text-shadow: none;

	border-radius: 0 0 0.3em 0;
}

kbd {
	padding: 3px 5px 3px;
	margin: 0 0.1em;
	border-radius: 0.4em;
	color: #000;
	background-color: #CDCDCD;
	border: outset 2px #777;

	white-space: nowrap;

	user-select: none;
	cursor: default;
}

/* Header */
header {
	display: flex;
	gap: 1em .5em;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em;
}
.home-link {
	/*font-family: var(--font-family-serif);/**/
	font-size: 1.5rem; /* 16px /16 */
	font-weight: 700;
	margin-right: 1em;
	rotate: -2deg;
}
.home-link:link:not(:hover) {
	text-decoration: none;
}

/* Nav */
.nav {
	display: flex;
	flex-flow: row wrap;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: inline-block;
	margin-right: 1em;
	white-space: nowrap;
}
.nav-item a[href] {
	transition: text-decoration-color 0.2s ease-out, text-shadow 0.1s ease, color 0.1s ease;
}
.nav-item a[href]:not(:hover) {
	text-decoration-color: transparent;
}
.nav a[href][aria-current="page"] {
	text-decoration: underline;
}

/* Posts list */
.postlist {
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: right;
	margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
	font-size: 0.8125rem; /* 13px /16 */
	color: var(--color-gray-90);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875rem; /* 19px /16 */
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-right: 1em;
}

/* Github-Style Alert Markdown */
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;

  --color-note: #2f81f7;
  --color-tip: #3fb950;
  --color-warning: #d29922;
  --color-severe: #db6d28;
  --color-caution: #f85149;
  --color-important: #a371f7;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}

/* Collapsibles Markdown */
details {
	margin-bottom: 0.5rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

summary {
  display: flex;
  align-items: start;
  outline: none;
  list-style: none;
  user-select: none;
  cursor: pointer;
}

summary > h1, summary > h2, summary > h3, summary > h4, summary > h5, summary > h6 {
  display: inline-block;
  margin: 0;
}

details > *:not(summary) {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

details > summary {
	margin-top: 0;
  margin-bottom: 0.5rem;
}

.details-marker::before {
  content: "▶︎";
  display: inline-block;
  margin-right: 0.5ch;
  flex-shrink: 0;
  transition: 0.3s;
}

details[open] > summary .details-marker::before {
  transform: rotate(90deg);
  transform-origin: 40% 45% 0;
}

/* Spoilers */
.spoiler {
	padding: 0.1em 0.2em;

  border-radius: 0.2em;
	border: dashed 1px currentcolor;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;

  cursor: pointer;
	
	background-color: currentcolor;
  transition: background ease-in 0.2s;
}

.spoiler.off {
	background-color: transparent;
}

/* Block Quotes */

blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 1em calc(1em + 40px) 1em 1em;
	border-left: solid 5px #b3a8a1;
	border-radius: 3px;
	background-color: #b3a8a130;
}

/* Audio Players */

audio {
	margin: 0 0.2em;
	vertical-align: middle;
	border: outset 5px currentColor;
  border-radius: 1rem;
}

/* Responsive */

@media only screen and (max-width: 480px) {
	html {
		padding: 0.75em;
	}

	body.neon-rim {
		padding-left: 1em;
		padding-right: 1em;
	}

	header,
	main,
	footer {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	header {
		padding-top: 0.5em;
	}

	footer {
		padding: 0.5em;
	}
}</style>
		<script src="/blog/bundle.js" defer="">
	</script></head>
	<body class="neon-rim">
		<a href="#skip" class="visually-hidden">Skip to main content</a>

		<header>
			<a href="/index.html" class="home-link" title="Return to front page.">Nekkowe!</a>
			<nav>
				<h2 class="visually-hidden" id="top-level-navigation-menu">Top level navigation menu</h2>
				<ul class="nav">
					<li class="nav-item"><a href="/blog/">Blog</a></li>
					<li class="nav-item"><a href="/blog/posts/">Archive</a></li>
					<li class="nav-item"><a href="/blog/tags/">Tags</a></li>
					<li class="nav-item"><a href="/blog/about/">About</a></li>
					<li class="nav-item"><a href="/blog/todos/">TODOs</a></li>
					<li class="nav-item"><a href="/blog/feed/feed.xml">Feed<img loading="lazy" decoding="async" class="feed-link-icon" src="/blog/img/feed-icon-128px.svg" alt="RSS Feed Icon" width="128" height="128"></a></li>
				</ul>
			</nav>
		</header>

		<main id="skip">
			<heading-anchors>
				<h1 id="sorry-page-not-found">Sorry! Page not found.</h1>
<p>You might find what you're looking for in the <a href="/blog/posts/">list of all posts</a>, or through the <a href="/blog/tags/">list of tags</a>.</p>
<p>If you're looking for something in particular, or you followed a broken link somewhere, drop me an <a href="mailto:nekkowe+site@posteo.com">email</a> and I'll help you find what you're trying to find.</p>
<p>Otherwise, click <a href="/index.html">here</a> to return to the front page.</p>
<!--

Read more: https://www.11ty.dev/docs/quicktips/not-found/

This will work for both GitHub pages and Netlify:

* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
* https://www.netlify.com/docs/redirects/#custom-404

-->


			</heading-anchors>
		</main>

		<footer>
			<p>
				<span>© 2024 - ¢́Ã̡̛҉̴̢̨̨́́̀͟͠ą̴̵̷̴̛̛̛́̀̀̕̕̕͜͢҉̴̧͟͠҉̸̀͟Í̕͢͡͡͡͏̡̡̀̕͜͠ </span><br>
				<em>
					Email Nekkowe <a href="mailto:nekkowe+site@posteo.com?subject=About That Footer On Your Website">here</a> and remind'em to put something useful in this footer okay
				</em>
				</p>
		</footer>

		<script type="module" src="/blog/dist/rJ3_G-2ArF.js"></script>
	</body>
</html>

