@import url('https://fonts.googleapis.com/css?family=Unlock');
@import url('https://fonts.googleapis.com/css?family=Antic+Slab|Unlock');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
body {
  background: url(wallpaper.jpg);
  background-color: transparent;
  background-size: cover;
  height: 600px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.page-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  font-family: 'roboto', sans-serif;
  font-size: 15pt
}
.intro {
  grid-column: span 4;
  margin-left: 40pt;
  margin-right: 40pt;
  margin-top: 40pt;
}
section {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.6);
}
h1 {
  font-size: 12pt;
}
h2 {
  font-size: 55pt;
  padding-bottom: 80pt;
  font-family: 'Abril Fatface', cursive;
  background: url(mtn.png)
}
h3 {
  font-size: 25pt;
  background: url("water.jpg");
  width: 50%%;
  padding: 15px;
  color: white;
  font-family: 'Antic Slab'
}
p {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  font-size: 12pt;
}
.main {
  grid-column: span 3;
  background-color: rgba(255, 255, 255, 0.6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 30pt;
  margin-left: 40pt;
  padding-top: -20pt
}
.explanation, .benefits, .requirements, .participation {
  padding: 15pt;
}
.explanation {
  grid-column: span 3;
}
aside {
  grid-row: / span 2;
  grid-column: 4;
  /*background-color: rgba(0, 0, 128, 0.3);*/
  align-items: center;
  font-size: 12pt;
  font-family: arial;
  padding-left: 40pt;
  margin-right: 40pt;
}
ul {
  list-style-type: none;
}
.wrapper {
  /*display:flex;*/
  /*justify-content: space-around;}*/
  /*.design-selection {
order: 2;*/
}



@media (max-width: 500px) {
  .page-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    font-family: 'roboto', sans-serif;
    font-size: 17pt;
    width: 100%;
    max-width: 500px;
    margin: 0;
  }
h2 {
grid-column: 1/2}
  .intro {
    /*background-color: red;*/
    grid-column: 1 span 5;
    margin: 0;
    background-position: bottom;
  }
  .main{
    grid-row:2;
    margin-left: 0;
    margin-right:0;
  }
  .explanation, .benefits, .requirements, .participation{
  grid-column: 1/2;
  width: 120%;
  }

p{
  font-size: 15pt;
}
aside{

  grid-column: 1/2;
  width: 100%;
  /*background-color: yellow;*/
}
footer {
grid-row: 4}
}