: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: auto 1fr 1fr / 1fr;
    grid-template-areas:
      "content1"
      "content2"
      "content2";
  }
  .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: 5px 5px;
    text-align: center;
  }
  #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: 1fr 1fr 1fr 1fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content2 content2"
      "content2 content2 content2 content2 content2 content2"
      "content2 content2 content2 content2 content2 content2";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding-top: 28px;
  }
  .content2 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  #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 1fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content2 content2"
      "content2 content2 content2 content2 content2 content2"
      "content2 content2 content2 content2 content2 content2";

  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding-top: 30px;
  }
  .content2 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  #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;
}

th, td:first-child {
  color: var(--green);
  font-size: 20px;
  font-weight: bolder;
  font-style: oblique;
}

td {
  color: #000000;
  font-size: 20px;
}

.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;
}

.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;
}

.table td, .table th {
  padding: 0;
  vertical-align: none;
  border-top: none;
}