:root {
	--light:#EBF1E4 ;
	--dark:#1D140C ;
	--khaki:#464235;
	--mutedolive:#9FBC7B;
	--dustyolive:#709176;

}


body {
	font-family: system-ui, sans-serif;
	font-size: 100%;
	line-height: 150%;
	background-color: var(--light);
	color:var(--dark);
}

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

@keyframes arrive {

	from {
		opacity: 0;
		top: 4em;
	}
	to {
		opacity: 1;
		top: 0;
	}
}
h1 {
	margin: 4em 2em;
	
}
h1 {
	margin: 4em auto;
	
}
h1 span {
	display: inline-block;
	position: relative;
	}
h1 span:nth-child(1) {
	/*transform: scale(4);*/
	font-size: 400%;
	animation: arrive 1s both; 
}
h1 span:nth-child(2) {
	font-style: italic;
    transform: translate(1em, -2em);
	animation: arrive 1s 1s both;
}
h1 span:nth-child(3) {
	transform: translate(1.5em, -.5em); 
	animation: arrive .5s 1.5s both;
}
h1 span:nth-child(4) {
	transform: translate(2em, -.5em);
    animation: arrive .5s 2s both;	
}
h1 span:nth-child(5) {
	transform: translate(3em, 1em); 
	animation: arrive .5s 2s both;
}

.topnav a {
	transition: text-shadow 1s;
	display:block;
	
}
.topnav a:link {color: var(--khaki);}
.topnav a:visited {color: var(--dustyolive);}
.topnav a:hover {color: var(--mutedolive); text-shadow: 2px 2px 1em var(--light);} 
.topnav a:active {}

/*
li::before {
	content: "@" ;*/
	
}

/* main grid -----------------------------*/
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(--light);
	}

}