p{color:#ffffff;
  font-family: Abel, Lato, sans-serif;
  font-size:1.1em;
  text-align: center;
  margin: 10px;
  max-width: 100%;
    }
h1{color:#A9DDD6;
  font-family: Quicksand, Roboto, serif;
  font-weight: bold;
  text-align: center;
  font-size: 2.5em;
    }
body{background-color:#91ADC2;
margin: 0 0 0 0;}

ul {text-align: center;}

#container {background-color: #7A8B99;
            width: 90%;
            margin: auto 10px;
          border-bottom: 0}

.header {display: block;
      color: #A9DDD6;
      background-color: #9BA0BC;
      padding: 5px;
      margin: 0;
    }


#nav {display: flex;
      justify-content: space-around;
      flex-flow: column;
      background-color: #C1B8C8;
      padding: 0;
      list-style-type: none;
      margin: 0;
    }
#nav li {margin: 0;
          padding: 0;
        }
#nav a:link, #nav a:visited {display: block;
                              color: #ffffff;
                              font-weight: 400;
                              text-align: center;
                              text-decoration: none;
                              font-size: 1em;
                              padding: 10px;
                              font-family: Staatliches, Helvetica, sans-serif;}
#nav a:hover, #nav a:active {background-color: #A9DDD6;}

.footer {font-family: sans-serif, "Times New Roman", serif;
          font-style: italic;
          color: #FFFFFF;
          display: block;
          background-color:#A9DDD6;
          font-size: .8em;
          border-top: 0px;
          margin-bottom: 0;
          text-align: left;}

.caption {display: block;
          background-color:#A9DDD6;
          width: 49.7%;
          margin-left: auto;
          margin-right: auto;
          padding: 2px;
          margin-top: 0;
          font-family: serif, "Times New Roman", sans-serif;
          font-style: italic;
          color: #FFFFFF;
          font-size: 0.8em;
          text-align: center;}

.title {display: flex;
        justify-content: space-around;
        }


img {display: block;
    border: none;
    margin: auto;
              }

h2{color: black;
  font-family: Georgia, sans-serif, serif;
  font-weight: bold;
  text-align: center;
  font-size: 4em;
  background-color: white;
      }

article {display: grid; grid-template-columns: 200px 1fr 1fr;
      grid-gap: 20px;
      grid-template-areas:
       "a f f"
       "b b b"
       "h h g"
       "c c e"
       "d d d"
       "j j I"
      }

article p {font-size: 1.4em;
  text-align: left;
  margin-bottom: 10px;
    }

.first-sentence {
    font-size: 3em;
    font-weight: bold;
    padding-top: 35px;
}
.extra {
  font-size: 1.8em;
  color: #D3D3D3;
}

.flex{
      grid-area: a;
      margin: auto 5px;
     }

.lede {grid-area: f;
  }

.section2 {
       grid-area: b;
     }
.smoothie {grid-area: g;
  margin: auto 5px;
  }

.image3 {
       grid-area: c;
       margin: auto 5px;
     }

.section3 {
       grid-area: d;
     }
.section3 img {margin-top: 15px;
  margin: auto 5px;
    }

.pullquote {font-size: 3em;
  font-style: italic;
       grid-area: e;
        }

.section4 {grid-area: h;
      }

.card_img {grid-area: I;
    margin: auto 5px;
        }
.section5 {grid-area:j;
      }

nav ul li {
            display: flex;
            }

nav a {color: white;
      display: flex;
      text-decoration: none;
      padding: 10px;
      }

header {
      display: flex;
      flex-flow: row;
      background-color: #9BA0BC;
      margin: 0;
      padding: 0 5px;
      }

.menu-trigger {
          order: 1;
          font-size: 1.75em;
          width: 2em;
          }

header h1 {
      order: 2;
    }

nav ul {display: none;
      }

nav {display: flex;
      justify-content: space-around;
      flex-flow: column;
      background-color: #C1B8C8;
      padding: 0;
      list-style-type: none;
      margin: 0;
        }

@media screen and (min-width:700px){
nav ul {
        display: flex;
        }


.menu-trigger {display: none;
          }

header h1{order: 1;
          }

nav {order: 2;
      }
      }


@media (max-width: 1200px){
  article {display: grid; grid-template-columns: 200px 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
         "a f f"
         "b b b"
         "h h h"
         "g g g"
         "d d d"
         "j j I"
        }
    .image3 {display: none;}
    .pullquote {display: none;}
}

@media (max-width: 800px){
      

      article {display: grid; grid-template-columns: 200px 1fr 1fr;
            grid-gap: 20px;
            grid-template-areas:
             "f f f"
             "b b b"
             "h h h"
             "g g g"
             "d d d"
             "I I I"
             "j j j"
            }
      .flex{display: none;}
      .card{float: right;}
            }