:root {
	--color-background: #bad2e0;
	--color-background-header: #d4abee;
	--color-background-main: #efc2e7;
	--color-text: #211237;
	--color-link: #162fb6;
	--color-shadow: #0f5a87;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #38235e;
		--color-background-header: #5c5185;
		--color-background-main: #69265c;
		--color-text: #e9ddf8;
		--color-link: #96a9e2;
		--color-shadow: #200256;
	}
}

* {
	font-family: "sans-serif" sans;
	color: var(--color-text);
}

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

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

body {
	background-color: var(--color-background);
	display: flex;
	flex-direction: column;
	align-items: center;
}

header {
	max-width: 30rem;
	padding: 1rem;
	margin: 0 0 2rem 0;

	background-color: var(--color-background-header);
	box-shadow: 5px 5px var(--color-shadow);

	text-align: center;
}

header h1 {
	font-weight: 100;
	margin: 1rem 0 0 0;
}

header .subtitle {
	margin: 0;
	text-decoration: underline;
}

main {
	max-width: 50rem;
	padding: 1rem;

	background-color: var(--color-background-main);
	box-shadow: 5px 5px var(--color-shadow);
}

footer {
	max-width: 30rem;
	margin-top: 2rem;

	text-align: justify;
}

#site-navigation {
	width: 100%;
}

#site-navigation ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	justify-content: space-evenly;
	padding: 0;
}

#site-navigation li {
	padding: 0 1em;
}

.tip {
	font-style: italic;
}

.tip::before {
	content: "TIP: ";
	font-style: normal;
}