:root {
	--color0: #002439;
	--color1: #003e54;
	--color2: #195971;
	--color3: #3c768f;
	--color4: #c9e4de;
	--color5: #e6f4f1;
	--color6: #e3f1ee;
	--color7: #98afba;
	--color8: #00a3eb;
	--color9: #5c94ae;
	--color10: #72506d;
	--color11: #d36f79;
	--color12: #f1962e;
	--color13: #eee8a9;
	--color14: #47c088;
	--color15: #a682a1;
	--light: #f8f8f8;
	--light-yellow: oklch(95% 20% 100);
	--yellow: oklch(75% 20% 100);

	--semibold: 600;

	--font-4xl: 2.25rem;
	--line-height-4xl: 2.5rem;
	--font-3xl: 1.875rem;
	--line-height-3xl: 2.25rem;
	--font-2xl: 1.5rem;
	--line-height-2xl: 2rem;
	--font-xl: 1.25rem;
	--line-height-xl: 1.75rem;
}

html {
	overflow-y: scroll;
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
	line-height: 1.5;
}

*, ::before, ::after {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0px;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
	margin: 0;
}

ol, ul {
	margin: 0;
	padding: 0;
}

code, pre {
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
}

body {
	background-color: white;
	color: var(--color2);
	margin: 0;
}
@media (min-width: 1024px) {
	body {
		background-color: var(--color6);
	}
}
@media(prefers-color-scheme: dark) {
	body {
		background-color: var(--color2);
		color: var(--color7);
	}
}

.header {
	position: fixed;
	width: 100%;
	height: 3rem;
	top: 0;
	background-color: var(--color9);
	border-color: var(--color9);
	font-weight: var(--semibold);
	border-bottom-width: 1px;
	color: white;
	box-shadow: 2px 2px 8px var(--color7);
}
.header-content {
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 100%;
	display: flex;
	align-items: center;
}
.header-right {
	display: flex;
	gap: 0.9rem;
}
a {
	color: inherit;
	text-decoration: inherit;
}
.header a {
	border-bottom: 2px solid transparent;
}
.header a.active {
	border-color: var(--color3);
}
@media(prefers-color-scheme: dark) {
	.header {
		background-color: var(--color0);
		border-color: var(--color0);
		color: var(--color7);
		box-shadow: 2px 2px 8px var(--color1);
	}
}

.posts {
	max-width: 56rem;
	margin: 3rem auto 0 auto;
	padding-top: 0.5rem;
	background-color: white;
}
.post {
	padding: 1rem 0.5rem 2.5rem 0.5rem;
	border-bottom: 1px solid var(--color4);
}
.post:last-child {
	border-bottom-width: 0;
}
.date {
	color: var(--color9);
}
@media (min-width: 640px) {
	.post {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}
@media (min-width: 1024px) {
	.posts {
		margin: 4rem auto 1rem auto;
		box-shadow: 1px 1px 8px var(--color4);
	}
}
@media(prefers-color-scheme: dark) {
	.posts {
		background-color: var(--color1);
		box-shadow: 1px 1px 3px var(--color1);
	}
	.post {
		border-bottom-color: var(--color3);
	}
	.date {
		color: var(--color3);
	}
}

.post h1 {
	font-size: var(--font-4xl);
	line-height: var(--line-height-4xl);
}

.post h1, .post h2, .post h3, .post h4 {
	font-weight: var(--semibold);
	padding: 4rem 0 0.5rem 0;
	margin-top: -3rem;
}

.post h2 {
	font-size: var(--font-3xl);
	line-height: var(--line-height-3xl);
}

.post h3 {
	font-size: var(--font-2xl);
	line-height: var(--line-height-2xl);
}

.post h4 {
	font-size: var(--font-xl);
	line-height: var(--line-height-xl);
}

span[id] {
	padding-top: 1.75rem;
	margin-top: -1.75rem;
}

.post a {
	color: var(--color8);
}
.post a:hover {
	text-decoration: underline;
}

.post h1 a {
	color: inherit;
}

.post p {
	padding: 0.25rem 0;
}

.post.date {
	min-width: 6.25rem;
}

.post ul {
	padding-left: 2rem;
	list-style: disc;
	list-style-position: outside;
}

.post ol {
	padding-left: 2rem;
	list-style: decimal;
	list-style-position: outside;
}

.post li {
	padding: 0.25rem 0;
}

.post :not(pre) > code {
	background-color: var(--color6);
	padding: 0.125rem;
	border-radius: 4px;
}

.post pre {
	padding: 0.5rem;
	margin: 0.5rem -0.25rem;
	background-color: var(--light);
	color: var(--color4);
	border: 1px solid var(--color4);
	border-radius: 4px;
	overflow: auto;
}
.post > .warning {
	background-color: var(--light-yellow);
	border: 1px solid var(--yellow);
	padding: 0.25rem;
	margin: 0 -0.25rem;
	border-radius: 4px;
}

.post pre {
	color: var(--color3);
}

.post pre .builtin {
	color: var(--color14);
}

.post pre .comment {
	color: var(--color7);
}

.post pre .comment-delimiter {
	color: var(--color7);
}

.post pre .constant {
	color: var(--color12);
}

.post pre .constant a {
	color: var(--color12);
}

.post pre .doc {
	color: var(--color8);
}

.post pre .function-name {
	color: var(--color11);
}

.post pre .keyword {
	color: var(--color15);
}

.post pre .parenthesis {
	color: var(--color9);
}

.post pre .string {
	color: var(--color10);
}

.post pre .type {
	color: var(--color13);
}

@media(prefers-color-scheme: dark) {
	.post :not(pre) > code {
		background-color: var(--color2);
	}
	.post pre {
		background-color: var(--color1);
		border-color: var(--color3);
		color: var(--color3);
	}
	.post > .warning {
		color: var(--color1);
		background-color: var(--yellow);
		border-color: transparent;
	}
	.post > .warning code {
		color: var(--color7);
	}
	.post pre .parenthesis {
		color: var(--color2);
	}
}

.text-xl {
	font-size: var(--font-xl);
	line-height: var(--line-height-xl);
}

.hidden {
	display: none;
}

.flex-grow {
	flex-grow: 1;
}

.mb-4 {
	margin-bottom: 1rem;
}