@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;
}

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

.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 {
  background: blue;
}

/* 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)
	}
}