@keyframes fade {
from {opacity: 0;}
 to {opacity: 1;}
}

html * {box-sizing: border-box; animation: fade 5s 0s 1}

body {
	font-family: system-ui,sans-serif;
	font-size: 100%;
	line-height:1.44em;
}

header {
	height: 50vh;
	background-color: rgba(200,190,150,0.9);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

h1 {
	text-align: center;
	transform: translateY(20vh);
    animation-name: fade; 
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: backwards;
}

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

.top-nav li {

}

.top-nav a {
text-decoration: none;
transition: color .25s linear;
}

.top-nav a:link {color: rgba(255,255,255,1);}
.top-nav a:visited {color: rgba(255,255,255,1);}
.top-nav a:hover {color: rgba(0,0,0,1);}
.top-nav a:active {color: rgba(255,255,255,1);}

main {
margin: 1em; 
display: grid;
gap: 2em;
grid-template-columns: 1fr;
}

.transformer {display: inline-block;
transition: transform .5s;
}                    

.transformer:hover {
transform: scale(1.2);
}