:root {
	color-scheme: dark light;
	scroll-behavior: smooth;

	--primary: hsl(211, 26%, 39%);
	--secondary: hsl(209, 28%, 29%);
	--secondary-hover: hsl(209, 28%, 19%);
	--text-primary: hsl(0, 0%, 100%);
	--secondary-text: hsl(211, 26%, 39%);
}

body {
	font-family: "Lato", -apple-system, Roboto, "Helvetica Neue", Arial,
		"Noto Sans", sans-serif;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	background: var(--secondary);
	color: var(--text-primary);
}

body.light {
	--primary: hsl(220, 27%, 98%);
	--secondary: hsl(0, 0%, 100%);
	--secondary-hover: hsl(0, 0%, 80%);
	--text-primary: hsl(220, 17%, 32%);
	--secondary-text: hsl(211, 26%, 39%);
}

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

svg {
	vertical-align: middle;
	font-size: 0.75em;
}

section:not(section section) {
	background: var(--secondary);
	padding: 10rem 0;
}

section:nth-child(2n):not(section section) {
	background: var(--primary);
}

section > svg {
	color: var(--primary);
}

section:nth-child(2n) > svg {
	color: var(--secondary);
}

section > :is(h1, h2) {
	font-size: 2.5em;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

h1 {
	margin: 0;
}

img {
	max-width: 100%;
}