
/* mobile version */
@media screen and (min-width: 200px) {
  body{
  background:url(images/bamboo.jpg);
  margin: 0px;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Lucida Calligraphy";
  }
.page-wrapper {

  }
  section {
  grid-column: 1/end;
  grid-row:1/2;
  }
  .main{
  grid-column: span 5;
  grid-row:2/5;
  }
  aside{
  grid-column: 1/end;
  grid-row: 5/end;
  background: url(images/sidebar.jpg);
  background-repeat: no-repeat;
  margin-left: 10px;
  margin-top: 10px;
  }
  header{
  background: url(images/zengarden.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  width:100%;
  height:200px;
  padding: 10px;
  }
  h1{
  font-size: 2.5em;
  text-align: center;
  color: #eaf9b6;
  }
  h2{
  font-size: 2em;
  text-align: center;
  color: #d7e5a5;
  }
  .summary{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .preamble{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .explanation{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 0px 10px;
  text-align: center;
  }
  .participation{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .benefits{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .requirements{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .wrapper{
  padding-left: 5px;
  padding-right: 5px;
  color: #abc452;
  }
  footer{
  margin-left: 10px;
  }
  a:link{
  color: #5ee087;
  }
  a:visited{
  color: #258aa3;
  }
  a:active{
  color: #255b36;
  }
}
/* Small screen */
@media screen and (min-width: 640px) {
  body{
    background:url(images/bamboo.jpg);
    margin: 0px;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .page-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
    grid-template-rows: 0.5fr 1fr 1fr 0.5fr 1fr;
  }
  section {

  }
  .main{
  grid-column: span 3;
  grid-row:2/5;
  }
  aside{
  grid-column: 4/end;
  grid-row: 2/end;
  background: url(images/sidebar.jpg);
  background-repeat: no-repeat;
  margin-left: 5px;
  margin-top: 0px;
  }
  }
  header{
  background: url(images/zengarden.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  width:100%;
  height:200px;
  padding: 10px;
  grid-column: 1/end;
  grid-row:1/2;
  }
  h1{
  font-size: 2.5em;
  text-align: center;
  color: #eaf9b6;
  }
  h2{
  font-size: 2em;
  text-align: center;
  color: #d7e5a5;
  }
  .summary{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  max-width: 900px;
  min-width: 250px;
  }
  .preamble{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  max-width: 900px;
  min-width: 250px;
  }
  .explanation{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 0px 10px;
  text-align: center;
  max-width: 900px;
  min-width: 250px;
  }
  .participation{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  max-width: 900px;
  min-width: 250px;
  }
  .benefits{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  max-width: 900px;
  min-width: 250px;
  }
  .requirements{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  max-width: 900px;
  min-width: 250px;
  }
  .wrapper{
  padding-left: 5px;
  padding-right: 5px;
  color: #abc452;
  }
  footer{
  margin-left: 10px;
  }
  p{
  text-align: center;
  max-width: 800px;
  }
  a:link{
  color: #5ee087;
  }
  a:visited{
  color: #258aa3;
  }
  a:hover{
  color: #db0024;
  }
  a:active{
  color: #255b36;
  }
}
/* large */
@media screen and (min-width: 948px){
  body{
  background:url(images/bamboo.jpg);
  margin-right: 0px;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Lucida Calligraphy";
  }
  .page-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 2fr 2fr;
    grid-template-rows: 0.5fr 1fr 1fr 0.5fr 1fr;
  }
  section {
  grid-column: 1/end;
  grid-row:1/2;
  }
  .main{
  grid-column: span 5;
  grid-row:2/5;
  }
  aside{
  grid-column: 1/end;
  grid-row: 5/end;
  background: url(images/sidebar.jpg);
  background-repeat: no-repeat;
  margin-left: 10px;
  margin-top: 10px;
  }
  header{
  background: url(images/zengarden.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  width:100%;
  height:250px;
  padding: 10px;
  }
  h1{
  font-size: 2.5em;
  text-align: center;
  color: #eaf9b6;
  }
  h2{
  font-size: 2em;
  text-align: center;
  color: #d7e5a5;
  }
  .summary{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .preamble{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .explanation{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 0px 10px;
  text-align: center;
  }
  .participation{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .benefits{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .requirements{
  background-color: #eaf9b6;
  opacity: 0.7;
  padding: 10px;
  margin: 10px;
  text-align: center;
  }
  .wrapper{
  padding-left: 5px;
  padding-right: 5px;
  color: #abc452;
  }
  footer{
  margin-left: 10px;
  }
  a:link{
  color: #5ee087;
  }
  a:visited{
  color: #258aa3;
  }
  a:active{
  color: #255b36;
  }
}
