@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|Libre+Baskerville:400,400italic);
@import url('https://fonts.googleapis.com/css?family=Allura|Amita:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Francois+One&display=swap');




header::before{
  bottom: 100px;
  margin-left:400px;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 80px;
  text-transform: uppercase;
  content: "CSS Zen Garden"


}


header {
  height: 500px;
  padding: 20px 0px 70px 0px;
  background-color: white;
}

h1{

 font-family: 'Julius Sans One', sans-serif;
 font-size: 3.2em;
 text-transform: uppercase;
  padding-left: 2.3em

  }

h1::before {
  display: inline-block;
  margin-left: 350px;
  text-align: center;
  content: "";
  width: 500px;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("lotus.png");
}

    h3 {
    margin: 4em 0 0 0;
    color: green;
    font-family: 'Francois One', sans-serif;
    font-size: 1.8em;
    text-transform: uppercase;
    }



body {

  background-color: #aeffd1;
}

p {
 margin: 0.75em 0;
 line-height: 2;
}

.summary,
.preamble {

 width: 80%;
 margin: 0 auto;

}
.supporting h3,
.supporting p {
 width: 80%;


}



  body{
    background-color: #e9fce9;
    font-family: 'Libre Baskerville', sans-serif;
  }


  .sidebar {
  	font-size: 0.80em;
  	background: #b7e5d6;
    margin-left:1200px;
  	width: 300px;
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    /*grid-gap: 15px;*/
    list-style-type: none;
    right: 0;
    position: absolute;
    top: 700px;
    display: inline-flex;
  	}


.sidebar a {
 color: white;

}
.sidebar a:hover,
.sidebar {
 color: #49968e;
}
.sidebar ul {

   margin: 0;
 list-style: none;
 overflow: hidden;
}



.design-selection li,
.zen-resources li {
 float: left;
 width: 70%;
 padding: 10%;
 border-top: solid 1.5px gray;
 color: black;

}
.design-selection h3 {
 display: auto;

}

.resources{
  font-family: 'Amita', cursive;
  color: black;
  text-align: center;

}

.select{
  font-family: 'Amita', cursive;
  color: black;
  text-align: center;
  text-transform: uppercase;


}

.archives{
  font-family: 'Amita', cursive;
  color: black;
  text-align: center;
  border-bottom: solid 1.5px gray;

}

.next{
  font-family: 'Francois One', sans-serif;
  font-size: 18px;
  color: white;
  text-transform: uppercase;
  padding:10px 50px;
}

.viewall{
  padding:10px 50px;
}


.design-selection .design-name,
.zen-resources a,
li.viewall a {


 font-family: 'Francois One', sans-serif;
 font-size: 18px;

 text-transform: uppercase;
}




.design-selection .designer-name {
 color: #616857;
 font-size: 0.9em;
 font-style: normal;
}

}
.designer-name {
 color: #616857;
 font-size: 20px;

}

a {
 color: #0d8ba1;
 -webkit-transition: all 0.25s ease-out;
 -moz-transition: all 0.25s ease-out;
 transition: all 0.25s ease-out;
 text-decoration: none;}



nav {
margin:0px;
}
.summary,
.preamble,
.supporting div{
float: left;
clear: left;
width: 66%;
padding: 1em 5% 1em 10%;
}
.explanation h3,
.explanation p,
.participation h3,
.participation p,
.benefits h3,
.benefits p,
.requirements h3,
.requirements p{
width: 100%;

}
.summary {
padding-top: 3.25em;
}

footer {
 clear: both;
 padding: 3em 10%;
 color: black;
 background: #b7e5d6;
 text-align: center;
}

footer a {
 display: inline-block;
 overflow: hidden;
 width: 50px;
 height: 40px;
 padding: 40px 0 0 0;
 margin: 0 0.5em;
 position: relative;
 color: black;

}
footer a:hover,
footer a:focus {
 color: #0d8ba1;
 text-decoration: none;
}

footer a::before {
 display: block;
 position: absolute;
 top: 3px;
 left: 0;
 overflow: visible;
 font-size: 36px;
 text-indent: 0;
}



 div.participation,
 div.benefits {
  width: 66%;}

@@media screen and (max-width: 800px) {
    .main {
      display: block;

    }
  }

@media screen and (max-width: 600px) {
   .page-wrapper{
     display: block;
   }
 }
   header{
     display: block;

     text-align: center;
     padding-top: 250px;
   }

   h2{
     text-align: center;
     padding-top: 250px;

   }

   .sidebar{
     display: block;
     text-align: center;
     width: 20%
   }

   .archives{
     display: inline-flex;

     width: 20%