html {
	color: #333;
	font-size: 120%;
	line-height: 1.5;

	--border-color: linear-gradient(
		to right,
		#ffafc7 10%,
		#73d7ee 10% 20%,
		#613915 20% 30%,
		#000000 30% 40%,
		#e50000 40% 50%,
		#ff8d00 50% 60%,
		#ffee00 60% 70%,
		#028121 70% 80%,
		#004cff 80% 90%,
		#760088 90%
	);
	border-image: var(--border-color) 1;
	border-top: 0.5rem solid;
}

code,
kbd {
	font-family: "fix the damn font size", monospace;
}

p {
	margin-block-end: 1lh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.25;
	margin-block-end: 1lh;
}

pre {
	font-size: 90%;
}

main {
	max-width: 35rem;
	padding: 1rem;
	margin: auto;

	img {
		max-width: 100%;
	}

	code:not(pre code),
	kbd,
	pre {
		background-color: #9994;
		border-radius: 0.2rem;
	}

	code:not(pre code),
	kbd {
		padding: 0 0.25rem;
	}

	pre {
		margin: -0.25rem -0.5rem;
		padding: 0.25rem 0.5rem;
	}

	.subtle {
		font-size: small;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		color: #ccc;
		background: #111;
	}

	a:link {
		color: #6cf;
	}

	a:visited {
		color: #ccf;
	}
}