@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Science+Gothic:wght@100..900&display=swap');

body {
	
		
		background-color: #cacccb; 
		
	
	
	
}

.menu {
	font-family: "Audiowide", sans-serif;
	  font-weight: 400;
	  font-style: normal;	
	
}


h1{
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: black;
  text-align: center;
}
p {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: black;
  text-align: center;
}
	
h3{
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: black;
  text-align: center;
  color: #FF8C00;
}
a{
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
  
}
h2 {
		color: black;
	
}
.header {
	border: 3px solid black;
					background-color: #cacccb;
					padding: 5px;
					margin: 5px;
					border-style: solid;
					text-align: center;
	
}
.DS {
					border: 3px solid black;
					background-color: #cacccb;
					padding: 5px;
					margin: 5px;
					border-style: solid;
}

.facts {
					border: 3px;
					background-color: #cacccb;
					padding: 5px;
					margin: 5px;
					border-style: solid;
}

#Bild {
	border: 5px #cacccb;
					
	border-style: ridge;
}
				
body {
	background-color: #707070;
				
}




.menu {
		border: 3px solid black;
					background-color: #cacccb;
					padding: 5px;
					margin: 5px;
					border-style: solid;
	
}

.menu li {
	background-color: grey;
	margin: 10px;
	border: 1px solid black;
	border-style: solid;
	color: white;
	
	
}

.menu li:hover {
	background-color: white;
	color: black;
	
}


.facts {
	border: 3px solid black;
					background-color: #cacccb;
					padding: 5px;
					margin: 5px;
					border-style: solid;
	
	
}
.footer {
		text-align: center;
		background-color: #cacccb;
		border: 3px black;
		border-style: solid;
		font-family: "Audiowide", sans-serif;
		  font-weight: 400;
		  font-style: normal;	
}


.facts {
		font-family: "Audiowide", sans-serif;
		  font-weight: 400;
		  font-style: normal;
	
}
.content h3{
	color: black;
	
}
.grid-container {
  display: grid;
  grid-template-areas:
  'header'
  'menu'
  'content'
  'facts'
  'footer';
  background-color: grey;
  gap: 10px;
}
@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 5;}
  .facts {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}

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



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