:root {
	--box-scale-base: 1rem;
	--color-gray-100: #2f2f2f;
	--color-gray-50: #9e9e9e;
	--color-gray-0: #f6f6f6;
	--color-primary-100: var(--color-gray-100);
	--color-primary-50: var(--color-gray-50);
	--color-primary-0: var(--color-gray-0);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-100: #fcfcfc;
		--color-gray-50: #a5a5a5;
		--color-gray-0: #3a3a3a;
	}
}
		
html {
	background-color: var(--color-primary-0);
	color: var(--color-primary-100);
	color-scheme: light dark;
	font: -apple-system-body;
	font-weight: 400;
	line-height: 2;
	overflow-block: scroll;
	scrollbar-color: var(--color-primary-50) var(--color-primary-0);
	tab-size: 2;
	line-break: strict;
	hyphens: auto;
	text-justify: auto;
	text-autospace: normal;
	text-spacing-trim: trim-start;
	hanging-punctuation: first allow-end last;
	-webkit-text-size-adjust: 100%;
}

body {
	--body-padding-block: calc(16px * (3 / 2));
	--body-padding-top: calc(var(--body-padding-block) + env(safe-area-inset-top));
	--body-padding-bottom: calc(var(--body-padding-block) + env(safe-area-inset-bottom));
	--body-padding-inline: 16px;
	margin-block: 0;
	margin-inline: auto;
	padding-top: var(--body-padding-top);
	padding-right: calc(var(--body-padding-inline) + env(safe-area-inset-right));
	padding-bottom: var(--body-padding-bottom);
	padding-left: calc(var(--body-padding-inline) + env(safe-area-inset-left));
	display: grid;
	grid-template-rows: 1fr auto;
	row-gap: calc(var(--box-scale-base) * 6);
	min-block-size: calc(100dvb - var(--body-padding-top) - var(--body-padding-bottom));
	max-inline-size: calc(var(--box-scale-base) * 40);
}

address {
	font-style: normal;
}

figure {
	margin: 0;
	padding-block: calc(var(--box-scale-base) - (1rlh - 1rem) / 2);
	padding-inline: var(--box-scale-base);
	max-inline-size: fit-content;
}

body > footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: calc(var(--box-scale-base) * 2);
	column-gap: calc(var(--box-scale-base) * 2);
}

main {
	display: flex;
	flex-direction: column;
}

p {
	margin-block: 0;
	padding-block: calc(var(--box-scale-base) - (1rlh - 1rem) / 2);
	padding-inline: var(--box-scale-base);
}

small {
	font-size: inherit;
}

a {
	color: inherit;
	text-decoration-color: var(--color-primary-50);
	text-decoration-thickness: calc(1rem * (1 / 16));
	text-underline-offset: calc(1rem * (7 / 16));
}

:is(address, nav) > ul > li > a {
	display: inline-block;
	padding-block: calc(var(--box-scale-base) - (1rlh - 1rem) / 2);
	padding-inline: var(--box-scale-base);
}

article {
	display: flex;
	flex-direction: column;
}

h1, h2 {
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	margin-block: 0;
	padding-block: calc(var(--box-scale-base) - (1rlh - 1rem) / 2);
	padding-inline: var(--box-scale-base);
}

ul {
	display: flex;
	flex-direction: column;
	list-style-type: none;
	margin-block: 0;
	padding-inline-start: 0;
}

footer > :is(address, nav) > ul {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
}

picture, img {
	display: block;
	inline-size: 100%;
}

figure > picture {
	padding-block: var(--box-scale-base);
}

img {
	object-fit: cover;
	block-size: auto;
}

@media (prefers-color-scheme: dark) {
	img {
		filter: brightness(0.9);
	}
}

math {
	font-family: "IBM Plex Math";
}

math[display="block"] {
	padding-block: var(--box-scale-base);
	padding-inline: 1rem;
}