.page-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* background-image: url('largecircle.png'),url('balance-esoterik-even-9267.jpg'); */
  grid-template-rows: 1fr 1fr;
  background-size: 50%, 70%;
  background-repeat: no-repeat;
  position: relative;
}

ul{
  list-style-type: none;
}
body{
  background: #cecece;
  z-index: -2;
  font-size: 20px;

}

a:link{
color:#3d5e70;
text-decoration: none;
 }

a:hover{
  color: white;
}
abbr{
text-decoration: none;}

h1{
  font-family: balboa-plus-fill, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 70px;
  margin-left: 380px;
  margin-top: 200px;
  color: white;
  letter-spacing: 5px;
}

h2{
  font-family: balboa-plus-fill, sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#3d5e70;
  margin-left: 350px;
}

h3{
  font-family: balboa-plus-fill, sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#3d5e70;
  font-size: 40px;

}





.summary{
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
  color: white;
  font-size: 40px;
  margin-top: 30px;
  line-height: 20px;
  max-width:30vw;
  grid-column: 2;
  padding-left: 35%;
  top: 50%;
  line-height: 40px;
}



.summary::after{
  height:40vw;

     content: "";
     background-image: url("rain.jpg");
     background-size: cover;
     background-repeat:no-repeat;
     opacity: 0.5;
     display: block;
     position: absolute;
     z-index: -3;
     top: 0px;
     left:0px;
     right: 0px;
}

.intro::before {
  width:40vw;
  height: 40vw;
  content: "";
  border-radius: 50%;
  background: #9dc183;
  display: block;
  position: absolute;
  z-index: -1;
  left: 200px;

}

.page-wrapper::before {
  width:70vw;
  height: 40vw;
  content: "";
  background: #3d5e70;
  display: block;
  position: absolute;
  z-index: -1;

}


.intro{
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;

}

.preamble::before {
  width: 55vw;
  height: 50vw;
  content:"";
  border-radius: 0%;
  background-image: url("balance.jpg");
  display: block;
  position: absolute;
  z-index: -2;
  top: 550px;
  left: -3px;
  background-size: contain;
  opacity: 0.5;
  background-repeat: no-repeat;
  padding:none;

}



.preamble{
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
  grid-column: 1;
  margin-top: 250px;
  padding-left: 30px;
  height:auto;
  width: 55vw;
  line-height: 40px;
}

.preamble::after{
  width:50vw;
  height: 3%;
  content: "";
  background: #69b8c0;
  display: block;
  position: absolute;
  z-index: -2;
  left:0px;
  padding: none;
}
.participation::before{
  width:105vw;
  height: 15%;
  content: "";
  background: #69b8c0;
  display: block;
  position: absolute;
  z-index: -2;
  left: -20px;
  top:2170px;


}

.participation{
font-family: serenity, sans-serif;

font-weight: 300;
font-style: normal;
padding-left: 40px;
height:auto;
width: 55vw;
line-height: 40px;
}


.benefits::after{
  width: 30vw;
  height: 90vw;
  content:"";
  border-radius: 0%;
  background-image: url("mountains.jpg");
  display: block;
  position: absolute;
  z-index: -1;
  right: 60px;
  background-size: contain;
  opacity: 0.8;
  background-repeat: no-repeat;
  padding:none;
  bottom: -200px;
}

footer {
  display:flex;
  flex-direction: row;
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: oblique;
  font-size: 25px;
  justify-content: space-around;
  padding-top: 50px;
  background-color:#9dc183;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;


}



.explanation {
  grid-column: 1 / span 2;
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
  padding-left: 30px;
  line-height: 40px;
  margin-top: -250px;
}

.resources::after{
  width: 43vw;
  height: 47vw;
  content:"";
  background-image: url("leaves.jpg");
  display: block;
  position: absolute;
  z-index: -2;
  background-size: contain;
 opacity: 0.5;
  background-repeat: no-repeat;
  grid-column: 2;
  top:575px;
  left: -43px;
}
.wrapper{
  margin-top: -900px;
  margin-left: -200px;
}

.benefits{
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
  padding-left: 30px;
  line-height: 40px;
}

.requirements {
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
  padding-left: 30px;
  line-height: 40px;
}



.design-selection{
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
  margin-top: -700px;
}

.design-archives{
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;
}


.select{
  margin-left: 10px;

}

.zen-resources{
  font-family: serenity, sans-serif;
  font-weight: 300;
  font-style: normal;


}

.sidebar{
  margin-left: 300px;
  margin-top: -10px;
}

.sidebar::after{
  width:20vw;
  height: 20vw;
  content:"";
  border-radius: 50%;
  background: #9dc183;
  display: block;
  position: absolute;
  z-index: -1;
  right: 200px;
  top: 2000px;
}


  @media screen and (max-width: 600px) {
    .intro::before {
      width:20vw;
      height: 20vw;
      content: "";
      border-radius: 50%;
      background: #9dc183;
      display: block;
      position: static;
      z-index: -1;
      left: 200px;
      opacity: 0;
    }
  }
@media screen and (max-width: 600px) {
    .page-wrapper::before {
    content: "";
    display: block;
    position: absolute;
  opacity: 0;
  }
}

@media screen and (max-width: 600px) {
    .preamble::before {
    content: "";
    display: block;
    position: absolute;
    opacity: 0;
  }
}

@media screen and (max-width: 600px) {
    .sidebar::after{
    content: "";
    background: #3d5e70;
    display: block;
    position: absolute;
    opacity: 0;
  }
}

@media screen and (max-width: 600px) {
    .preamble {
    content: "";
    display: block;
    position: absolute;
    margin-top: ;
    padding-left: 30px;
  }
}


@media screen and (max-width: 600px) {
    h1{
    content: "";
    display: block;
    position: absolute;
    font-size: 50px;
    margin-left:-20px;
    margin-top: 30px;
  }
}