: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;
    row-gap: 5px;
    grid-template: 1fr 0.5fr 0.5fr 0.5fr / 1fr;
    grid-template-areas:
      "content1"
      "content2"
      "content3"
      "content4";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  .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: 25px 25px;
    text-align: center;
  }
  .content4 {
    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-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;
  }
  .content3 ul, .content4 ul {
    padding: 0;
  }
}

@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;
    row-gap: 5px;
    grid-template: 0.8fr 1fr 0.4fr 0.43fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content2 content2"
      "content3 content3 content3 content3 content3 content3"
      "content4 content4 content4 content4 content4 content4";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 25px 25px;
    text-align: center;
  }
  .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: 25px 25px;
    text-align: center;
  }
  .content4 {
    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;
  }
  .content3 h2 {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    float: left;
    margin: 5.4% 0 0 25%;
    color: var(--green);
  }
  .content4 h2 {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    float: left;
    margin: 1% 0 0 25%;
    color: var(--green);
  }
}

@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;
    row-gap: 5px;
    grid-template: 1fr 0.5fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content1 content2 content2 content2"
      "content3 content3 content3 content4 content4 content4";
  }
  .content1 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 20px 25px;
    padding-top: 5%;
    text-align: center;
  }
  .content2 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 20px 25px;
    text-align: center;
  }
  .content3 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 20px 25px;
    text-align: center;
  }
  .content4 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 20px 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;
  }
  .content3 h2 {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    float: left;
    margin: 5% 0 0 10%;
    color: var(--green);
  }
  
  .content4 h2 {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    float: left;
    margin: 2% 0 0 10%;
    color: var(--green);
  }
}

th { 
  color: var(--green);
  font-size: 18.5px;
  font-weight: bolder;
  font-style: oblique;
  vertical-align: middle !important;
} 

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

td ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content3 h2, .content4 h2 {
  color: var(--green);
}

.content3 li, .content4 li {
  list-style: none;
  color: #000000;
}

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

.content4 {
  grid-area: content4;
}

.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;
}
#box {
  margin: 0 auto;
  width: 60%;
  box-shadow: 0 1px 5px var(--imageShadow);
  filter: brightness(80%);
  border-radius: 50% 0 50% 0;
}

#box:hover {
  transform: translateY(2px);
}

h1 {
  margin-top: 0.8em;
  padding-bottom: 0.3em;
  color: var(--green);
  border-bottom: var(--green) solid 2px;
}

.fa-download {
  margin-top: 0.1em;
  color: var(--green);
  font-size: 50px;
}

.fa-download:hover {
  transform: translateY(2px);
}