/*stylesheet "index.css"*/
     @media all{
/*============================================================*/

 body {
   display: grid;
  grid-template-columns: auto;	
		grid-template-rows: auto auto 2fr auto;
background-color: #808000;
   color: #FFFFca;
	font-family: sans-serif;
	 margin: 0;    /*Mit margin: 0 auto wird die Seite zentriert.*/
}
         #kopfbereich{
            display: flex;
    flex-flow: row-reverse wrap;
  align-content: center;
 justify-items: center;
    justify-content: space-around;
 margin-top: 4em;
 margin-right: 4em;
 margin-bottom:0em;
 margin-left: 4em;
 	padding: 1em;
 	background-color: #FFFFca;
	 color:  #808000;
border-radius: 28px;
      border: 2px solid #eee;
  	
}
header,footer {
	grid-column: 1 / -1;
}

 h1{	
 border: 2px solid  #808000;
       border-radius: 28px;
        font-size: 2,5em;
text-shadow: 2px 2px 2px white, 5px 5px 10px black;
 	box-shadow: inset -3px -3px 10px #ccc;
  text-align: center;

}
 main{
 justify-content: space-around;
  align-content: center;
 justify-items: center;
 	background-color: #FFFFca;
	 color:  #808000;
border-radius: 28px;
      border: 2px solid #eee;
	  margin-top: 0em;
 margin-right: 4em;
 margin-bottom:2em;
 margin-left: 4em;

}

/*   flexible Breiten für Bilder  */
img {
  width: 60%;
   max-width: 400px;
  height: auto;
}

 img {
       align-self: center;
text-align: center;
         }

        p{
 align-self: center;
text-align: center;
padding: 1em;
margin: 2em;
}

       @media all and (min-width: 30em) {
	.flex-container {
		flex-direction: row;
	}
}

  #flex-container {
  display: flex;
    flex-flow: row-reverse wrap;
  align-content: center;
 justify-items: center;
}



    aside{
    flex-item: auto;	
 align-content: center;
  text-align: center;
 }

 #one {
 align-content: flex-start;   	
 box-shadow: 10px 0 10px #808000 inset;
	 text-align: center;
	 height: 24em;
	 padding: 2em;
}
  #two {
   align-content: center;
  box-shadow: 20px 0 20px #808000 inset;
	 text-align: center;
	   height: 24em;
	padding-top: 6em;
  padding-left: 2em;
  padding-right: 2em; 	
}
 #tree {
   align-content: flex-end;
 box-shadow: 10px 0 10px #808000 inset;
	 text-align: center;
	  height: 24em;
	    	padding: 2em;
	 }


	aside {
		/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		flex: 1 auto;
	/*	order: 4; */
	}
}
/* Large screens */

@media all and (min-width: 50em) {
	aside {
		/* Der Article wird 3x so breit wie die beiden asides! */
		
	/*	order: 3;  */
		flex: 4 1 0;
	}
	
	aside {
		flex: 1 1 0;
	
		align-self: center;
		height: 200px;
	}
}


/*=====================================================================================*/
  }/* stehen lassen Ende Media*/