body {
 background-image: url("galaxy.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 font-family: helvetica, sans-serif;
 color: white;
 display: grid;
 display: flex;

}

.intro{
  line-height: 50%;
}

p{
  line-height: normal;
  max-width: 400px;
  /*padding: 20px;*/

}

h1{


font-family: abolition, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 110px;
white-space: nowrap;



/* fix Grids and columns and assign per section or its going to mess up your layout. the grid should be defined in the wrqpper
not in the body because the body doesn't apply to the whole page, ive moved the code to page wrapper but its commented out
commented out the code in body */


}

h2{
  font-family: abolition, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
}

h3{
  font-family: abolition, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;

}

.page-wrapper {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  display: flex;
  flex-direction: column;
  /* display: flex;
  justify-content: space-around; */
}

.intro{
  display: grid;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding-left: 20px;

}


.summary {
  display: grid;

  background: rgba(0, 0, 0, 0.45);
  width: 500px;
  padding: 20px;
  margin-top: 2em;

  grid-column: 2 / 3;
  grid-row: 1 / 2;

}


.preamble {
    display: grid;
    width: 50%;
    /* position: absolute; */
    position: relative;
    border-style: none;

    background: rgba(0, 0, 0, 0.45);
    width: 500px;
    padding: 20px;
    margin-top: 2em;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.explanation {
    width: 50%;
    border-style: none;

    background: rgba(0, 0, 0, 0.45);
    width: 500px;
    padding: 20px;
    margin-top: 2em;
    display: grid;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.participation {
  width: 50%;
  border-style: none;
  position: relative;

  background: rgba(0, 0, 0, 0.45);
  width: 500px;
  padding: 20px;
  margin-top: 2em;
  margin-right: 2em;
  display: grid;
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  /* display: flex; */

}

.benefits{
  width: 50%;
  border-style: none;

  background: rgba(0, 0, 0, 0.45);
  width: 500px;
  padding: 20px;
  margin-top: 2em;
  display: grid;
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.requirements{
  width: 50%;
  border-style: none;

  background: rgba(0, 0, 0, 0.45);
  width: 500px;
  padding: 20px;
  margin-top: 2em;
  margin-right: 2em;
  display: grid;
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.sidebar{
  width: 50%;
  /*position: sticky;*/
  position: fixed;
  right: 0px;
  top: 0px;
  border-style: none;

  background: rgba(0, 0, 0, 0.45);
  width: 300px;
  padding: 20px;
  display: grid;
  grid-row: 1 / 5;

}

/* .zen-resources:{
  display: grid;
  grid-column: 2 / 3;
  grid-row: 4 / 5;
} */

footer{
  display: grid;
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  background: rgba(0, 0, 0, 0.45);
  width: 500px;
  padding: 20px;
  margin-top: 2em;
  font-size: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

footer a {
  color: lightblue;
  font-family: abolition, sans-serif;
  text-decoration: underline none;
}

.design-name {
  font-size: 30px;
  color: lightblue;
  font-family: abolition, sans-serif;
  /*text-decoration: none;*/
}

.designer-name {
  font-size: 20px;
  color: white;
  font-family: helvetica, sans-serif;
}

.design-selection li{
  list-style: none;
}

p a {
  color: lightblue;
}

.design-archives{
  /* width: 50%;
  border-style: none;

  background: rgba(0, 0, 0, 0.45);
  width: 600px;
  padding: 20px; */

}

.design-archives a{
  color: lightblue;
}

.zen-resources{
  /* width: 50%;
  border-style: none;

  background: rgba(0, 0, 0, 0.45);
  width: 600px;
  padding: 20px;
  position: relative;
  right: 300px; */
}

.zen-resources a{
  color: lightblue;
}

.main {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
}










  @media screen and (max-width: 1000px) {
    /*body {
      display: block;
      flex: none;
    }*/

    .page-wrapper {
      /*display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1 / 10;*/

    }

    .intro {
      grid-column: 1 / 2;
      grid-row: 1 / 2;

    }

    .summary {
      grid-column: 1 / 2;
      grid-row: 2 / 3;

    }

    .preamble {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
      position: static;

    }


    .explanation {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
    }

    .participation{
      grid-column: 1 / 2;
      grid-row: 5 / 6;

    }

    .benefits{
      grid-column: 1 / 2;
      grid-row: 6 / 7;

    }

    .requirements{
      grid-column: 1 / 2;
      grid-row: 7 / 8;
    }

    .sidebar{
      grid-column: 2 / 3;
      grid-row: 8 / 9;
    }

    footer{
      grid-column: 1 / 2;
      grid-row: 9 / 10;
    }

  }


  @media screen and (max-width: 940px) {
    h1 {
      font-size: 75px;
    }

    .intro {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      width: 450px;

    }

    .summary {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      width: 450px;


    }

    .preamble {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
      position: static;
      width: 450px;


    }


    .explanation {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
      width: 450px;

    }

    .participation{
      grid-column: 1 / 2;
      grid-row: 5 / 6;
      width: 450px;

    }

    .benefits{
      grid-column: 1 / 2;
      grid-row: 6 / 7;
      width: 450px;


    }

    .requirements{
      grid-column: 1 / 2;
      grid-row: 7 / 8;
      width: 450px;

    }

    .sidebar{
      grid-column: 1 / 2;
      grid-row: 8 / 9;
      position: static;
      margin-top: 2em;
      width: 450px;
    }

    footer{
      grid-column: 1 / 2;
      grid-row: 9 / 10;
      width: 450px;

    }
}



  @media screen and (max-width: 500px) {
    h1 {
      font-size: 75px;
    }

    .intro {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      width: 450px;

    }

    .summary {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      width: 450px;


    }

    .preamble {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
      position: static;
      width: 450px;


    }


    .explanation {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
      width: 450px;

    }

    .participation{
      grid-column: 1 / 2;
      grid-row: 5 / 6;
      width: 450px;

    }

    .benefits{
      grid-column: 1 / 2;
      grid-row: 6 / 7;
      width: 450px;


    }

    .requirements{
      grid-column: 1 / 2;
      grid-row: 7 / 8;
      width: 450px;

    }

    .sidebar{
      grid-column: 1 / 2;
      grid-row: 8 / 9;
      position: static;
      margin-top: 2em;
      width: 450px;
    }

    footer{
      grid-column: 1 / 2;
      grid-row: 9 / 10;
      width: 450px;

    }


  }