.banner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: var(--cherries-fill);
		padding: 0 0.5em;
		font-family: var(--page-family);
		height: var(--header-size);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	.banner-strings {
		display: flex;
		align-items: center;
		gap: 0.75em;
		justify-content: center;
		flex: 2;
	}

	.banner-strings img {
		vertical-align: middle;
		margin-bottom: 5px;
	}

	.banner-strings * {
		margin: 0;
	}

	.banner-name,
	.banner-description {
		/* 		background: white; */
		white-space: nowrap;
	}

	.banner-strings a {
		/* 		background: white; */
		white-space: nowrap;
		color: var(--page-line);
		text-decoration: none;
	}

	/* todo add class */
	.banner-strings p {
		/* kind of half the diff between h1 and p */
		margin-top: 0.5em;
		font-family: var(--monospace-family);
	}

	/* todo add class */
	.banner-nav a {
		white-space: nowrap;
		color: var(--page-line);
		text-decoration: none;
	}

	.banner-nav {
		position: absolute;
	}

	.banner-nav--next {
		right: 0;
	}

	@media (max-width: 400px) {
		body {
			--header-size: 4.5rem;
		}
		.banner-strings {
			flex-direction: column;
			gap: 0;
		}
	}

	@media (max-width: 700px) {
		.banner-nav__title {
			visibility: hidden;
		}
	}
:root {
		--tag-fill: var(--lemon);
		--tag-line: var(--black);
		--header-size: 2.6rem;
	}

	main {
		max-width: var(--reading-width);
		margin: auto;
		padding-top: var(--header-size);
		margin-top: 1em;
	}

	main li {
		padding: 0;
	}
	main li ul {
		position: relative;
		background: var(--li-1);
		margin: 0.5em 0 0;
	}
	main li li ul {
		background: var(--li-3);
	}
	main li li li ul {
		background: var(--li-4);
	}
	main li li li li ul {
		background: var(--li-5);
	}
	main li li li li li ul {
		background: var(--li-6);
	}

	trail {
		position: absolute;
		top: 10px;
		left: 10px;
		font-size: 40px;
		height: 1em;
		width: 1em;
		transform: scale(0.1);
		transition:
			transform 0.2s linear,
			opacity 0.5s ease;
	}

	.page-nav {
		width: var(--reading-width);
		margin-inline: auto;
	}

	.np-nav {
		display: flex;
		gap: 1em;
		font-family: var(--page-family);
		--border-height: 10px;
		--border-color: var(--green);
	}

	.np-nav a {
		display: flex;
		width: 50%;
		gap: 0.5ch;
		color: var(--page-line);
		text-decoration: none;
		padding: 0.5em 0;
	}

	.np-nav a:hover,
	.np-nav a:focus {
		background: var(--page-line);
		color: var(--page-fill);
	}

	.page-nav--above .np-nav a {
		margin-bottom: var(--border-height);
	}

	.page-nav--above .np-nav a:hover {
		border-bottom: var(--border-height) solid var(--green);
		margin-bottom: calc(0 - var(--border-height));
	}

	.page-nav--below .np-nav a {
		margin-top: var(--border-height);
	}

	.page-nav--below .np-nav a:hover {
		border-top: var(--border-height) solid var(--green);
		margin-top: calc(0 - var(--border-height));
	}

	.np-nav__title {
		display: inline-block;
		width: calc(100% - 1.5em);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.np-nav a:only-child:not([rel='prev']):not([rel='first']) {
		margin-left: 50%;
	}

	.np-nav a:nth-child(2),
	.np-nav a[rel='next'],
	.-txt-r {
		text-align: right;
	}

	.p-name {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.p-name a {
		text-decoration: none;
	}

	article {
		border: 1px solid var(--page-line);
		margin-bottom: 1em;
	}

	article:is(.h-entry, .h-feed) {
		--padding-inline: 1rem;
		--padding-top: 0.5rem;
		--escape-inline: -1rem;
		--escape-top: -0.5rem;
		--full-width: calc(100% + var(--padding-inline) * 2);
		padding: var(--padding-top) var(--padding-inline) 0 var(--padding-inline);
		background: var(--entry-fill);
		color: var(--entry-line);
		font-family: var(--entry-family);

		border: 1px solid var(--page-line);
		box-shadow: 0 0 25px
			color-mix(in srgb, var(--page-line) 20%, var(--page-fill));
		margin-block: 2em;
	}

	article:is(.h-entry, .h-feed):first-of-type {
		margin-top: 0;
	}

	article:is(.h-entry, .h-feed):last-of-type {
		margin-bottom: 0;
	}

	article:is(.h-entry, .h-feed) .full-width {
		margin-inline: var(--escape-inline);
		min-width: var(--full-width);
		display: flex;
	}

	.post-type-star .p-summary {
		padding-bottom: 0;
	}

	.entry-bar {
		background: var(--page-line);
		color: white;
		padding: 0 var(--padding-inline);
		font-family: var(--monospace-family);
		margin-top: var(--escape-top);
	}

	.entry-bar a {
		text-decoration: none;
		color: white;
		font-size: 0.9em;
		line-height: 2.2em;
	}

	.entry-bar__timezone {
		font-size: 0.75em;
		color: color-mix(in srgb, white 80%, var(--page-line));
	}

	.post-type-music-album .e-content audio {
		height: 100%;
		width: 100%;
	}

	article.post-type-music-album {
		/* 		background: var(--cherries-line); */
		background: black;
		color: white;
	}

	.post-type-music-album .p-name a.u-url {
		text-decoration: none;
		color: white;
	}

	.post-type-music-track .e-content audio {
		height: 100%;
		width: 100%;
	}

	article.post-type-music-track {
		/* 		background: var(--cherries-line); */
		background: black;
		color: white;
	}

	.post-type-music-track .p-name a.u-url {
		text-decoration: none;
		color: white;
	}

	.e-content figure {
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		margin: 0;
	}

	.e-content figcaption {
		text-align: center;
		background: var(--white);
		margin: 2px auto;
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 0.5ch 1ex;
		font-size: 0.8em;
		border: 1px solid;
	}

	.e-content p {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.e-content
		p:has(
			:is(:only-child):is(
					p > figure,
					p > canvas,
					p > video,
					p > object,
					p > iframe,
					p > picture,
					p > in-columns,
					p > photo-gallery,
					p > svg,
					p > img
				)
		) {
		margin-top: 0;
		margin-bottom: 0;
	}

	.e-content > figure,
	.e-content > video,
	.e-content > video,
	.e-content > p > img,
	.e-content > .eleventy-plugin-youtube-embed,
	.e-content > .eleventy-plugin-embed-soundcloud {
		margin-left: var(--escape-inline);
		margin-right: var(--escape-inline);
		min-width: var(--full-width);
		display: flex;
	}

	.post-type-video > figure,
	.post-type-picture > figure {
		margin-left: var(--escape-inline);
		margin-right: var(--escape-inline);
		min-width: var(--full-width);
		display: flex;
		flex-direction: column;
		text-align: center;
		margin-top: 0;
		margin-bottom: 0;
	}

	.post-type-video > figure > figcaption,
	.post-type-picture > figure > figcaption {
		background: var(--black);
		color: var(--white);
	}

	.e-content table {
		border-collapse: collapse;
		border: 1px solid;
		border-left: 0;
		border-right: 0;
		margin-left: -1px;
		margin-right: -1px;
	}

	.e-content td {
		border: 1px solid;
	}

	.e-content .computer {
		--fill: #000;
		--line: #3f9;
		font-family: var(--monospace-family);
	}

	.e-content .computer code {
		color: white;
	}

	.e-content .danger {
		--fill: #cc0305;
		--line: white;
	}

	.e-content .pink {
		--fill: #ffbdc7;
		--line: black;
	}
	.e-content .green {
		--fill: #acffdc;

		--line: black;
	}
	.e-content .black {
		--fill: black;
		--line: white;
	}
	.e-content .yellow {
		--fill: #fffdc7;
		--line: black;
	}
	.e-content .aqua {
		--fill: #e7fff4;
		--line: black;
	}
	.e-content .orange {
		--fill: #ffcd97;
		--line: black;
	}
	.e-content .blue {
		--fill: #6b8df7;
		--line: black;
	}
	.e-content .lb {
		--fill: #a4e0ff;
		--line: black;
	}
	.e-content .purple {
		--fill: #ac80f7;
		--line: black;
	}

	.e-content
		:is(
			.danger,
			.pink,
			.green,
			.black,
			.yellow,
			.aqua,
			.orange,
			.blue,
			.purple,
			.computer
		) {
		background: var(--fill);
		color: var(--line);
		border-block: 2px solid color-mix(in srgb, var(--fill) 95%, var(--line));
		width: var(--full-width);
		margin: 1em var(--escape-inline);
		padding: 0.5em var(--padding-inline);
	}

	.e-content .center {
		text-align: center;
	}

	.e-content blockquote {
		margin-left: -0.5em;
		margin-right: -0.5em;
	}

	.e-content blockquote > p {
		margin: 0.5em;
		padding: 0;
	}

	.e-content pre code {
		white-space: pre-wrap;
	}

	.i {
		display: inline-block;
		vertical-align: middle;
	}

	.i img {
		image-rendering: pixelated;
	}

	.e-content blockquote {
		line-height: 1.37;
		background: var(--quote-fill);
		box-sizing: border-box;
		color: var(--quote-line);
		position: relative;
		border-left: 5px solid var(--quote-left-border-line);
		padding: 0.5em 1em;
		font-family: var(--quote-font-family);
		font-weight: var(--default-font-weight);
		font-size: 0.9em;
		margin: 0;
	}

	.chat {
		display: flex;
		flex-direction: column;
		font-family: system-ui, sans-serif;
	}

	.chat * + * {
		margin-top: 1em;
	}

	chat-message {
		border-radius: 0.5em;
		display: block;
		background: var(--fill);
		max-width: 75%;
		width: auto;
		color: var(--line);
		position: relative;
		background: linear-gradient(to bottom, var(--fill-top), var(--fill-bottom));
		padding: 0.5em;
	}

	chat-message:not([name='chee']) {
		--fill-top: #f0e7e7;
		--fill-bottom: #e7e0e0;
		--line: black;
		border-bottom-left-radius: 0;
	}

	chat-message[name='chee'] {
		--fill-top: #555ff6;
		--fill-bottom: #5536f0;
		--line: white;
		align-self: end;
		border-bottom-right-radius: 0;
	}

	chat-message::after {
		content: '';
		display: block;
		position: absolute;
		box-sizing: border-box;
		height: 0;
		width: 0;
		border: 8px solid transparent;
	}

	chat-message:not([name='chee'])::after {
		bottom: 0;
		left: -4px;
		border-right-color: var(--fill-bottom);
		border-left: 0;
		border-bottom: 0;
	}

	chat-message[name='chee']::after {
		bottom: 0;
		right: -4px;
		border-left-color: var(--fill-bottom);
		border-right: 0;
		border-bottom: 0;
	}

	.e-content chat-message > blockquote {
		background: 0;
		margin: 0;
		padding: 0;
		border: 0;
		color: var(--line);
		font-family: system-ui, sans-serif;
	}

	.e-content chat-message > blockquote > p {
		margin: 0;
	}

	in-columns p:only-child,
	in-columns:not(:has(p:only-child)) {
		display: grid;
		grid-auto-flow: column;
		width: 100%;
		margin-inline: var(--escape-inline);
		min-width: var(--full-width);
	}

	in-columns > p {
		margin: 0;
	}

	in-columns p:only-child img,
	in-columns:not(:has(p:only-child)) img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	in-columns > figure > p {
		height: 100%;
	}

	code[class*='language-'],
	pre[class*='language-'] {
		-o-tab-size: 2;
		-moz-hyphens: none;
		-moz-tab-size: 2;
		tab-size: 2;

		-ms-hyphens: none;
		-webkit-hyphens: none;
		hyphens: none;

		font-family: var(--monospace-family);
		font-size: 0.95em;

		line-height: 1.2;

		text-align: left;
		text-shadow: 0 1px #ffffff99;
		white-space: pre;
		word-break: normal;
		word-spacing: normal;
		word-wrap: normal;
		color: var(--code-line);
	}

	/** todo only include if there is code block */
	/* Code blocks */
	pre[class*='language-'] {
		padding: 0.75em;
		border: 1px solid;
		border-radius: 4px;
		overflow-x: auto;
	}

	:not(pre) > code[class*='language-'],
	pre[class*='language-'] {
		background: var(--code-fill);
	}

	/* Inline code */
	:not(pre) > code[class*='language-'] {
		padding: 0.1em;
		border-radius: 0.3em;
		white-space: normal;
		/* border: 1px solid color-mix(in srgb, var(--code-line) 50%, var(--fill)); */
		border-radius: 4px;
		background: var(--code-fill);
		color: var(--code-line);
	}

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

	.token.punctuation {
		color: #000;
	}

	.namespace {
		opacity: 0.7;
	}

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

	.token.boolean,
	.token.number {
		color: #2d83f9;
	}

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

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

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

	.token.keyword {
		color: #1b999f;
	}

	.token.regex,
	.token.important {
		color: #000;
		background: #ff000011;
	}

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

	.token.italic {
		font-style: italic;
	}

	.p-content:not(:has(*)) {
		white-space: pre-wrap;
		padding-top: 1em;
		padding-bottom: 1em;
		font-family: var(--monospace-family);
	}

	.h-entry .tags:not(:empty) {
		margin-bottom: 1em;
	}

	.h-entry .tags a[rel='tag'].p-category {
		display: inline-block;
		background: var(--tag-fill);
		font-size: 1em;
		color: var(--tag-line);
		font-family:
			comic sans ms,
			comic sans,
			var(--monospace-font);
		text-align: center;
		transform: skewX(-10deg);
		line-height: 1.4;
		padding: 0.5em;
		border-radius: 0;
	}

	.e-content .big {
		font-size: 3em;
	}

	.e-content .soft {
		color: var(--cherries-line);s
	}

	@keyframes hue-cycle {
		0% {
			filter: hue-rotate(1deg);
		}

		50% {
			filter: hue-rotate(179deg);
		}

		100% {
			filter: hue-rotate(359deg);
		}
	}

	.hue-cycle {
		animation: hue-cycle 4s linear infinite;
	}

	@media (prefers-reduced-motion) {
		.hue-cycle {
			animation: none;
		}
	}
:root {
		--green: #33ffcc;
		--blue: #33ccff;
		--dark-blue: #03c;
		--red: #ff2a50;
		--orange: #ff7c7a;
		--mustard: #fe8;
		--lemon: #ff8;
		--black: #000;
		--white: #fff;
		--f-blue: #2269ff;
		--cherries-fill: #ffe9ed;
		--cherries-line: #c36;

		--page-fill: var(--white);
		--page-line: var(--cherries-line);

		--entry-fill: var(--white);
		--entry-line: var(--black);

		--serif-family: serif;
		--sans-family: segoe ui, avenir next, gill sans, sans-serif;
		--monospace-family: monospace;
		--font-family: var(--sans-family);
		font-family: var(--font-family);
		--page-family: var(--sans-family);
		--entry-family: baskerville, serif;

		--quote-fill: #f0f8ff;
		--quote-line: #000;
		--quote-left-border-line: var(--f-blue);
		--quote-font-family: var(--sans-family);
		--code-fill: var(--cherries-fill);
		--code-line: var(--cherries-line);

		--reading-width: 86ex;
		font-size: 1.2em;
		line-height: 1.2;

		--fill: var(--white);
		--line: var(--black);

		--li-1: rgba(255, 255, 245);
		--li-2: rgba(255, 250, 255);
		--li-3: rgba(230, 255, 240);
		--li-4: rgba(240, 255, 255);
		--li-5: rgba(255, 230, 240);
		--li-6: rgba(240, 240, 255);
	}

	[hidden] {
		display: none;
	}
	* {
		scrollbar-color: var(--cherries-line) var(--cherries-fill);
	}

	::selection {
		background: #13ffbcba;
	}

	html {
		color: var(--page-line);
		height: 100%;
		background-color: var(--cherries-fill);
		background-image: linear-gradient(
			to top,
			var(--cherries-fill),
			var(--white)
		);
	}

	body {
		margin: 0;
		min-height: calc(100% - 1em);
		background-color: var(--white);
		background-image: url(/cherry-tiles.webp);
		background-size: 72px;
	}

	a {
		color: var(--f-blue);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: optima, system-ui, sans-serif;
	}

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

	img,
	video {
		max-width: 100%;
		image-rendering: pixelated;
	}