body{
background-color: #2360F1;


    font-family: 'Inconsolata', monospace;

    /*! font-family: 'Dosis', sans-serif; */

    /*! font-family: 'Karla', sans-serif; */
  background:
linear-gradient(115deg, transparent 75%, rgba(107,133,83,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(107,133,83,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(107,133,83,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(107,133,83,.8) 75%) 7px -15px,
#36c;
background-size: 15px 30px;

}
/*Blau #2360F1
Gelb #B4981B
Grün #6B8553*/
.container{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
  "header header header banner"

    "augen augen augen augen"
    ". film film ."
    "story story story story"
  "stoners stoners stoners stoners"

  "projekt projekt projekt zukunft"
  "footer footer footer footer";
  max-width: 1080px;
  margin: auto;
  grid-gap: 2em 0em;
}


header{
  font-family: 'Dosis', sans-serif;
  grid-area: header;
  background-color: #6B8553;
  text-align: center;
  /*! margin: 0 -22em 0 -1em; */
  padding: 3em;
}
.person{
  max-width: 400px;
  height: auto;
  box-shadow: 30px 0px 52px -10px #B4981B;
}

#banner{
  display: flex;
  grid-area: banner;
  background-image: url("../img/banner.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0em;
  background-color: #6B8553;
}

#augen{
  grid-area: augen;
  display: flex;
  /*! text-align: justify; */
  /*! flex-wrap: wrap; */
  /*! text-align: center; */
   /*! align-items: center; */
   /*! padding: 2em; */
   margin: -1em;
  /*! background-color: #B4981B; */
  border: brown;
}
#augen img{
  width: 100%;
  height: auto;
  margin: auto;
  text-align: center;
  /*! padding: 5em; */
}

#zusammenfassung{
  grid-area: story;
}
#stoners{
  display: flex;
  grid-area: stoners;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-direction: row-reverse;
  text-align: justify;
  align-items: center;
  padding: 3em;
}
#stoners h2{
  box-shadow: -1em 10px 29px -11px #B4981B;
  margin: 0px 0em;
  justify-content: center;

}
#film{
  /*! display: flex; */
grid-area: film;
background-color: #B4981B;
  padding: 1em;
}
#projekt{
    margin: 1em;

  grid-area: projekt;
}
#projekt a{
  color: #B4981B;
}


#zukunft{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  grid-area: zukunft;
  justify-content: start;
  background-color: #B4981B;
  padding: 1em;
  /*! margin: 0 -9px -3em 0em; */
  text-align: justify;
}
#zukunft img{
  width: 100%;
  height: auto;
  /*! transform: rotate(89deg); */
  }

footer{

}
@media only screen and (max-width: 700px) {
  .container{
    grid-auto-columns: auto;
    grid-template-areas:
      "header"
      "augen"
      "film"
      "story"
      "stoners"
      "projekt"
      "zukunft"
      "footer";
    grid-template-columns: minmax(250px, 1fr);
    max-width: 99%;
  }
  .person{
    max-width: 99%;
  }
}