: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  */

@keyframes arrive {
	from {
		opacity: 0;
		top: 2em;
	}
	to {
		opacity: 1;
		top: 0;
	}
}

h1 {
	margin: 4em auto;
	width: 600px;
	transform: scale(.6) translate(-25vw, 0);
}
h1 span {
	display: inline-block;
	position: relative;
	opacity: 0;
	}
h1 span:nth-child(1) {
	/*transform: scale(4);*/
	font-size: 400%;
	animation: arrive 1s forwards; 
}
h1 span:nth-child(2) {
	font-style: italic;
    transform: translate(.25em, -2em);
	animation: arrive .25s 1s both ease-out ;
}
h1 span:nth-child(3) {
	transform: translate(-2.5em, -.5em); 
	animation: arrive .25s 1.5s both;
}
h1 span:nth-child(4) {
	transform: translate(8em, -.5em);
    animation: arrive .25s 1.75s both;	
}
h1 span:nth-child(5) {
	transform: translate(6em, 1em);
    animation: arrive .25s 2s both;	
}
ul.topnav {
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.topnav a {
	transition: all .25s ease-out;
	display: block;
}
.topnav a:link {color: var(--key2);}
.topnav a:visited {color: var(--key1);}
.topnav a:hover {color: var(--key3); text-shadow: 2px 2px 1em var(--key1);transform: translate(0, -.3em);} 
.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);
	}
}

@media (min-width: 600px) {
	
	h1 {
		transform: scale(1) translate(0, 0);
	}
	
}