:root {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: hsl(240, 5%, 10%);
		--card-background-color: hsl(240, 5%, 20%);
		--text-color: hsl(240, 0%, 90%);
		--heading-color: hsl(240, 20%, 70%);
		--header-color: hsl(240, 18%, 17%);
		--footer-color: hsl(240, 15%, 15%);
		--link-color: lightblue;
	}
}


@media (prefers-color-scheme: light) {
	:root {
		--background-color: hsl(240, 10%, 90%);
		--card-background-color: hsl(240, 10%, 80%);
		--text-color: black;
		--heading-color: hsl(240, 20%, 25%);
		--header-color: hsl(240, 40%, 85%);
		--footer-color: hsl(240, 50%, 80%);
		--link-color: darkblue;
	}
}

html,
body {
	font-family: Arial, sans;
	font-weight: 400;
	background: var(--background-color);
	color: var(--text-color);
}

header {
	background: var(--header-color);
	color: var(--heading-color);
}

footer {
	background: var(--footer-color);
	color: var(--heading-color);
}

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

h1,
h2 {
	color: var(--heading-color);
}

/*
nav {
	background: lightgray;
	color: black;
}

.titleOnly h2 {
	background: #FFFFFF9f;
	color: black;
}

aside {
	border-left: solid 1px darkred;
}
*/