:root {
	--redrose: #321b19;
	--redderrose: #712b2a;
	--wall: #626059;
	--whiterose: #dee3e7;
	--pinkrose: #c3b7b9;
	--pinkshadow: #753239;
	--contrastier: #ad4844;
	--leaf: #3b463d;
	--leaf2: #454e4e;
	--leaf2: #759f8f;
	--creamrose: #efede4;
	--table: #352f29;
	--purple: #513889;
	--pink: #e4b3d0;
	--periwinkle: #8d84bb;
	--skyblue: #b2d9f6;
	--rat: #0a0e11;

	--base00: #101010;
	--base01: #202020;
	--base02: #2b2b2b;
	--base03: #505050;
	--base04: #b0b0b0;
	--base05: #d0d0d0;
	--base06: #e0e0e0;
	--base07: #fafafa;
	--base08: #ab4642;
	--base09: #dc9656;
	--base0A: #f7ca88;
	--base0B: #a1b56c;
	--base0C: #86c1b9;
	--base0D: #7cafc2;
	--base0E: #ba8baf;
	--base0F: #a16946;
}

article ul li::marker {
	content: "~ ";
	font-family: monospace;
}

blockquote {
	background: var(--rat);
	font-style: italic;
	padding: 0.5em 2em 0.5em 1.25em;
	margin-left: 0;
	border-left: 3px solid var(--periwinkle);
	display: block;
}

table {
	background-color: var(--rat);
	padding: 1ch;
}

th,
td {
	padding: 0.5ch;
	text-align: left;
}

th {
	font-weight: 900;
}

html {
	background: #0a0e11;
}

.ascii {
	margin: 0;
	font-family: monospace;
	white-space: pre;
	max-width: 100%;
	flex-shrink: 1;
	font-size: clamp(4px, 1.2vw, 12px);
	padding: 0;
	font-weight: bolder;
	text-shadow: 1ch 1ch #ffffff88;
	padding-right: 2ch;
}

.ascii.small {
	font-size: clamp(4px, 1vw, 8px);
}

body {
	--font-sans:
		"Segoe UI", "Noto Sans Mono", -apple-system, BlinkMacSystemFont, Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-mono:
		"Maple Mono NL NF", "Ubuntu Mono", "Fira Mono", "Noto Sans Mono", monospace;
	font-family: var(--font-sans);
	background: #0e1212;
	color: #f3e4ca;
	margin: 0;
	min-height: 100vh;
	/* font-size: 1.05rem; */
}

p code {
	color: var(--base0A);
	background-color: var(--base01);
	padding: 0.2ch 0.5ch;
	font-size: 0.95em;
}

.sidebar {
	padding: 1em;
	overflow-y: auto;
	max-height: 400px;
	background: var(--rat);
	width: 100%;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 1.2em;
}

.sidebar ul {
	list-style: none;
	padding-left: 1ch;
	margin: 0;
}

.sidebar>ul {
	padding-left: 0;
}

.sidebar>li::before {
	content: "+";
}

.sidebar a {
	text-decoration: none;
	color: var(--pinkrose);
}

.sidebar a.active {
	font-weight: bolder;
	text-decoration: none;
}

.sidebar-vim {
	display: none;
}

.content {
	padding: 2rem;
	width: 100%;
	max-width: 72ch;
	box-sizing: border-box;
}

@media (min-width: 1000px) {
	body {
		display: flex;
	}

	.sidebar {
		width: 15vw;
		height: 100vh;
		position: sticky;
		top: 0;
		max-height: none;
		flex-shrink: 0;
		padding: 1em;
	}

	.sidebar-vim {
		display: block;
		margin-top: 1em;
		font: inherit;
		font-size: 0.85em;
		cursor: pointer;
		background: var(--base02);
		color: var(--base05);
		border: 1px solid var(--base03);
		border-radius: 3px;
		padding: 0.3em 0.6em;
		transition: background 0.15s, color 0.15s;
	}

	.sidebar-vim:hover {
		background: var(--base03);
		color: var(--base07);
	}

	.sidebar-vim.active-toggle {
		border-color: var(--periwinkle);
		color: var(--periwinkle);
		background: var(--base01);
	}

	.content {
		padding: 4rem 8rem 4rem 4rem;
		max-width: 85vw;
	}
}

a,
a:visited {
	color: var(--periwinkle);
}

a.active,
a:hover {
	/* font-weight: bold; */
	background-color: var(--periwinkle);
	color: var(--rat);
	text-decoration: underline;
}

pre,
code,
summary {
	font-family: "Maple Mono NL NF", "Ubuntu Mono", "Fira Mono", "Noto Sans Mono", monospace;
}

summary {
	padding: 0.5ch;
	color: var(--whiterose);
}

details,
summary {
	background-color: var(--rat);
}

pre {
	padding: 0.5em;
	overflow-x: auto;
}

a.imp,
a.imp:visited {
	font-weight: 900;
	color: var(--contrastier);
}

a.imp:hover {
	font-weight: 900;
	color: var(--rat);
	background-color: var(--contrastier);
}


a.green,
a.green:visited {
	font-weight: 900;
	color: var(--base0B);
}

a.green:hover {
	font-weight: 900;
	color: var(--rat);
	background-color: var(--base0B);
}

.lr-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 1rem 0;
}

.lr-container>div {
	flex: 1;
	min-width: 0;
}

.lr-container>div>h1 {
	font-family: monospace;
}

@media (min-width: 900px) {
	.lr-container {
		flex-direction: row;
	}

	.lr-container:nth-of-type(even) {
		flex-direction: row-reverse;
	}

	.lr-container:nth-of-type(even) {
		flex-direction: row-reverse;
	}

	.lr-container:nth-of-type(even)>div>h1::before {
		content: "< ";
		font-family: monospace;
	}

	.lr-container:nth-of-type(odd)>div>h1::after {
		content: " >";
		font-family: monospace;
	}
}

div.highlight,
pre.chroma {
	background: var(--rat) !important;
}

pre.chroma,
.highlight pre {
	background: var(--rat) !important;
}

.chroma {
	background: transparent !important;
}

code {
	background: transparent;
}

.lr-container pre {
	max-width: 100%;
	overflow-x: auto;
}

.lr-container>div {
	min-width: 0;
}

/* ref shortcode */
a.ref,
a.ref:visited {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3ch;
	text-decoration: none;
	color: var(--leaf2);
	font-family: var(--font-mono);
	font-size: 0.82em;
	vertical-align: middle;
	white-space: nowrap;
	transition: color 0.1s;
}

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

a.ref .ref-prefix {
	opacity: 0.5;
	font-style: normal;
	font-size: 0.9em;
}

a.ref .ref-sym {
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

h1 h2 h3 h4 {
	font-family: var(--font-mono);
}