: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:
      "slideshow"
      "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;
  }
  #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";
  }
  .mySlides {
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 1px 5px var(--imageShadow);
    filter: brightness(90%);
  }
  .logo {
    margin: 2em;
    width: 85%;
    height: auto;
  }
  .contentText {
    color: black;
  }
  .contentimg {
    width: 100%;
    height: auto;
    max-height: 250px;
    max-width: 155px;
    margin-right: 10px;
    float: left;
  }
  .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: auto 1fr / repeat(6, 1fr);
    grid-template-areas:
      "slideshow slideshow slideshow slideshow slideshow slideshow"
      "content2 content2 content2 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;
  }
  #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";
  }
  .mySlides {
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 1px 5px var(--imageShadow);
    filter: brightness(90%);
  }
  .logo {
    margin: 2em;
    width: auto;
    height: 60%;
  }
  .contentText {
    color: black;
  }
  .contentimg {
    width: 100%;
    height: auto;
    max-height: 250px;
    max-width: 155px;
    margin-right: 10px;
    float: left;
  }
  .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 / repeat(6, 1fr);
    grid-template-areas:
      "slideshow slideshow slideshow slideshow content2 content2"
      "slideshow slideshow slideshow slideshow 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;
  }
  #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";
  }
  .mySlides {
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 1px 5px var(--imageShadow);
    filter: brightness(90%);
  }
  .logo {
    margin: 2em;
    width: auto;
    height: 60%;
  }
  .contentText {
    color: black;
  }
  .contentimg {
    width: 30%;
    height: auto;
    max-height: 250px;
    max-width: 155px;
    margin-right: 10px;
    float: left;
  }
  .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;
  }
}

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

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

#alesunLink {
  color: var(--green);
  font-weight: bolder;
  
}