@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow|Baloo|Josefin+Sans|Merienda|Merienda+One&display=swap');
.page-wrapper{


}
h1{
  font-family:'Merienda', cursive;
}
h2{
  font-family:'Merienda One', cursive;
}
h3{
  font-family: 'Baloo', cursive;

}
p{
  font-family: 'Josefin Sans', sans-serif;
}
a{
  font-family: 'Archivo Narrow', sans-serif;
  text-decoration: none;
}
.intro {
  background-color: skyblue;
  padding: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30% 35% 35%;

  }
.explanation{
  background: #75929B;
  padding: 2em;
  grid-row: 1;
  grid-column: 1/4
}
.explanation h3 {
  text-align: center;
}
.main{background-color: #CDBB92;
  background-image:url(umbrellas-01.png);
  background-size: 75%;
 background-position: center;
 background-repeat: no-repeat;
 display:grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 25% 40% 20%;
}
.requirements{
  background-color: #2BB673;
  padding: 2em;
  grid-row: 2/3;
  grid-column: 3/4
}
.requirements h3 {
  text-align: center;

}
.requirements  p {
  background-color: #27AAE1;
  padding:1em;
}
.requirements p:last-child{
  background-color: #CDBB92;
  text-align: center;
}
.participation{
  padding: 2em;
  grid-row: 2;
  grid-column: 2
}
.participation p{
  color:maroon;
}
.participation p:last-child{
  color:green;

}
header{
  background-color: yellow;
  width: 200px;
   height: 200px;
   border-radius: 50%;
   position:relative;
   top:-30px;
   text-align: center;
   padding: 2em;
   grid-column: 1fr;
   grid-row: 30%
}
.summary{
  background-color: white;
  border-radius: 50%;
  width: 400px;
  height: 300px;
  text-align: center;
  padding: 4em;
  grid-row: 2;
  grid-column: 2
}
.preamble{
  background-color: white;
  border-radius: 50%;
  width: 400px;
  height: 300px;
  text-align: center;
  padding: 2em;
  grid-row: 3
}
.benefits{
  grid-row: 3;
  grid-column: 2;
  display:flex;
}
.benefits p {
  color:brown;
  text-align: justify;
  float: left;
  shape-outside: square(50%);
  width: 200px;
  height: 200px;

}
.benefits h3 {
  color: white;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-image: url(ocean.jpg);
  background-repeat: no-repeat;
  background-size: 100%;

}
.wrapper a {
  color:white;
}
footer a {
  width: 52px;
    height: 52px;
    padding: 52px 0 0 0;
    margin: 0 2em;
    background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  display: flex;

  }

    footer a:visited {
        color: rgba(255, 255, 255, 0.2);
      }

  @media screen and (max-width:900px){
    .intro{
      display:block;
    }
  }
  @media screen and (max-width:1000px){
    .main{ display:grid;
      grid-template-rows:1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr

    }
    .requirements{
      grid-row: 3;
    grid-column: 1/4}
    .participation{
      grid-row: 2;
      grid-column: 1/2;
    }
    .benefits{
      grid-row: 2;
      grid-column: 3/4;
    }
    .benefits h3 {
      color: white;
      writing-mode: horizontal-tb;
      text-orientation: sideways;
    }

    .footer{
      grid-row: 1;
      grid-column: 1/4
    }

  }