@import url('https://fonts.googleapis.com/css?family=Arapey|Montserrat:400,500');

/****** entire thing *********/

body {
  width: 100%;
  height: 100%;
  /* background-color: #748f70; */
  /* position: relative; */
  /* background-image: url(http://dma-upd.org/wp-content/uploads/zen-sand-garden-relaxation-southern-california-pain-institute_1839255-840x450.jpg); */
  /*   background-size: cover; */
  /*   background-repeat: no-repeat;
  background-position: center; */
  /* grid-column-gap: 50px; */
  /* position: relative; */
}

 .page-wrapper {
  display: grid;
  grid-template-columns: 1fr ;
  grid-template-rows: 1fr 10% 1fr ;
  position: relative;
  padding: 0% 12% 0% 12%;
}

/****** header *********/

 .intro {
  background-image: url('opacitylow.jpg');
  background-size: cover;
  /* background-position: center; */
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  font-family: 'Arapey', serif;
}

header {
  grid-column: 2 / span 2;
 }

.summary {
  grid-column: 2 / span 2;
  text-align: justify;
  color:black;
  padding:0% 4% 0% 28%;
  text-align: block;
  font-size: 1em;
  /* background-color: white; */
  /* opacity: 0.3; */
}

/* p {
background-color: white;
opacity: 0.7;

} */

.preamble {
  grid-column: 1 / span 3;
  grid-row: 3 / span 1;
  color: white;
  background-color: #748f70;
  height: 100%;
  padding: 0% 16% 0% 16%;
  text-align: justify;
}

h1 {
  margin-top: .5em;
  font-size: 5em;
  color: black;
  text-align: center;
  padding: 18% 4% 0% 0%;
}


h2 {
  color:black;
  font-size: 2em;
  text-align: end;
  padding:0% 4% 0% 28%;
}

/****** main content *********/

p {
  font-family: 'Montserrat', serif;
  /* margin-top: -1%; */
  font-size: .90em;
  line-height: 1.5;
  /* margin-top: -2%; */
  /* color: black; */
}

a {
  /* color: black; */
  text-decoration: underline;
}

h3 {
  font-size: 1.5em;
}

section {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
  text-align: end;
  /* background-color: yellow; */
}

aside {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
  /* background-color: green; */
}

main {
 grid-column: 1 / span 2;
 grid-row: 3 / span 1 ;
 /* background-color: blue; */
}

.wrapper{
  /* background-color: lightblue; */
}


.zen-resources  {
  grid-column: 1 / span 2;
  grid-row: 4 / span 1;
  position: absolute;
  top: 0px;
  background-color:#748f70;
  color: white;
  width: 100%;
}

.zen-resources a {
  color: white;
}



.design-selection {
  display: flex;
  flex-wrap: wrap;
  /* margin-top: -20%; */
}

.design-selection {

  font-family: 'Arapey', serif;
  font-size: 1em;
  text-decoration: none;
}

li {
  padding: 10%;
  /* background: #3f4936; */
  height: 25%;
  width: 30%;
}

.design-selection a {
  color:#3f4936 ;
}

section, .main-supporting {
  /* background-color: #c6dabf ; */
  /* opacity: 0.5; */
  color: Black;
}



 .design-archives, li {
  display: inline-block;
  font-size: 1em;
  color: White;
  padding: .5em;
  text-align: center;

  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-around; */
}

 .design-archives a {
  font-family: 'Arapey', serif;
  font-size: 1em;
  color:#3f4936;
  padding: .5em;
  /* border: 2px solid black; */
  /* background-color: #3f4936; */
  text-decoration: none;
}

 /* a:hover {
  font-family: 'Arapey', serif;
  font-size: 1em;
  color: White;
  padding: .5em;
  text-decoration: none;
  background-color:#7B8572;
} */

/* a:hover {
  font-family: 'Arapey', serif;
  font-size: 1em;
  color: White;
  padding: .5em;
  text-decoration: none;
  background-color:#8F9986;
} */



/****** footer *********/


/****** override *********/

@media only screen and (max-width: 800px) {

  .page-wrapper {
   padding: 0% 7% 0% 7%;
 }

 header {
   padding:0% 2% 0% 2%;
   text-align: center;
  }

 h1 {
  padding:0% 2% 0% 2%;
   text-align: center;
 }

 h2 {
  padding:0% 2% 0% 2%;
   text-align: center;
 }

 .intro {
  text-align: center;
 }

 .summary {
   color:black;
   padding:0% 2% 0% 2%;
   text-align: justify;
}

.preamble {
  padding:0% 2% 0% 2%;
  text-align: justify;
}

a {
  text-decoration: underline;
}

.design-selection {
  /* margin-top: -80%; */
}



}

@media only screen and (max-width: 650px) {

  .design-selection {
    /* margin-top: -160%; */
  }

}



@media only screen and (max-width: 500px) {

  .page-wrapper {
   padding: 0% 1% 0% 1%;
 }

   header {
     padding:0% 1% 0% 1%;
     text-align: center;
    }

    h1 {
     padding:0% 1% 0% 1%;
      text-align: center;
    }

    h2 {
     padding:0% 1% 0% 1%;
      text-align: center;
    }


   .intro {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
   }

   .summary {
     color:black;
     padding:0% 2% 0% 2%;
     text-align: justify;
  }

  .preamble {
    padding:0% 2% 0% 2%;
    text-align: justify;
  }

  a {
      text-decoration: underline;
  }

  .design-selection {
    /* margin-top: -320%; */
  }

}

@media only screen and (max-width: 400px) {

  .design-selection {
    /* margin-top: -340%; */
  }

}