* {
	box-sizing: border-box;
}
/* TODO: 
@media (prefers-color-scheme: dark) {
	:root {
	}
}
*/
:root {
	--palette-bg-bright: #2B2735;
	--palette-bg-dark: #16131F;
	--palette-bg-normal: #181520;
	--palette-blue-bright: #AAC3FD;
	--palette-blue-dark: #395081;
	--palette-blue-normal: #799AE0;
	--palette-cyan-bright: #70C3C6;
	--palette-cyan-dark: #387072;
	--palette-cyan-normal: #429DA0;
	--palette-fg-bright: #EFEFEF;
	--palette-fg-dark: #817998;
	--palette-fg-normal: #D8CEE4;
	--palette-gray-bright: #817998;
	--palette-gray-dark: #332F3C;
	--palette-gray-normal: #464252;
	--palette-green-bright: #7BCE8F;
	--palette-green-dark: #32754B;
	--palette-green-normal: #53B67E;
	--palette-magenta-bright: #EF6194;
	--palette-magenta-dark: #8A294D;
	--palette-magenta-normal: #C24472;
	--palette-orange-bright: #FFC590;
	--palette-orange-dark: #C88B43;
	--palette-orange-normal: #E8AB73;
	--palette-purple-bright: #C7B1F2;
	--palette-purple-dark: #6554A0;
	--palette-purple-normal: #9876D9;
	--palette-red-bright: #E69090;
	--palette-red-dark: #77405F;
	--palette-red-normal: #D16161;
	--palette-yellow-bright: #F0E7AC;
	--palette-yellow-dark: #B5AA60;
	--palette-yellow-normal: #D5C876;

	--palette-inline-code: rgb(204, 204, 204);

	--palette-delimited: rgb(244, 234, 203);
	--palette-delimited2: #F6FCE8;

	--palette-blog-header: rgb(244, 234, 203);
	--palette-sidebar: rgb(244, 234, 203);

	--palette-background: #F6FCE8;
}

.syntax-attribute { color: var(--palette-purple-bright); }
.syntax-call { color: var(--palette-blue-bright); }
.syntax-comment { color: var(--palette-red-dark); }
.syntax-delimiter { color: var(--palette-gray-bright); }
.syntax-exceptional { color: var(--palette-orange-bright); }
.syntax-intrinsic { color: var(--palette-blue-bright); }
.syntax-keyword { color: var(--palette-blue-normal); }
.syntax-literal { color: var(--palette-red-normal); }
.syntax-operator { color: var(--palette-purple-normal); }
.syntax-parameter { color: var(--palette-orange-bright); }
.syntax-string-escape { color: var(--palette-red-bright); }
.syntax-todo { color: var(--palette-red-bright); }
.syntax-type { color: var(--palette-purple-bright); }

.delimited {
	margin: 1em;
	padding: 1em;
	background-color: var(--palette-delimited);
	border-radius: 6px;
}

.delimited2 {
	margin: 1em;
	padding: 1em;
	background-color: var(--palette-delimited2);
	border-radius: 6px;
}

.code-block > .code-language::before {
	content: "\2726";
	padding-right: 0.5em;
}

.code-block > .code-language {
	margin: 0;
	padding: 0.5em;
	background-color: var(--palette-bg-bright);
	border-radius: 0.5em 0.5em 0 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	font-family: monospace;
}

.code-block {
	position: relative;
	display: block;
	color: var(--palette-fg-normal);
	background-color: var(--palette-bg-normal);
	padding: 1.5em 0.5em 0.3em 0.5em;
	border-radius: 0.5em;
	line-height: 1.5;
	margin: 1em;
}

.code-block > pre {
	overflow-x: auto;
	tab-size: 3;
	margin: 1em;
}

.blog-page-container {
	display: grid;
	grid-template-columns: minmax(0, 77%) 20%;
	grid-template-areas:
		"title     sidebar"
		"content   sidebar";
	column-gap: 3%;

	margin-left: auto;
	margin-right: auto;
	max-width: 60rem;
}

.blog-post-title {
	grid-area: title;

	padding: 1%;
	background-color: var(--palette-blog-header);
}

.blog-post {
	grid-area: content;

	padding-left: 1%;
	padding-right: 1%;
	border-radius: 0.3em;
}

.sidebar {
	grid-area: sidebar;
	background-color: var(--palette-sidebar);
	padding: 1em;
}

h2::before {
	content: "\2756";
	padding-right: 0.5em;
}

.blog-post > h3 {
	background-color: var(--palette-blog-header);
	padding: 1%;
}

h3::before, h4::before {
	content: "\274f";
	padding-right: 0.5em;
}

body {
	font-family: Atkinson Hyperlegible, ui-sans-serif, sans-serif, system-ui;
	background-color: #F6FCE8;
	line-height: 1.5em;
}

code {
	padding: 0 0.15em 0 0.15em;
	background-color: var(--palette-inline-code);
	border-radius: 0.2em;
}

@media screen and (max-width: 900px) {
	.blog-page-container {
		display: block;
	}
	.blog-post {
		width: 100%;
	}
	.sidebar {
		width: 100%;
	}
}

/** { border: 1px solid magenta !important; } */