.mini-header {
		background: var(--cherries-line);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-shadow: 0 0 5px var(--cherries-line);
		z-index: 1;
	}

	.mini-header h1 {
		font-size: 1rem;
		line-height: var(--header-size);
		margin: 0;
	}

	.mini-header h1 a {
		text-decoration: none;
		color: var(--white);
		display: block;
		padding-inline: 1em;
	}
:root {
		--background: white;
		--foreground: black;
		--link: #046;
		--link-hover: #37b;
		--selection-b: #fe8;
		--selection-f: #333;
		--name-shadow: pink;

		margin: 1.8em;
		margin-right: 0;

		background: var(--background);
		foreground: var(--foreground);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--background: black;
			--foreground: white;
			--name-shadow: #905;
			--selection-b: #3fc;
			--selection-f: #000;
			--link: #3cf;
			--link-hover: #9df;
		}
	}

	::selection {
		background: var(--selection-b);
		color: var(--selection-f);
	}

	* {
		font-family:
			avenir next,
			avenir,
			din,
			sans-serif;
	}

	main {
		font-size: 2.4rem;
	}

	@media tv {
		html::before {
			content: "i'm on tv!";
			display: block;
		}
	}

	.p-name,
	.chee-name {
		display: inline-block;
		font-family: serif;
		font-weight: 200;
		margin: 0;
	}

	.chee-name,
	.chee-name::before,
	.chee-name::after {
		color: var(--foreground);
		animation: winglight 1.5s alternate infinite ease;
		font-size: 1.4em;
		text-shadow: -2px 2px var(--name-shadow);
	}

	.u-key,
	.u-key a {
		font-family:
			ibm plex mono,
			monospace;
		font-size: 0.8em;
		background: #fe8;
	}

	.leavers-link {
		color: var(--link);
	}

	.leavers-link:hover {
		color: var(--link-hover);
	}

	.leavers-link {
		display: inline-block;
		vertical-align: top;
		width: 80%;
	}

	li + li {
		margin-top: 0.5em;
	}

	li {
		position: relative;
	}

	li:last-child .leavers-link::first-letter {
		text-transform: lowercase;
	}

	li:last-child::before {
		content: 'or, ';
	}

	.h-card {
		position: relative;
		margin: 0;
	}

	.images {
		margin-left: 1ex;
		float: right;
		display: flex;
		flex-direction: column;
		margin-top: -1ex;
	}

	.images > * {
		width: 2ex;
		height: 2ex;
		border-radius: 100%;
		object-fit: cover;
	}

	.p-name.u-url {
		text-decoration: none;
		cursor: auto;
	}

	style {
		font-family:
			fira code,
			monospace;
	}

	.page-chee-rabbits {
		--header-size: 1.5rem;
	}

	main {
		padding-top: var(--header-size);
	}
: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;
	}