:root {
  --bodyBackground: #ffffff;
  --shadow: #777777;
  --buttons: #52ae31;
  --green: #52ae31;
  --white: #ffffff;
  --imageShadow: #777777;
}

body {
  background-color: var(--bodyBackground);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 1em;
  color: var(--white);
}

@media only screen and (max-width: 40em) {
  #page-header {
    background-color: var(--white);
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 5px var(--shadow);
  }
  #navbar {
    box-shadow: 0 1px 5px var(--shadow);
    display: grid;
    gap: 1px;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "first"
      "second"
      "third"
      "fourth"
      "fifth";
  }
  #navbar ul li {
    list-style-type: none;
    margin: 21px;
  }
  #navbar a {
    padding-top: 0.6em;
    font-size: 23px;
    background-color: var(--buttons);
  }
  #main {
    display: grid;
    column-gap: 5px;
    grid-template: 0.1fr 0.7fr 1fr / 1fr;
    grid-template-areas:
      "content1"
      "content2"
      "content3";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 5px 5px;
  }
  .content2 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  .content3 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 20px 25px;
    text-align: center;
  }
  .content1 h1 {
    font-size: 40px;
    text-shadow: 2px 2px 5px var(--imageShadow);
  }
  .content3 h3 {
    margin-top: 0.3em;
  }
  .content3 p {
    font-size: 15px;
  }
  .content2 img {
    width: 100%;
    height: auto;
  }
  #footer {
    background-color: var(--green);
    font-size: 18px;
    box-shadow: 0 1px 5px var(--shadow);
    text-align: center;
    display: grid;
    grid-template-rows: repeat(3, max-width);
    grid-template-areas: 
    "left-footer"
    "mid-footer" 
    "right-footer";
  }
  .logo {
    margin: 2em;
    width: 85%;
    height: auto;
  }
  .right-footer {
    text-align: center;
    display: grid;
    grid-template: 1fr / repeat(4, max-width);
    grid-template-areas:
      "instaGrid instaTagGrid facebookGrid facebookTagGrid";
  }
  #insta-logo {
    margin: 9% 5% 0 4em;
    float: right;
    height: 30px;
  }
  #facebook-logo {
    margin: 20% 5% 0 0;
    float: right;
    height: 30px;
  }
  .social-tag-insta {
    padding: 0;
    margin: 0;
    margin-top: 0.75em;
    float: left;
    width: max-content;
    height: max-content;
  }
  .social-tag-facebook {
    padding: 0;
    margin: 0;
    margin-top: 0.75em;
    margin-right: 4em;
    float: left;
    width: max-content;
    height: max-content;
  }
  .left-footer p {
    margin: 0;
  }
  .left-footer h2 {
    margin-top: 2.5%;
    font-size: 20px;
    margin-bottom: 5px;
  }
  .logo-footer {
    margin-top: 4%;
    width: 100%;
    height: auto;
    max-width: 250px;
  }
}

@media only screen and (min-width: 40em) {
  #container {
    display: grid;
    grid-template: 150px 50px 1fr 120px / repeat(12, 1fr);
    width: 100vw;
    height: 100vh;
    grid-template-areas:
      "head head head head head head head head head head head head"
      "nav nav nav nav nav nav nav nav nav nav nav nav"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }
  #page-header {
    background-color: var(--white);
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 5px var(--shadow);
  }
  #navbar {
    box-shadow: 0 1px 5px var(--shadow);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "first second third fourth fifth";
  }
  #navbar ul li {
    list-style-type: none;
    margin: 21px;
  }
  #navbar a {
    padding-top: 0.6em;
    font-size: 23px;
    background-color: var(--buttons);
  }
  #main {
    display: grid;
    column-gap: 5px;
    grid-template: 0.2fr 1fr 1fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content2 content2"
      "content3 content3 content3 content3 content3 content3";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 5px 5px;
  }
  .content2 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  .content3 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 20px 25px;
    text-align: center;
  }
  .content1 h1 {
    font-size: 65px;
    text-shadow: 5px 5px 5px var(--imageShadow);
  }
  .content3 h3 {
    margin-top: 1em;
  }
  .content3 p {
    font-size: 18px;
  }
  .content2 img {
    width: 100%;
    height: auto;
  }
  #footer {
    background-color: var(--green);
    font-size: 18px;
    box-shadow: 0 1px 5px var(--shadow);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "left-footer mid-footer right-footer";
  }
  .logo {
    margin: 2em;
    width: auto;
    height: 60%;
  }
  .right-footer {
    text-align: center;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    grid-template-areas:
      "instaGrid instaTagGrid"
      "facebookGrid facebookTagGrid";
  }
  #insta-logo {
    margin: 4% 10px 2% 30%;
    float: right;
    height: 40px;
  }
  #facebook-logo {
    margin: 3% 10px 3% 30%;
    float: right;
    height: 40px;
  }
  .social-tag-insta {
    margin: 0;
    margin-top: 5.5%;
    width: max-content;
  }
  .social-tag-facebook {
    margin: 0;
    margin-top: 4.5%;
    width: max-content;
  }
  .left-footer p {
    margin: 0;
  }
  .left-footer h2 {
    margin-top: 2.5%;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .logo-footer {
    margin-top: 10%;
    margin-left: 10%;
    width: 100%;
    height: auto;
    max-width: 350px;
  }
}

@media only screen and (min-width: 80em) {
  #container {
    display: grid;
    grid-template: 150px 50px 1fr 120px / repeat(12, 1fr);
    width: 100vw;
    height: 100vh;
    grid-template-areas:
      "head head head head head head head head head head head head"
      "nav nav nav nav nav nav nav nav nav nav nav nav"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }
  #page-header {
    background-color: var(--white);
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 5px var(--shadow);
  }
  #navbar {
    box-shadow: 0 1px 5px var(--shadow);
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "first second third fourth fifth";
  }
  #navbar ul li {
    list-style-type: none;
    margin: 21px;
  }
  #navbar a {
    padding-top: 0.6em;
    font-size: 23px;
    background-color: var(--buttons);
  }
  #main {
    display: grid;
    column-gap: 5px;
    grid-template: 1fr 1fr 1fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content2 content2 content2 content2"
      "content3 content3 content2 content2 content2 content2"
      "content3 content3 content2 content2 content2 content2";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding-top: 70px;
  }
  .content2 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  .content3 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 10px 25px;
  }
  .content3 h3 {
    margin-top: 2em;
  }
  .content3 p {
    font-size: 18px;
  }
  #footer {
    background-color: var(--green);
    font-size: 18px;
    box-shadow: 0 1px 5px var(--shadow);
    text-align: center;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "left-footer mid-footer right-footer";
  }
  .logo {
    margin: 2em;
    width: auto;
    height: 60%;
  }
  .right-footer {
    text-align: center;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    grid-template-areas:
      "instaGrid instaTagGrid"
      "facebookGrid facebookTagGrid";
  }
  #insta-logo {
    margin: 4% 10px 2% 30%;
    float: right;
    height: 40px;
  }
  #facebook-logo {
    margin: 3% 10px 3% 30%;
    float: right;
    height: 40px;
  }
  .social-tag-insta {
    margin: 0;
    margin-top: 5.5%;
    width: max-content;
  }
  .social-tag-facebook {
    margin: 0;
    margin-top: 4.5%;
    width: max-content;
  }
  .left-footer p {
    margin: 0;
  }
  .left-footer h2 {
    margin-top: 2%;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .logo-footer {
    margin-top: 5%;
    margin-left: 10%;
    width: 100%;
    height: auto;
    max-width: 350px;
  }
}

.content1 h1 {
  color: var(--green);
  text-align: center;
  font-weight: bold;
  font-style: italic;
}

.content3 h3 {
  color: var(--green);
  font-weight: bold;
  font-style: italic;
  font-size: 23px;
}

.content3 p {
  color: black;
}

.insta-grid {
  grid-area: instaGrid;
}

.facebook-grid {
  grid-area: facebookGrid;
}

.social-tag-insta {
  grid-area: instaTagGrid;
}

.social-tag-facebook {
  grid-area: facebookTagGrid;
}

#page-header {
  grid-area: head;
}

#navbar {
  grid-area: nav;
}

.first-nav {
  grid-area: first;
  text-align: center;
  background-color: var(--white);
}

.second-nav {
  grid-area: second;
  text-align: center;
  background-color: var(--white);
}

.third-nav {
  grid-area: third;
  text-align: center;
  background-color: var(--white);
}

.fourth-nav {
  grid-area: fourth;
  text-align: center;
  background-color: var(--white);
}

.fifth-nav {
  grid-area: fifth;
  text-align: center;
  background-color: var(--white);
}

.content1 {
  grid-area: content1;
}

.content2 {
  grid-area: content2;
}

.content3 {
  grid-area: content3;
}

.left-footer {
  grid-area: left-footer;
}

.mid-footer {
  grid-area: mid-footer;
}

.right-footer {
  grid-area: right-footer;
}

#footer {
  grid-area: footer;
}

#main {
  grid-area: main;
}

a {
  color: var(--white);
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}