:root {
	--light: #e1e1e0;
	--dark: #303536;
	--key1: #e06775;
	--key2: #d89646;
	--key3: #b58cba;
}
 
 
body {
	font-family: system-ui, sans-serif;
	font-size: 100%;
	line-height: 150%;
	background-color: var(--light);
	color: var(--key1);
}

/* header block -------------------------------------------- */

h1 {
	margin: 4em 2em;
}

h1 span:nth-child(1) {
	font-size: 200%;
}
h1 span:nth-child(2) {
	font-style: italic;
	position: relative;
	top: -1em;
}

ul.topnav {
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}



.topnav a {
	
}
.topnav a:link {color: var(--key2);}
.topnav a:visited {color: var(--key1);}
.topnav a:hover {color: var(--key3);}
.topnav a:active {}

/* main grid layout --------------------------------------- */
main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 3em;
}


/* media queries ------------------------------------------ */
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--dark);
		color: var(--key1);
	}
}