: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.4fr 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);
    text-align: center;
  }
  .content3 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    padding: 5px 5px;
    text-align: center;
    display: grid;
    gap: 1px;
    grid-template-rows: 1fr 0.6fr 0.1fr;
    grid-template-areas: 
    "contactImg" 
    "contactText" 
    "contact";
  }
  .contact {
    display: grid;
    grid-template: repeat(3, 25%) / 40% auto;
    grid-template-areas: 
    "phone phonenumber"
    "email emailtext"
    "address addresstext";
  }
  .phone, .phoneNumber, .email, .emailText, .address, .addressText {
    width: max-content;
    height: max-content;
  }
  .phone h3, .email h3, .address h3 {
    text-align: right;
    margin: 0 0 0 2.3em;  
    width: max-content;
    height: max-content;
  }
  .phoneNumber p, .emailText p, .addressText p {
    margin-top: 0.2em; 
    text-decoration: underline;
    width: max-content;
    height: max-content;
  }
  .contactText {
    height: max-content;
  }
  .contactImage img {
    width: 50%;
    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.27fr 1fr 0.3fr / 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-top: 18px;
  }
  .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;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
    "contactImg contactText contact";
  }
  .contact {
    display: grid;
    grid-template: repeat(3, 1fr) / 40% auto;
    grid-template-areas: 
    "phone phonenumber"
    "email emailtext"
    "address addresstext";
  }
  .phone, .phoneNumber, .email, .emailText, .address, .addressText {
    position: relative;
    width: max-content;
    height: max-content;
  }
  .phone h3, .email h3, .address h3 {
    text-align: right;
    margin: 0 0 0 2.3em;  
    width: max-content;
    height: max-content;
  }
  .phoneNumber p, .emailText p, .addressText p {
    margin-top: 0.2em; 
    text-decoration: underline;
    width: max-content;
    height: max-content;
  }
  .phone, .phoneNumber {
    top: 85%;
  }
  .email, .emailText {
    top: 40%;
  }
  .contactImage {
    padding-top: 1em;
  }
  .contactText {
    padding-top: 30%;
  }
  .contactImage 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(4, 1fr);
    grid-template-areas: "first second third fourth";
  }
  #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.8fr 1fr 1fr 1fr / repeat(6, 1fr);
    grid-template-areas:
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content3 content3"
      "content2 content2 content2 content2 content3 content3"
      "content2 content2 content2 content2 content3 content3";
  }
  .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;
  }
  .content3 {
    background-color: var(--white);
    box-shadow: 0 1px 5px var(--shadow);
    display: grid;
    gap: 1px;
    grid-template: repeat(3, 1fr) / repeat(2, 1fr);
    grid-template-areas: 
    "contact contact"
    "contactImg contactText"
    "contactImg contactText";
  }
  .contact {
    display: grid;
    grid-template: repeat(2, 1fr) / 40% auto;
    grid-template-areas: 
    "phone phonenumber"
    "email emailtext"
    "address addresstext";
  }
  .phone, .phoneNumber, .email, .emailText, .address, .addressText {
    width: max-content;
  }

  .phone h3, .email h3, .address h3 {
    text-align: right;
    margin: 0 0 0 2.3em;  
  }
  
  .phoneNumber p, .emailText p, .addressText p {
    margin-top: 0.2em; 
    text-decoration: underline;
  }

  .contactImage {
    padding-top: 1em;
  }

  .contactText {
    padding-top: 30%;
  }

  .contactImage img {
    width: 80%;
    height: auto;
  }

  #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";
  }
  .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: #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;
}

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

.contact {
  grid-area: contact;
}

.contactImage {
  grid-area: contactImg;
}

.contactText {
  grid-area: contactText;
}

.phone {
  grid-area: phone;
}

.phoneNumber {
  grid-area: phonenumber;
}

.email {
  grid-area: email;
}

.emailText {
  grid-area: emailtext;
}

.address {
  grid-area: address;
}

.addressText {
  grid-area: addresstext;
}