/*stylesheet "I-Wurf.css"*/
	
     @media all{
/*==============================================================================*/

 body {
	display: grid;
	 display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "head head head "
                       "nav  nav nav"
                       "main main main"
                       "foot foot foot";
background-color: #808000;
   color: #FFFFca;
	font-family: sans-serif;
	 margin: 0;    /*Mit margin: 0 auto wird die Seite zentriert.*/
}
         #kopfbereich{
        display: grid;
              grid-template-columns: 1fr 3fr 1fr;	
 margin-top: 4em;
 margin-right: 4em;
 margin-bottom:0em;
 margin-left: 4em;
 	padding: 1em;
 	grid: 1em;
}
haeder,
main,
footer{
background-color: #FFFFca;
	 color:  #808000;
border-radius: 28px;
      border: 2px solid #eee;
       text-align: center;
        }
 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;
  margin-top: 5em;
  margin-bottom: 3em;
  margin-left:3em;
    margin-right: 3em;
   	padding: 2em;
}

         img{
         column-gap:10em;
          align-self: center;
text-align: center;
         }
         
        p{
 align-self: center;
text-align: center;
padding: 1em;
margin: 1em;
}

main{
display: grid;
grid-template-columns: auto auto auto;
 grid-template-rows: auto auto auto;
 padding-top: 3em;
	  margin-top: 0em;
 margin-right: 4em;
 margin-bottom:4em;
 margin-left: 4em;
}
  
   * große Viewports */
@media all and (min-width: 30em) {
.flex-container {
    flex-direction: row;
  }
}

  figure {
	width: 30em;
	border: transparent;
}
.flex-item {
	flex: auto;
	margin: .5em;
	padding: .5em;
}

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

  .mittig {
  align-content: center;
}



    aside{  	
 align-content: center;
  text-align: center;
 }


.start  {
  align-content: flex-start;
}

.mittig {
  align-content: center;
}

.ende {
  align-content: flex-end;
}


/*=====================================================================================*/

    }/* stehen lassen Ende Media*/