.sidebar{
    background-color: rgba(128,0,0, 0.8);
    grid-column: 2;
    grid-row: 2;
    color: black;
}

/*.designer-name{
  font-size: 15px;

}

.design-name{
  font-size: 15px;
}*/

/*.sidebar::after {
  content: "";
  background: blue;
  width:100%;
  height:500px;
  display:block;
}*/

.design-selection{
  padding-left: 20px;
  font-size: 19px;
}

div li a{
  color: gold;
}

div p a{
  color: white;
}

.design-archives{
  padding-left: 20px;
  font-size: 19px;
}

.zen-resources{
  padding-left: 20px;
  font-size: 19px;
}

li{
  height: 50px;
}

.page-wrapper{

  display: grid;
  grid-template-columns: 1fr 20%;
  /*grid-template-row: 1fr 1fr 1fr;*/
  /*grid-gap: 15px;*/
  background-image: url("jjbg.jpg");
  background-repeat: repeat;
}

.preamble{
    background-color: rgba(0, 0, 128, 0.7);
    font-size: 25px;
    color: gold;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    padding-bottom: 5px;

}

.explanation{
    background-color: rgba(0, 0, 128, 0.7);
    font-size: 25px;
    color: gold;
    grid-column: 1;
    grid-row: 1;
    padding-left: 20px;
    padding-right: 20px;

}

.participation{
    background-color: rgba(0, 0, 128, 0.7);
    font-size: 25px;
    color: gold;
    grid-column: 2;
    grid-row: 2;
    padding-left: 20px;
    padding-right: 20px;

}

.benefits{
    background-color: rgba(0, 0, 128, 0.8);
    font-size: 25px;
    color: gold;
    grid-column: 1;
    grid-row: 3;
    padding-left: 20px;
    padding-right: 20px;
}

.requirements{
    background-color: rgba(0, 0, 128, 0.8);
    color: gold;
    font-size: 25px;
    grid-column: 2;
    grid-row: 4;
    padding-left: 20px;
    padding-right: 20px;
}

.intro{
  background-color: rgba(128, 0, 128, 0.8);
  grid-column: 1/3;
  font-family: georgia;
  color: gold;


}

.summary{
  text-align: center;
  font-size: 20px;
  color: gold;

}


h1{

  color: gold;
  font-size: 125px;
  text-align: center;
  margin-top: 0;
  padding-top: 50px;
  margin-bottom: 0;
}

h2{
  text-align: center;
  font-size: 30px;
  margin-top: 0;
  height: 25px;
}

footer{

    word-spacing: 100px;
    background-color: rgba(128, 0, 128, 0.8);
    font-size: 20px;
    height: 50px;
    text-align: center;
    padding-left: 2em;
    padding-top: 1.2em;
    grid-column: span 2;
    grid-row: 5;

}

footer a{
  color:gold;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
}











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

    .page-wrapper{
        display: grid;

    }

    h1{
      font-size: 100px;
      height: 40px;
    }

    h2{
      font-size: 30px;
      /*height: 40px;*/
      color: gold;
      margin-top: 75px;
    }
    .summary{
      font-size: 17px;
    }

    .design-selection{

      font-size: 18px;
    }

    .design-archives{

      font-size: 18px;
    }

    .zen-resources{

      font-size: 18px;
    }

}

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

    .page-wrapper{
        display: grid;

    }

    h1{
      font-size: 100px;
      height: 40px;
      
    }

    h2{
      font-size: 30px;
      /*height: 40px;*/
      color: gold;
      margin-top: 75px;
    }

    .preamble{
      font-size: 20px;
    }

    .explanation{
      font-size: 20px;
    }

    .participation{
      font-size: 20px;
    }

    .benefits{
      font-size: 20px;
    }

    .requirements{
      font-size: 20px;
    }

    .summary{
      font-size: 17px;
    }

    .design-selection{

      font-size: 18px;
    }

    .design-archives{

      font-size: 18px;
    }

    .zen-resources{

      font-size: 18px;
    }

}

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

    .page-wrapper{
        display: block;

    }

    h1{
      font-size: 100px;
      height: 40px;
      color: gold;

    }

    h2{
      font-size: 30px;

      color: gold;
    }
    .summary{
      font-size: 18px;
    }

    .preamble{
        background-color: rgba(0, 0, 128, 0.6);
        font-size: 19px;

    }

    .explanation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 19px;
    }

    .participation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 19px;

    }

    .benefits{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 19px;
    }

    .requirements{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 19px;
    }

    .designer-name{
      font-size: 17px;

    }

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


    .main{
      display: block;
    }

    footer{
        word-spacing: 75px;
        background-color: rgba(128, 0, 128, 0.8);
        font-size: 20px;
        height: 50px;
        text-align: center;
        padding-left: 1em;
        padding-top: 1.2em;
    }

    li{
      height: 25px;
    }

}

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

    .page-wrapper{
        display: block;

    }

    h1{
      font-size: 75px;
    }

    h2{
      font-size: 25px;
      /*height: 30px;*/
      color: gold;
      margin-top: 50px;
    }
    .summary{
      font-size: 15px;
    }

    .preamble{
        background-color: rgba(0, 0, 128, 0.6);
        font-size: 18px;

    }

    .explanation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;
    }

    .participation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;

    }

    .benefits{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;
    }

    .requirements{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;
    }

    footer{

        word-spacing: 50px;
        background-color: rgba(128, 0, 128, 0.8);
        font-size: 20px;
        height: 50px;
        text-align: center;
        padding-left: 1em;
        padding-top: 1.2em;

    }

}

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

    .page-wrapper{
        display: block;

    }

    h1{
      font-size: 65px;
    }

    h2{
      font-size: 25px;

      color: gold;
      margin-top: 40px;
    }
    .summary{
      font-size: 15px;
    }

    .preamble{
        background-color: rgba(0, 0, 128, 0.6);
        font-size: 18px;

    }

    .explanation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;
    }

    .participation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;

    }

    .benefits{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;
    }

    .requirements{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 18px;
    }

    footer{

        word-spacing: 50px;
        background-color: rgba(128, 0, 128, 0.8);
        font-size: 20px;
        height: 50px;
        text-align: center;
        padding-left: 1em;
        padding-top: 1.2em;

    }

}

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

    .page-wrapper{
        display: block;

    }
    h1{
      font-size: 50px;
      height: 20px;
    }
    h2{
      font-size: 20px;
      height: 20px;
      color: gold;
    }

    .summary{
      font-size: 15px;
    }
    .preamble{
        background-color: rgba(0, 0, 128, 0.6);
        font-size: 17px;

    }

    .explanation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 17px;

    }

    .participation{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 17px;


    }

    .benefits{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 17px;

    }

    .requirements{
        background-color: rgba(0, 0, 128, 0.8);
        font-size: 17px;

    }

    .designer-name{
      font-size: 17px;

    }

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

    .main{
      display: block;
    }

    footer{
        word-spacing: 50px;
        font-size: 20px;
        height: 50px;
        text-align: center;
        padding-left: 1em;
        padding-top: 1.2em;
        background-color: rgba(128, 0, 128, 0.8);
    }

    .design-selection{

      font-size: 20px;
    }
}