@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Patrick+Hand|Permanent+Marker');
/*

font-family: 'Permanent Marker', cursive;
font-family: 'Patrick Hand', cursive;
font-family: 'Black Han Sans', sans-serif;

*/

/*containter*/
body {
  display:block;
  background-image:url(background.jpg);
  background-position:center;
  margin:auto,0;

}

@media only screen and (min-width:100px) and (max-width:641px) {


  .page-wrapper{
    display:grid;
    grid-template-columns:1fr;
    margin:auto,0;
    height:100vh;
    grid-gap:1em;

  }


  /* sections start*/

  .intro {

    /* background: lightblue; */
   background-image:url(coverart.jpg);
   background-position:center;
   grid-column-start:1;


  }
  .summary{
grid-column-start:1;
  }



  .preamble {
grid-column-start:1;
  }

  .main{
    grid-column-start:1;
  }

  .explanation{
    grid-column-start: 1;
  }

  .participation{
grid-column-start:1;
  }

  .benefits{
grid-column-start:1;
  }

  .requirements{
grid-column-start:1;
  }


  footer{

  }


  .sidebar{
  background-image:url(sidebar.jpg);
  background-position:center;
  background:rgba(255,255,255,.5);
  margin:auto;
grid-column-start:1;
  }


  /*sections end*/

  /*font formatting*/
  /* .summary a{
      background:rgba(255,255,255,.5);
  } */
  .intro{

  }
  .summary{
    margin:auto;
  }
  .summary a:hover{
    background:rgba(0,205,242,.5);
    color:white;
    font-size:1.5em;
  }

  footer{
    font-family:'Patrick Hand',cursive;
    font-size:1em;
    background:rgba(255,255,255,.5);
    margin:auto;
    text-align:center;
  }
  footer a{
    text-decoration:none;
  }

  footer a:hover{
  color:cyan;
  }
  a{
    color: rgb(66,158,244);
    text-decoration:none;
  }
  a:hover{
    color:hotpink;
  }

  h1{
    font-family:'Permanent Marker', cursive;
    font-size:3em;
  text-align:center;
  margin:auto,0;

  }
  h2, h3{
    text-align:center;
    font-family:'Black Han Sans', sans-serif;
    font-size:1.5em;
    background:rgb(233,150,255);

  		-webkit-transform: skewX(-10deg);
  		-moz-transform: skewX(-10deg);
  		-ms-transform: skewX(-10deg);
  		transform: skewX(-10deg);
  }
  p {
    font-family:'Patrick Hand',cursive;
    font-size:1.1em;
    margin:auto;

   }


  li {
    font-family:'Patrick Hand',cursive;
    font-size:1em;
  }

  nav {
    font-family:'Patrick Hand', cursive;
    font-size:1em;

  }
  nav a:first-child{
    text-decoration:none;
    color:rgb(0,186,219);
  }
  nav a:first-child:hover{
    color:red;
  }

  .zen-resources li {
    font-family:'Patrick Hand',cursive;
    font-size:1em;

  }
  .zen-resources a{
    text-decoration:none;
    color:rgb(0,186,219);
  }

  .zen-resources a:hover{
    color:red;
  }
}



@media only screen and (min-width:642px){



.page-wrapper{
  display:grid;
  grid-template-columns:2fr 3fr 1fr;
  margin:0,auto;
  height:100vh;
  grid-gap:1em;

}


/* sections start*/

.intro {

  /* background: lightblue; */
 background-image:url(coverart.jpg);
 background-position:center;


}
.summary{

}



.preamble {

}

.main{

}

.explanation{

}

.participation{

}

.benefits{

}

.requirements{

}


footer{

}


.sidebar{
background-image:url(sidebar.jpg);
background-position:center;
background:rgba(255,255,255,.5);
margin:auto;

}


/*sections end*/

/*font formatting*/
/* .summary a{
    background:rgba(255,255,255,.5);
} */
.intro{

}
.summary{
  margin:auto;
}
.summary a:hover{
  background:rgba(0,205,242,.5);
  color:white;
  font-size:1.5em;
}

footer{
  font-family:'Patrick Hand',cursive;
  font-size:1em;
  background:rgba(255,255,255,.5);
  margin:auto;
  text-align:center;
}
footer a{
  text-decoration:none;
}

footer a:hover{
color:cyan;
}
a{
  color: rgb(66,158,244);
  text-decoration:none;
}
a:hover{
  color:hotpink;
}

h1{
  font-family:'Permanent Marker', cursive;
  font-size:6em;
text-align:center;
margin:auto,0;

}
h2, h3{
  text-align:center;
  font-family:'Black Han Sans', sans-serif;
  font-size:2em;
  background:rgb(233,150,255);

		-webkit-transform: skewX(-10deg);
		-moz-transform: skewX(-10deg);
		-ms-transform: skewX(-10deg);
		transform: skewX(-10deg);
}
p {
  font-family:'Patrick Hand',cursive;
  font-size:1.1em;
  margin:auto;

 }


li {
  font-family:'Patrick Hand',cursive;
  font-size:1em;
}

nav {
  font-family:'Patrick Hand', cursive;
  font-size:1em;

}
nav a:first-child{
  text-decoration:none;
  color:rgb(0,186,219);
}
nav a:first-child:hover{
  color:red;
}

.zen-resources li {
  font-family:'Patrick Hand',cursive;
  font-size:1em;

}
.zen-resources a{
  text-decoration:none;
  color:rgb(0,186,219);
}

.zen-resources a:hover{
  color:red;
}
}

/*font formatting end*/