@import url('https://cdn.grid.ws/fonts/JetBrains+Mono');
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
}
ul[role='list'],
ol[role='list'] {
	list-style: none;
}
body {
	min-height: 100vh;
	line-height: 1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}
img,
picture {
	max-width: 100%;
	display: block;
}
input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}
textarea:not([rows]) {
	min-height: 10em;
}
:target {
	scroll-margin-block: 5ex;
}
:root {
	--dark: #111;
	--light: #eee;
	--cta: #c91900;
}
* {
	-webkit-tap-highlight-color: transparent;
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(10vh);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
html {
	font-family: 'JetBrains Mono', monospace, system-ui, sans-serif;
	background: var(--dark);
	color: var(--light);
}
body {
	margin: 0;
	font-size: clamp(12px, 3vw, 20px);
	line-height: 1.5;
	font-weight: 100;
}
h1 {
	font-size: 3em;
	line-height: 1.2em;
	margin: 0.5em 0;
}
h2 {
	font-size: 1.5em;
	line-height: 1.1em;
	margin: 0.5em 0;
}
h3 {
	font-size: 1.1em;
	line-height: 1em;
	margin: 0.5em 0;
}
h1,
h2,
h3 {
	font-weight: 500;
}
.author {
	padding: 1.5rem 0;
	margin-top: 1.5rem;
	border-top: 1px solid #222;
}
hr {
	border: none;
	border-top: 1px solid #222;
	margin: 2em 0;
}
.author img {
	float: left;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	margin-right: 1.5em;
}
.author h3 {
	margin-bottom: 0;
}
.author p {
	margin-top: 0;
}
.author h3 span {
	color: #999;
}
.article {
	position: relative;
}
.date {
	position: absolute;
	right: 0;
	top: 0.5em;
	color: #999;
	font-size: 16px;
}
code,
pre {
	background-color: #0c0c0c !important;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.5;
	font-weight: 300;
	color: inherit;
	padding: 16px;
	overflow: auto;
	border-radius: 4px;
	tab-size: 2;
}
code {
	padding: 0.2em 0.4em;
	color: var(--light);
}
pre {
	padding: 2ex;
}
pre code {
	background: none;
	padding: 0;
}
a {
	color: #fff;
	text-decoration: none;
	transition: color 300ms;
}
a:hover {
	color: var(--cta);
	filter: url(#filter-glitch);
}
blockquote {
	font-style: italic;
	border-left: 3px solid var(--cta);
	padding-left: calc(2ex - 3px);
	margin-left: 0;
	margin-right: 1rem;
}
::selection {
	background: var(--light);
	color: var(--dark);
}
* {
	color-scheme: dark light;
}
img,
svg {
	max-width: 100%;
	height: auto;
}
.logo {
	width: 100px;
	height: 64px;
	padding: 4rem 0 2rem;
}
.logo svg path {
	fill: #fff;
}
.fadeUp {
	animation: fadeUp 600ms;
}
@media (prefers-color-scheme: light) {
	html {
		background: var(--light);
		color: var(--dark);
	}
	a {
		color: #000;
	}
	.logo svg path {
		fill: #000;
	}
	::selection {
		background: var(--dark);
		color: var(--light);
	}
}