:root {
	--black: #000000;
	--flame: #f46e42;
	--lavender-blush: #eee5e9;
	--gray-web: #7c7c7c;
	--gold-crayola: #efc88b;

	--bg: var(--black);
	--fg: var(--lavender-blush);
}

@media (prefers-color-scheme: light) {
	:root {
		--flame: #cf5c36;
		--gold-crayola: #b5863b;

		--bg: var(--lavender-blush);
		--fg: var(--black);
	}
}

body, html {
	margin: 0;
	padding: 0;

	background-color: var(--bg);
	color: var(--fg);
	font-family: "Inter", sans-serif;
}

.centeredpage {
	max-width: 700px;
	margin: 0 auto;
	margin-bottom: 100px;
	padding: 0 24px;

	text-align: justify;
}

h1 {
	text-align: center;
	font-size: 75px;
	font-weight: 700;
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 12vw;
	}
}

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

code {
	font-family: "JetBrainsMono Nerd Font", "JetBrainsMono", monospace;
	color: var(--gold-crayola);
}

p, ul { margin: 30px 0; }

ul { line-height: 1.7; }