/*#region grid*/
body {
  display: grid;
  grid-template-columns: 10% 65% 25%;
  grid-template-rows: 10rem auto 5rem;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
	
	margin: 0;
}
header {
  grid-area: header;
  background-color: red;
}
nav {
  grid-area: nav;
  background-color: blue;
}
main {
  grid-area: main;
  background-color: yellow;
}
aside {
  grid-area: aside;
  background-color: green;
}
footer {
  grid-area: footer;
  background-color: purple;
}
/*#endregion*/
/*#region tags*/
header {
  text-align: center;
  color: white;
  text-shadow: black;
  padding-top: 1rem;
  font-size: 2rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
nav {
  color: white;
  padding-top: 5rem;
  position: sticky;
}

nav ul a,
nav ul a:visited {
  color: white;
  list-style: none;
  text-decoration: none;
}

nav ul a li {
  /* margin: 0.5rem; */
  padding: 0.5rem;
}
nav ul a li:hover,
nav ul a li:active {
  background-color: turquoise;
  color: red;
  width: fit-content;
}

main section {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 2rem;
  column-gap: 1rem;
  margin: 2rem;
}
main section article {
  border: 2px solid black;
  padding: 0 1rem;
  max-width: 250px;
  background-color: azure;
  border-radius: 1rem;

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 250px;
}
main section article:hover {
  background-color: rgb(129, 129, 129);
}
aside {
  font-size: 2rem;
  padding-left: 1.5rem;
  text-transform: capitalize;
}
footer {
  color: burlywood;
  text-transform: uppercase;
  padding-top: 2rem;
  text-align: center;
}
/*#endregion*/
/*#region Titels*/
h1,
.h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}
/*#endregion*/