@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Playwrite+BE+VLG:wght@100..400&display=swap');

body {
	font-family: "Anonymous Pro", monospace;
    font-weight: 400;
    font-style: normal;
	font-size: 100%;
	line-height: 135%;
	background: #bcd;
	margin: 0;
	background-image: url("background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.grid-main {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(4,auto);
	grid-template-areas:
		"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
		"mn mn mn mn mn mn mn mn mn mn mn mn"
		"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
	gap: 1em;
	padding: 1em;
}

header {
	font-family: "Playwrite BE VLG", cursive;
    font-weight: <weight>;
    font-style: normal;
 	min-height: 30vh ;
	background-color: #deb;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	grid-column: 1 / -1;
	font-size: 3vw;
	animation: arrive 1s forwards;
}

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

main {
	grid-column: 1 / -1;
}

h2 {
	animation: arrive .20s .50s both ease-out ;	
}

.grid-parent {
	background-color: #eee;
	display: grid;
	grid-template-columns: repeat(1, minmax(200px,1fr) );
	gap: 1em;
	padding: 1em;
}

.card {
	background-color: #ba93;
	padding: .5em;
}

footer {
	grid-column: span 12;
}

.navigation {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0; 
  background: green;
  justify-content: space-evenly;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  text-shadow: 2px 2px 1em;
  transform: translate(0, -.3em);
  color: red;
}

/* Media Queries ------------------------*/

@media (min-width: 550px) {  /* mid-width screen */
	.grid-parent, header {
		grid-template-columns: repeat(2, minmax(200px,1fr) );
	}
}

@media (min-width: 850px) {  /*wide screen */
	.grid-parent, header {
		grid-template-columns: repeat(3, minmax(200px,1fr)
	}
}