@import url('https://fonts.googleapis.com/css2?family=Borel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single+Ink:wght@100..900&family=Borel&display=swap');


* { 
  box-sizing: border-box;
}

aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: rgb(255, 255, 255);
}






body {
	background-color: #ffffff; 
}

main {
  margin: 20px;
  background-color: rgb(255, 255, 255);
}

h1 {
  font-family: "Borel", cursive;
  font-weight: 400;
  font-style: normal;
}



.grid-container {
  display: grid;
  grid-template-areas:
  'header'
  'menu'
  'main'
  'facts'
  'footer'
  'aside';
  background-color: rgb(240, 240, 240);
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: rgb(127, 170, 235);
  text-align: center;
  color: #ffffff;
}

.header > h1 {
  font-size: 40px;
}

.menu {
  grid-area: menu;
}


.menu ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #c0e3f0;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}


.facts {
  grid-area: facts;
  border: 1px solid #afb8bb;
  background-color: beige;
  padding: 10px;
}

.facts > h2 {
  font-size: 20px;
}


.footer {
  grid-area: footer;
  background-color: #a5c7d3;
  color: #ffffff;
  text-align: center;
}

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}

/* Desktop Ansicht - Area 2 - 3spaltig */

@media (min-width: 768px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}