* {
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Abel', sans-serif;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: #635242;
}

.container {
  margin: 0 auto;
  width: 100vw;
  max-width: 100%;
  min-height: 100vh;
  scroll-snap-type: y mandatory;
}

nav {
  overflow: hidden;
  text-transform: uppercase;
  background-color: #fcfaf1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 8vh;
  z-index: 99;
}

.nav-content-wrapper {
  width: 70%;
  height: 100%;
  display: flex;
  margin: auto;
}

nav img {
  max-width: 55px;
}

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  width: 30%;
  margin: auto;
}

/* JUMBOTRON */
.jumbotron {
  scroll-snap-align: start;
  background-image: url("./images/background.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.jumbotron-content-wrapper {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.jumbotron-content-wrapper > h1 {
  font-size: 7rem;
  letter-spacing: 12px;
}

.jumbotron-content-wrapper > h4 {
  font-size: 1.5rem;
}

/* ABOUT US */
.about-us-section {
  scroll-snap-align: start;
  background-color: #fcfaf1;
  position: relative;
}

.about-us-content-wrapper {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #635242;
}

.about-us-content-wrapper h1 {
  font-size: 3.5rem;
}

.about-us-content-wrapper p {
  font-size: 1.5rem;
  margin: 32px 0;
}

/* LEARN MORE */
.learn-more-section {
  scroll-snap-align: start;
  background-image: linear-gradient(
      to bottom,
      rgba(141, 205, 223, 0.7) 100%,
      rgba(141, 205, 223, 0.8)
    ),
    url("./images/learn-more-bg.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.learn-more-content-wrapper {
  display: flex;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #635242;
}

.muscle-cream-img {
  width: 25%;
}

.learn-text-wrapper {
  width: 70%;
  text-align: start;
  margin-left: 80px;
  margin-top: auto;
  margin-bottom: auto;
  color: white;
}

.learn-text-wrapper h1 {
  font-size: 3.5rem;
}

.learn-text-wrapper p {
  font-size: 1.5rem;
  margin: 32px 0;
}

/* CONTACT US SECTION */
.contact-us-section {
  scroll-snap-align: start;
  background-color: #fcfaf1;
  position: relative;
}

.contact-us-content-wrapper {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #635242;
}

.contact-us-content-wrapper h1 {
  font-size: 3.5rem;
}

.contact-us-content-wrapper p {
  font-size: 1.5rem;
  margin: 32px 0;
}

.contact-us {
  margin: 75px 0 !important;
}

.contact-us-content-wrapper img {
  width: 65%;  
}

/* Footer */
footer {
  height: 8vh;
  text-align: center;
  background-color: #8dcddf;
  color: white;
  position: relative;
}

footer p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* RESPONSIVE */
@media only screen and (max-device-width: 1024px) {
  ul {
    width: 100%;
  }

  .learn-more-content-wrapper {
    width: 90%;
  }
}

@media only screen and (max-device-width: 710px) {
  .jumbotron-content-wrapper > h1 {
    font-size: 4rem;
  }
  
  .jumbotron-content-wrapper > h4 {
    font-size: 1.5rem;
  }

  .about-us-content-wrapper {
    width: 80%;
  }

  .about-us-content-wrapper h1 {
    font-size: 2.5rem;
  }
  
  .about-us-content-wrapper p {
    font-size: 1rem;
    margin: 32px 0;
  }

  .learn-text-wrapper h1 {
    font-size: 1.5rem;
  }
  
  .learn-text-wrapper p {
    font-size: 1rem;
    margin: 32px 0;
  }

  .contact-us-content-wrapper {
    width: 80%;
  }

  .contact-us-content-wrapper h1 {
    font-size: 1.5rem;
  }
  
  .contact-us-content-wrapper p {
    font-size: 1rem;
    margin: 32px 0;
  }

  .contact-us-content-wrapper img {
    width: 85%;  
  }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 915px) 
  and (orientation: landscape) { 
    .jumbotron-content-wrapper > h1 {
      font-size: 4rem;
    }
    
    .jumbotron-content-wrapper > h4 {
      font-size: 1.5rem;
    }
  
    .about-us-content-wrapper {
      width: 80%;
    }
  
    .about-us-content-wrapper h1 {
      font-size: 2.5rem;
    }
    
    .about-us-content-wrapper p {
      font-size: 1rem;
      margin: 32px 0;
    }
  
    .learn-text-wrapper h1 {
      font-size: 1.5rem;
    }
    
    .learn-text-wrapper p {
      font-size: 1rem;
      margin: 32px 0;
    }

    .muscle-cream-img {
      width: 10%;
    }
  
    .contact-us-content-wrapper {
      width: 80%;
    }
  
    .contact-us-content-wrapper h1 {
      font-size: 1.5rem;
      margin-top: 75px;
    }
    
    .contact-us-content-wrapper p {
      font-size: 1rem;
      margin: 15px 0;
    }
  
    .contact-us-content-wrapper img {
      width: 35%;  
    }

    footer {
        height: 10vh;
    }
}