:root {
	--color-background: #fff;
	--color-foreground-primary: #222;
	--color-foreground-secondary: #666;
	--color-foreground-tertiary: #999;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #000;
		--color-foreground-primary: #eee;
		--color-foreground-secondary: #999;
		--color-foreground-tertiary: #777;
	}
}

body {
	margin: 8rem 10rem;
	text-align: left;
	background-color: var(--color-background);
	color: var(--color-foreground-tertiary);
	font-family: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 1.25rem;
	line-height: 1.6em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	direction: ltr;
}

#container {
	max-width: 40rem;
}

a, a:link, a:visited, a:hover {
	color: inherit;
	text-decoration: underline;
}

h1 {
	font-size: 4rem;
	line-height: 1.6em;
	color: var(--color-foreground-primary);
	margin: 0;
}

h2 {
	font-size: 2rem;
	font-weight: normal;
	line-height: 1.6em;
	color: var(--color-foreground-secondary);
	margin: .75em 0 1.5em;
}

address {
	font-style: normal;
	margin: 4em 0 8em;
}

@media (max-width: 50rem) {
	body {
		margin: 5rem;
	}
}

@media (max-width: 38rem) {
	body {
		margin: 3rem 2rem;
		font-size: 1rem;
	}

	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 1.75rem;
	}
}