/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #8292a2;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
	--eleventy-code-padding: 1.25em;
	padding-left: var(--eleventy-code-padding);
	padding-right: var(--eleventy-code-padding);
}
.token.deleted {
	background-color: hsl(0, 51%, 37%);
	color: inherit;
}
.token.inserted {
	background-color: hsl(126, 31%, 39%);
	color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
	width: var(--eleventy-code-padding);
	background-color: rgba(0,0,0,.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
	display: block;
	margin-left: calc(-1 * var(--eleventy-code-padding));
	margin-right: calc(-1 * var(--eleventy-code-padding));
	text-decoration: none; /* override del, ins, mark defaults */
	color: inherit; /* override del, ins, mark defaults */
}
* { box-sizing: border-box; }
/* Defaults */
@font-face {
	font-family: "Departure";
	font-style: normal;
	font-weight: 400;
	src: url("assets/fonts/DepartureMono-Regular.woff2") format("woff2");
	font-display: swap;
}
:root {
	--font-family: 'Helvetica',-apple-system, system-ui, sans-serif;
	--font-family-monospace: 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;
	--color-note: light-dark(oklch(0.543 0.082 198.3),oklch(0.755 0.105 275.7));
	--color-tip: light-dark(oklch(0.486 0.193 28.5),oklch(0.704 0.192 37.1));
	--color-warning: light-dark(oklch(0.554 0.117 75.0),oklch(0.720 0.140 79.9));
	--color-severe: light-dark(oklch(0.557 0.160 44.7),oklch(0.654 0.158 48.4));
	--color-caution: light-dark(oklch(0.557 0.206 24.6),oklch(0.665 0.205 27.0));
	--color-important: light-dark(oklch(0.563 0.207 295.0),oklch(0.661 0.193 298.1));
	--background-color: light-dark(oklch(0.997 0.000 0.0),oklch(0.103 0.026 53.7));
    --text-color: light-dark(oklch(0.270 0.010 207.1),oklch(0.970 0.004 214.3));
    --text-color-link: light-dark(oklch(0.587 0.224 20.9),oklch(0.799 0.118 216.3));
    --text-color-link-active: light-dark(oklch(0.401 0.155 292.7),oklch(0.854 0.171 92.1));
    --text-color-link-visited: light-dark(oklch(0.539 0.098 220.3),oklch(0.630 0.236 15.0));
    --border-color: light-dark(oklch(0.564 0.217 26.7),oklch(0.893 0.118 94.9));
    --code-background-color: light-dark(oklch(0.961 0.000 0.0),oklch(0.104 0.003 196.6));
    --code-color: light-dark(oklch(0.252 0.000 0.0),oklch(0.898 0.000 0.0));
    --heading: light-dark(oklch(0.587 0.224 20.9),oklch(0.854 0.171 92.1));
    --heading-shadow: light-dark(oklch(0.401 0.155 292.7),oklch(0.630 0.236 15.0));
    --header-bottom: light-dark(oklch(0.321 0.000 0.0),oklch(0.808 0.000 0.0));
  
    /* Button - maintained for contrast */
    --button-text: light-dark(oklch(1.000 0.000 0), oklch(1.000 0.000 0));
	--syntax-tab-size: 2;

	--font-size-xs: clamp(0.8681rem, 0.8639rem + 0.0208vw, 0.88rem);
    --font-size-s: clamp(1.0417rem, 1.0214rem + 0.1014vw, 1.1rem);
    --font-size-base: clamp(1.25rem, 1.2065rem + 0.2174vw, 1.375rem);
    --font-size-md: clamp(1.5rem, 1.4239rem + 0.3804vw, 1.7188rem);
    --font-size-lg: clamp(1.8rem, 1.6788rem + 0.606vw, 2.1484rem);
    --font-size-xl: clamp(2.16rem, 1.9772rem + 0.914vw, 2.6855rem);
    --font-size-xxl: clamp(2.592rem, 2.3259rem + 1.3303vw, 3.3569rem);
    --font-size-max: clamp(3.1104rem, 2.7327rem + 1.8883vw, 4.1962rem);
}
/* Global stylesheet */
* {
	box-sizing: content-box;
}
heading-anchors:not(:defined) :is(h2,h3,h4,h5,h6):after {
	content: "#";
	padding: 0 .25em;
	opacity: 0;
}
html {
	color-scheme: light dark;
}
html,
body {
	padding: 0;
	margin: 0 auto;
	background-color: var(--background-color);
	color: var(--text-color); 
	text-wrap: pretty;
}
html {
	overflow-y: auto;
}
body {
	max-width: 60em;
	font-size: var(--font-size-s);
	font-family: var(--font-family);
	font-style: normal;
	font-weight: 200;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 900;
}
h1 {
	color: var(--heading);
	font-size: var(--font-size-lg);
	text-shadow: 2px 2px var(--text-color);
}
h2 {
	font-size: var(--font-size-md);
	color: var(--text-color-link);
}
/* 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;
}
img,
picture {
	height: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.svg {
	margin-top: 0;
	margin-bottom: 0;
	align-content: center;
	display: block;
}
p:last-child {
	margin-bottom: 0;
}
p {
	line-height: 1.75;
}
p.caption {
	text-align: center;
	font-size: var(--font-size-xs);
}
li {
	line-height: 2.0;
}
a[href] {
	color: var(--text-color); 
	position: relative;
	text-decoration-color: var(--text-color-link);
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
	text-underline-offset: .10rem;
}
a[href]:visited {
	color: var(--text-color); 
	text-decoration-color: var(--text-color-link-visited);
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
	text-underline-offset: .10rem;
}
a[href]:hover,
a[href]:active {
	color: var(--text-color);
	text-decoration-color: var(--text-color-link-active);
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
	text-underline-offset: .16rem;
}
blockquote {
	padding: 0 1em;
	color: var(--header-bottom);
	border-left: 0.25em solid var(--text-color-link-active);
}
button {
	display: inline-block;
	background: linear-gradient(var(--background-color),var(--background-color)) padding-box,
				linear-gradient(90deg, var(--text-color-link-active),var(--text-color-link),var(--text-color-link-visited)) border-box !important;
	color: var(--text-color);
	padding: 5px;
	border: 3px solid transparent;
	border-radius: 10px;
	place-items: center;
	font-size: inherit;
	font-weight: 900;
	line-height: 1.25em;
	cursor: pointer;
}
button a {
	text-decoration: none !important;
}
button:hover,
button:focus {
	background: linear-gradient(var(--text-color),var(--text-color)) padding-box,
				linear-gradient(90deg, var(--text-color-link-visited),var(--text-color-link),var(--text-color-link-active)) border-box !important;
	color: var(--background-color) !important;
}
main,
footer {
	padding: 1.25rem;
}
header:after {
	content: "";
	display: table;
	clear: both;
}
.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	padding: 1em 0;
}
.links-nextprev {
	border-top: .500em solid;
	border-image-slice: 1;
	border-width: .450em;
	border-image-source: linear-gradient(90deg, var(--text-color-link-visited),var(--text-color-link),var(--text-color-link-active)) !important;
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}
table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}
pre {
	background-color: #090200 !important;
	border: .500em solid;
	margin: 0.65em;
	border-image-slice: 1;
	border-width: .250em;
	border-image-source: linear-gradient(90deg, var(--text-color-link-visited),var(--text-color-link),var(--text-color-link-active)) !important;
}
pre:not([class*="language-"]) {
	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;
}
code {
	word-break: break-all;
	background-color: var(--code-background-color);
	color: var(--border-color);
	padding: .225em;
}
/* Header */
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0;
}
.code-icon {
    display: inline-flex;
    vertical-align: middle;
}
.code-icon.svg-baseline svg {
    top: .125em;
    position: relative;
}
.home-link {
	color: var(--text-color-link-visited) !important;
	font-size: var(--font-size-xxl); /* 16px /16 */
	text-shadow: 3px 3px var(--text-color);
	font-weight: 900;
	margin: 0;
}
.home-link:link:not(:hover) {
	text-decoration: none;
}
.home-link:link:hover {
	text-decoration: none;
}
.footnotes {
	border-top: 2px solid var(--text-color-link-visited) !important;
}
/* Nav */
.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	list-style: none;
	border-bottom: .500em solid;
	border-image-slice: 1;
	border-width: .450em;
	border-image-source: linear-gradient(90deg, var(--text-color-link-visited),var(--text-color-link),var(--text-color-link-active)) !important;
	padding: 1.5rem 0 0.5rem;
	margin: 0 0 1rem;
}
.nav-item {
	margin: 6px;
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-size-s);
}
.nav-item a[href]:not(:hover) {
	text-decoration-color: var(--text-color-link);
}
.nav-item a[href][aria-current="page"] {
	color: var(--text-color-link-active) !important; 
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
	text-underline-offset: .16rem;
	font-weight: 900;
}
/* Posts list */
.postlist {
	list-style: none;
	padding: 0;
	padding-left: 0;
}
.postlist :first-child {
	margin-top: 0 !important;
	margin-bottom: 0.65em !important;
}
.postlist-item {
	display: flow-root;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 0.65em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero);
	line-height: 100%;
	text-align: right;
	margin-left: 0;
}
.postlist-date,
.postlist-item:before {
	font-size: var(--font-size-s); /* 13px /16 */
	font-weight: 400;
	color: var(--header-bottom);
}
.postlist-description {
	font-size: var(--font-size-s); /* 13px /16 */
	color: var(--text-color);
	font-weight: 500;
}
.postlist-date {
	padding-left: 0;
}
.postlist-link {
	font-size: var(--font-size-base); /* 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.10rem;
	text-decoration-thickness: .175em;
	text-wrap: pretty;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}
/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: lowercase;
	text-decoration-color: var(--text-color-link);
	text-decoration-thickness: .175em;
	text-decoration-style: solid;
	text-underline-offset: .10rem;
	font-weight: bold;
}
.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;
}
.footer {
	justify-content: center;
}
.footer-links {
	list-style: none;
	display: flex;
	color: var(--text-color-link);
	justify-content: center;
	gap: 1.5rem;
	padding-left: 0;
}
/* Markdown Alerts */
.markdown-alert {
	padding: 0.5rem 1rem;
	margin-bottom: 16px;
	color: var(--text-color-link-active);
	border-left: .25em solid #888;
	word-break: break-word;
	text-wrap: balance;
}
.markdown-alert>:first-child {
	margin-top: 0 !important;
}
.markdown-alert>:last-child {
	margin-bottom: 0;
}
.markdown-alert .markdown-alert-title {
	display: flex;
	font-weight: 700;
	align-items: center;
	line-height: 1
}
.markdown-alert .markdown-alert-title .octicon {
	margin-right: 0.5rem;
	display: inline-block;
	overflow: visible !important;
	vertical-align: baseline;
	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);
}
/* Guestbook */
input,
textarea {
  	margin: 0 0 10px;
  	padding: 5px 10px;
  	color: var(--text-color) !important;
  	background: var(--background-color);
  	border: 2px solid var(--text-color-link-visited);
}
input {
  	width: 55%;
}
textarea {
  	width: 95%;
}
input[type=button], input[type=submit], input[type=reset] {
  	margin: 0 0 20px;
  	width: 15%;
  	font-weight: bold;
  	color: var(--background-color) !important;
  	background: var(--text-color-link-active);
  	border: 2px solid var(--text-color-link);
  	cursor: pointer;
}
#guestbooks___guestbook-messages-container blockquote {
  	margin: -5px 0 40px;
  	padding: 20px 30px;
  	color: var(--background-color);
  	background-color: var(--text-color-link-visited);

}
#guestbooks___guestbook-messages-header {
  	margin:25px 0;
}
#guestbooks___input-container {
  	color: var(--text-color);
}
#guestbooks___guestbook-messages-header::before {
  	margin-right: 8px;
  	content: '💬';
}
/* Blogroll */
.blogroll {
	list-style: none;
	padding: 0;
	padding-left: 0;
}
.blogroll-item {
	align-items: baseline;
	counter-increment: start-from 1;
	margin-bottom: 0.65em;
}
.blogroll-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero);
	line-height: 100%;
	text-align: right;
	margin-left: 0;
}
.blogroll-item:before {
	font-size: var(--font-size-s); /* 13px /16 */
	font-weight: 400;
	color: var(--header-bottom);
}
.blogroll-description {
	display: inline-block;
	font-size: var(--font-size-base); /* 13px /16 */
	color: var(--heading-shadow) !important;
	margin-left: 3em;	
	font-weight: 400;
	text-wrap: pretty;
}
.blogroll-link {
	font-size: var(--font-size-base); /* 19px /16 */
	font-weight: 900;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0.10rem;
	text-decoration-thickness: .175em;
	text-wrap: pretty;
}
.blogroll-item-active .blogroll-link {
	font-weight: bold;
}