*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	scrollbar-gutter: stable;
}

html {
	--general---color: #000;
	--general---background-color: #fff;
	--footer---background-color: #f5f5f5;
	--code-block---background-color: #f5f5f5;
	--link---color: var(--hex-green);

	color: var(--general---color);
	background-color: var(--general---background-color);

	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
}

@media (prefers-color-scheme: dark) {
	html {
		--general---color: #eee;
		--general---background-color: #222;
		--footer---background-color: #333;
		--code-block---background-color: #333;
		--link---color: #eee;
	}
}

body {
	font-size: 1.125rem;
	line-height: 1.5;

	margin: 0;
}

main {
	max-width: 47rem;
	min-height: 100vh;
	padding: 2rem 1rem 6rem;
	margin: 0 auto;
}

footer {
	padding: 3rem 1rem;
	background-color: var(--footer---background-color);
}

section {
	padding: 1rem 0;
}

section:last-child {
	padding-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
}

p:last-child,
ul:last-child,
ol:last-child,
pre:last-child {
	margin-bottom: 0;
}

a {
	color: var(--link---color);
}

a:active {
	color: red;
}

.table-container {
	overflow: auto;
}

table {
	border-collapse: collapse;
}

th,
td {
	padding: 0.5rem;
}

td {
	border: 1px solid var(--general---color);
}

pre {
	background-color: var(--code-block---background-color);
	tab-size: 4;

	padding: 1rem;
	border-radius: 0.5rem;
	overflow: auto;
}

[id] {
	scroll-margin-top: 2rem;
}