@import url("https://use.typekit.net/hfp5txt.css");

html{
  margin-top: -5%;
}

body{
  background-image: url("coverbg.jpg"), url("bg2.jpg");
  background-position: top center, top center;
  background-size: contain, cover;
  background-repeat: no-repeat, repeat;
  background-attachment: scroll, fixed;
  background-color: black;
  font-family: "Futura-PT", sans-serif;
  width: 100%;
  margin: auto;
}

.page-wrapper{
  display: grid;
  grid-template: auto auto / 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 17px;
  width: auto;
}

.intro{
  grid-area: 1 / 1 / 2 / 6;
  display: grid;
  grid-template: auto auto / 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 17px;
  width: auto;
  padding-top: 80px;
  margin: 50px 50px 0px;
}

.intro header{
  grid-area: 1 / 1 / 2 / 6;
  display: grid;
  grid-template: 1fr auto / 1fr 1fr;
}

.intro header h1{
  grid-area: 1 / 2 / 2 / 3;
  width: 25vw;
  height: 25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("yinyang.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 10%;
  margin-top: 10%;
  margin-bottom: 11.5%;
  font-size: 3vw;
  font-weight: 300;
  text-transform: uppercase;
  color: #a37c4f;
}

.intro header h2{
  grid-area: 2 / 1 / 3 / 3;
  text-align: center;
  font-size: 3vw;
  font-weight: 400;
  text-transform: uppercase;
}

.intro header h2 abbr{
  font-weight: 600;
  font-size: 4vw;
  text-decoration: none;
  text-shadow: 1px 0px 3px #fff;
}

.intro header h2::after{
  content: " ";
  display: block;
  margin: 0px auto 3%;
  background-image: url("down.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 5vh;
  width:5vw;
}

.summary{
  grid-area: 2 / 1 / 3 / 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: black;
  color: white;
  width: 98.9vw;
  margin: 0px 0px 0px -50px;
  height: minmax(100px, 200px);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 3px;
}

.summary p{
  max-width: 900px;
}

.preamble{
  grid-area: 3 / 1 / 4 / 2;
  background-color: white;
  padding: 0px 25px;
  position: relative;
  height: 0px;
  overflow-y: visible;
}

.preamble h3{
  padding-top: 25px;
}

#zen-supporting::before{
  content: " ";
  grid-area: 1 / 1 / 3 / 2;
  display: block;
  background-color: white;
  height: 80%;
  min-width: 10vw;
}

#zen-supporting{
  grid-area: 2 / 1 / 3 / 6;
  display: grid;
  grid-template: auto auto auto auto auto / 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 17px;
  margin: 0px 50px 0px;
}

#zen-supporting p:last-of-type{
  padding-bottom: 70px;
}

.explanation{
  grid-area: 1 / 2 / 2 / 3;
  background-color: white;
  padding: 25px;
  min-width: 10vw;
}

.participation{
  grid-area: 1 / 3 / 3 / 4;
  background-color: white;
  padding: 25px 25px 0px;
  min-width: 10vw;
}

.participation p:last-of-type{
  margin-bottom:-30px;
}

.benefits{
  grid-area: 3 / 3 / 4 / 4;
  background-color: white;
  padding: 0px 25px 25px;
  min-width: 10vw;
}

.requirements{
  grid-area: 1 / 4 / 5 / 5;
  background-color: white;
  padding: 25px;
  min-width: 10vw;
}

footer{
  grid-area: 5 / 1 / 6 / 2;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  z-index: 1;
  margin-bottom: 30px;
  padding: 0px 10px;
}

footer a{
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
}

.sidebar{
  grid-area: 2 / 5 / 3 / 6;
  background-image: linear-gradient(rgba(255, 187, 187, 0.75), rgba(212, 152, 86, 0.75));
  padding: 25px;
}

.sidebar a, .sidebar abbr{
  color: black;
  text-decoration: none;
}

.sidebar ul li{
  list-style: none;
  margin-left: -40px;
  font-weight: 300;
}

.sidebar ul li a:first-of-type{
  font-weight: 400;
  font-style: italic;
}

.sidebar ul li a:last-of-type{
  text-transform: uppercase;
  font-size: 13px;
}

a, abbr{
  color: #c08b86;
}

abbr{
  font-weight: 600;
  text-decoration: none;
}

a{
  text-decoration: underline;
}

a:hover{
  text-decoration: none;
  color: #a37c4f;
}

h3{
  text-transform: uppercase;
}


@media only screen and (max-width: 1300px){
  .page-wrapper{
    grid-gap:0px;
  }

  .intro{
      margin: 50px 0px 0px;
  }

  .summary{
    width: 100vw;
    margin: 0px;
    height: minmax(100px, 200px);
  }

  .preamble{
    grid-area: 2 / 1 / 3 / 5;
    padding: 0px 100px;
    height: 0px;
    margin: 200px 0px 0px;
  }

  .preamble h3{
    margin-top: 80px;
  }

  #zen-supporting::before{
    content: " ";
    grid-area: 2 / 1 / 3 / 5;
    display: block;
    height: 320px;
  }

  #zen-supporting{
    grid-area: 2 / 1 / 3 / 5;
    display: block;
    background: white;
    margin: 0px;
  }

  #zen-supporting p:last-of-type{
    padding-bottom: 0px;
  }

.explanation, .participation, .benefits, .requirements{
  padding: 20px 100px;
  margin-bottom: 20px;
}

.participation p:last-of-type{
  margin-bottom:0px;
}

  .sidebar{
    grid-area: 2 / 5 / 3 / 6;
    display: block;
  }
}