/*Kommentare */

/*Schriftarten*/
@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&display=swap');

/*Selektor*/

h1,h2,h3 {
	font-family:  "Hegarty", system-ui;
	font-weight:  400;
	font-style: normal;
	color: #caf0f8A;
}

body  {
	
	
	  background-color: #fb6f92;
	  
}

div#london {
	background-color: #ffc2d1;
	color: #caf0f8A;
	width: 	60%;
}

.city {
  background-color: #fb6f92;
  color: #caf0f8A;
  width: 66%;
  margin: auto;
  padding: 20px;
  text-align: center;
}

.grid-container {
	display: grid;
	grid-template-areas:
	'header'
	'menu'
	'main'
	'facts'
	'footer';
  background-color: #fb6f92;
  gap: 10px;
}
.header {
  grid-area: header;
  background-color: #ff99ac;
  text-align: center;
  color: #caf0f8A;
  padding-top: 20px;
  padding-bottom: 20px;
}
.header >h1 {
  font-size; 40px;
 
}

.menu {
  grid-area: menu;
}

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

.menu li {
  padding: 25px;
  margin-bottom: 7px;
  background-color: #ff99ac;
  color: #caf0f8A;
}

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

.content {
	grid-area: main;
}

.content > h1 {
	font-size: 30px;
	margin-bottom: 7px;
}

.content > p {
	margin-bottom: 7px;
}

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

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

.facts li {
	margin-bottom: 5px;
}

.footer {
	grid-area: footer;
	background-color: #ffe5ec;
	color:#caf0f8A;
	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; }
}


@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: 3 / span 1; }
  .footer  {grid-area: 4 / span 6; }
}