@import url('https://fonts.googleapis.com/css2?family=Vend+Sans:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

* { 	
  box-sizing: border-box;
}




.grid-container {
  display: grid;
  grid-template-areas:
    'header'
    'menu'
    'main'
    'aside'
    'footer';

   
  
  gap: 10px;  
}




.aside {
  grid-area: aside;
  background-color:#eeae15;
  border-radius: 20px;
  padding: 10%;
  color:white;

}


.header {
  grid-area: header;
  text-align: center;
  color: #ffffff;
 
}

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



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

.menu li {	
  padding: 6%;
  margin-bottom: 1%;
  background-color:	#fb7e29;
  color: #ffffff;
  border-radius: 20px;
  text-decoration:none;
  
}

.menu a {
   text-decoration:none;
}

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

.aside a {
  color:white;
  text-decoration:none;

}









ul{
    margin:3%;
    padding: 3%;
}
ol{
  margin:3%;
  padding: 3%;
}



body{
	font-size: 25px;
  background-color: #04021b;
	
	font-family: "Vend Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
  color: white;
		
	
}


h1{

	text-align: center;
	font-size:70px;
	color:#ffffff;
	border-bottom-color:#fff7f7;
	border-bottom-style:solid;
	border-bottom-width: 3%;
	
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
 
}

h2{ /*seiten überschriften*/
  font-size:50px;
  text-decoration-line:underline;
  text-underline-position:below;
  text-decoration-color:rgb(255, 255, 255);
	padding: 3%;
    margin:3%;

}

h3{ /*zwischen überschriften*/
  padding: 3%;
  font-size:30px;
    margin:3%;
}

h4{ /*Planeten*/
  font-style:bold;
    margin:3%;
}

h5{ /*Planet Gruppen*/
  font-style:bold;
  text-decoration-line:underline;
  font-size:30px;
  text-underline-position:below;
  text-decoration-color:rgb(255, 255, 255);
	padding: 3%;
  margin:3%;
}

p{
  padding-left: 3%;
  padding-right:3%;
  margin:3%;
}
	
img{
  padding-left:3%;
  padding-right:3%;
  margin:3%;
}

iframe{
  padding-left:3%;
  padding-right:3%;
  margin:3%;
}
div#CC{
  font-size: 15px;
  padding-right:3%;

  
}

#Impressum {
  background-color:#eeae15;
  padding: 3%;
  border-radius: 20px;
  margin: 2%;
}
#Impressum2 {
  background-color:#fb7e29;
  padding: 3%;
  border-radius: 20px;
  margin: 2%;
}









@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 5;}
  .aside {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;}
  .aside {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}