@media screen and (max-width:1000px) {
.sidebar {

grid-column-start: auto;
grid-row-start: auto;
margin-left: 10%;

  }
}


@media screen and (max-width:1000px) {
#zen-preamble {
display:block;
grid-column-start: auto;
grid-row-start: auto;
float:right;

position: relative;
right: 100px;
top: 1px
  }
}

@media screen and (max-width:1000px) {
.intro {


margin-left: 200px;
  }
}

.design-selection h3 {
color: white !important;
}


.design-selection {
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 20px;
  background-color: teal;
  font-family: 'Red Hat Text';
  margin-top: 50px;
  margin-left:10em;
  width: 350px;
  max-width: 400px;
  color: white;
  transition-duration:  500ms;
  transition-property: background,border-radius;
  transition-timing-function: ease;
  }
.design-selection:hover {
  background: tomato;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}




.design-name {font-size: 20px}

a:hover {
width: 600px;
}

.summary a {
color: cadetblue;
font-size: 30px;
font-style: oblique;
transition-duration:  500ms;
transition-property: font-size;
transition-timing-function: ease;

}
.summary a:hover {
font-size: 25px;
}

a {
color: white;
text-decoration: none;

}
/* aside {
  position:absolute;
} */


.design-archives h3 {
color: white !important;

}

.design-archives {

  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 20px;
  background-color: cadetblue ;
  font-family: 'Red Hat Text';
  margin-top: 50px;
  margin-left:10em;
  width: 350px;
  max-width: 400px;
  color: white;
  transition-duration:  500ms;
  transition-property: background,border-radius;
  transition-timing-function: ease;
}

.design-archives:hover {
  background: gold;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.zen-intro {
  margin-top: 5px;
}
.zen-resources h3 {
color: white !important;
}

.zen-resources {

display:grid;

  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 20px;
  color: white;
  background-color: yellowgreen ;
  font-family: 'Red Hat Text';
  margin-top: 50px;
  margin-left: 10em;
  margin-right: 10%;
  width: 350px;
  transition-duration:  500ms;
  transition-property: background,border-radius;
  transition-timing-function: ease;
}
.zen-resources:hover {
  background: orange;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

h1 {
font-family: 'Red Hat Text';
font-size: 100px;
color: cadetblue;
border: Yellowgreen;
margin-top: 75px;
border-style: solid;
padding: 100px;
border-radius: 50%;
width:305px;
line-height: 100px;
/*border-image: url(border.png) 30 round;
border-image-source: url(zenborder.png);
  border-image-slice: 20;
  border-image-width: 20;*/
  transition-duration:  500ms;
  transition-property:background,color, text-align, border-style, border-color;
  transition-timing-function: ease;
}
h1:hover {
  background: teal;
  color: white;
  text-align: none;
  border-style: solid;
  border-color: teal;

}

h2 {
  font-family: 'Red Hat Text';
  font-size: 40px;
  color: cadetblue;
  line-height: 20px;
}


h3 {
  font-family: 'Red Hat Text';
  font-size: 30px;
  color: cadetblue;

  padding: 1px;
}

.preamble h3 {
  position: relative;
color:cadetblue;
}
.explanation {

border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
padding: 20px;
background-color: PapayaWhip ;
font-family: 'PT Serif', serif;
position:relative;

}

.participation {

border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
padding: 20px;
background-color: PapayaWhip;
font-family: 'PT Serif', serif;

}
.benefits {
/*display: grid;
grid-column-start:
1;
grid-row-start:
5;*/
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
padding: 20px;
margin-top: 50px;
background-color: PapayaWhip;
font-family: 'PT Serif', serif;


}

.requirements {

border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
padding: 20px;
background-color: PapayaWhip;
font-family: 'PT Serif', serif;
margin-top:
}
.explanation h3 {
  margin-left: 100px;
}
.requirements h3 {
  margin-left: 100px;
}

.benefits h3 {
  margin-left: 100px;
}

.participation h3 {
  margin-left: 100px;

}
.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr ;
/*border-color:lightgrey;
border-style: solid;*/
  /*border-width: 1px;*/
  padding: 10px;
}




.intro h1 {
position:relative;

}
.intro::after {
  content:url("stones.png");

  font-size: 10px;
  color:black;
  position:relative;
  top: -100px;
right:2px;
  z-index: 1;
  margin: auto;
}


.main::after {
  /* content:"*"; */
  font-size: 1em;
  color:black;
  position:absolute;
  top: 1000px;
  left:1000px;
  right:1px;
  z-index: 1;
  margin: auto;
}
.preamble{
  float:center;
position:relative;
left: -570px;
top: 300px;
  margin-right: 60%;
}


padding: 50px;
/*border-style: solid;
border-color: white;*/

}

.banner {
position:relative;
margin-right: 50%;
margin-left: 10%;
text-align: center;
}


.main {
  position:relative;
margin-top: -10px;
  padding: 50px;
  /*border-style: solid;
  border-color: lightgrey;*/
  grid-column:span 2;
}

.explanation::before {
  content:url("bonzai.png");
    color:black;
    float: left;
    top: 100px;
}

.requirements::before {
  content:url("koi.png");
    color:black;
    float: left;
    top: 100px;
}

.explanation {

  margin-left: 50%;
}

.benefits::before {
  content:url("waterfall.png");

  color:black;
  float: left;
top: 100px;

}

.participation::before{
  content:url("yinyang.png");

  color:black;
  float: left;


}
.participation {
  position:relative;
  margin-right:50%;

}

/*.benefits::before {
  content:url("waterfall.png");

  color:black;
  position:absolute;
  top: 190em;
  left:70em;
  z-index: 1;
}*/
/*.benefits::after {
  content:url("rule.png");

  color:black;
  position:absolute;
  top: 220em;
  left:40em;
  z-index: 1;
}*/
.participation a {
  color:cadetblue;
  font-style: oblique;
  font-size: 20px;

}
.benefits {
    margin-left: 50%;
}
.requirements {

    margin-right:50%;
}
.resources {
  font-family: 'Red Hat Text';
  font-size: 30px;
  color: red;
}
.requirements a {

  color:cadetblue;
}


header {
  display: grid;
  grid-column-start:1 /1;
  margin-top: 5px;
}





aside {
disply: grid;
  grid-column-start:1;
  grid-row-start:1;
  margin-top: 10px;
  margin-right: 200px;
  margin-left: auto;

  position:relative;
}

html {
  border-top: 50px;
  border-bottom: 50px;
  border-right: 0px;
  border-left: 0px;
  border-style: solid;
  border-color: Yellowgreen;
  padding-bottom: 40em;
}


body {


  background-image: linear-gradient( PapayaWhip, white, white, PapayaWhip);
}