header {
height: 400px;
padding: 20px 0 70px 0;
background-image: url(images/largewater.jpg);
background-repeat: no-repeat;
background-size: 85% 100%;


}

p a:hover {
  color: pink;
}


body{
  background-color: black;
color: white;
background-image: url("bottom.png");

}
.preamble::before {
  content:"";
  width: 170px;
  height: 170px;
  float: left;
  shape-outside: circle(50%);
  background-image: url(images/first.jpg);
  background-repeat: no-repeat;
  background-size: 160px 160px;

}

.explanation::before {
  content:"";
  width: 170px;
  height: 170px;
  float: right;
  shape-outside: circle(30%);
  background-image: url(images/second.jpg);
  background-repeat: no-repeat;
  background-size: 160px 160px;

}
.participation::before {
  content:"";
  width: 170px;
  height: 170px;
  float: left;
  shape-outside: circle(45%);
  background-image: url(images/third.jpg);
  background-repeat: no-repeat;
  background-size: 160px 160px;

}

.requirements::before {
  content:"";
  width: 170px;
  height: 170px;
  float: right;
  shape-outside: circle(50%);
  background-image: url(images/fifth.jpg);
  background-repeat: no-repeat;
  background-size: 160px 160px;

}
/* .requirements::after {
  content:"";
  width: 170px;
  height: 170px;
  float: right;
  shape-outside: circle(50%);
  background-image: url(images/seven.jpg);
  background-repeat: no-repeat;
  background-size: 170px 170px;

} */

h1{
font-family: arial;
font-size: 30px;
text-align: right;
/* transform:rotate(180deg); */
/* transform-origin: left top 5em; */
/* float: left; */



}
h2 {
font-family: cursive;
text-align: right;


}
.summary{
font-family: avenir;

}

.h3{
font-family: avenir;

}

/*.page-wrapper {*/
/*right: 90px;*/

}

.sidebar {
font-size: 0.7em;
margin-left: 900px;
width: 450px;
letter-spacing: 2px;
font-family: sans-serif;
/*display: grid;*/
/*grid-template-columns: 1fr 1fr;*/
/*grid-gap: 15px;*/
/*right: 0;*/
left: 2em;
position: absolute;
top: 700px;
display: inline-flex;

}


.sidebar a:hover{
  color: pink;
}

.sidebar ul{
padding: 20px;
list-style: none;
overflow: hidden;

}
.design-selection li,
.zen-resources li {
float: left;
width: 60%;
padding: .8em 10%;
border-top: solid 1px pink;
font-style: bold;


}

.resources {
color: white;
text-align: left;

}

.archieves {
  color: white;
  text-align: center;
}

.design-selection li:nth-child(2n+1),
.zen-resources li:nth-child(2n+1){
clear: left;

}

.summary,
.preamble,
.supporting div{
  float:left;
  clear: left;
  width: 65%;
  padding: 1em 5% 1em 10%;




}

@media screen and (max-width: 800px){
.main{
  display: block;
}
h1,
h2{
text-align: right;

}

}

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

.page-wrapper{
  display: block;
}
 h1{
   font-size: 3em;
   text-align: center;
   /*transform: rotate(90deg);*/
   /*padding-bottom: 3em;*/
/*transform-origin: right center 8px;*/

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

.sidebar,
.resources {
display: block;
text-align:center;
width: 70%;
/*position:static;*/

}

.summary,
.preamble,
.supporting div{
  width: 95%;
}

.sidebar{
  margin: 0 auto;
}




}





.explanation h3,
.explanation p,
.participation p,
.benefits h3,
.benefits p,
.requirements h3,
.preamble h3,
.preamble p,
.requirements p{
  width: 80%;
}
.summary{
  padding-top: 3.25em;
  /* float:right; */
}