/*
 *
 * CSS written based on SMACSS architecture.
 * To learn more, visit: http://smacss.com/
 * 
 * For simplicity, no reset or normalize is added. 
 * To learn more, visit: https://css-tricks.com/reboot-resets-reasoning/
 *
*/

/* ---- Base Rules ---- */
/* html {
  scroll-behavior: smooth;
} */

body {
    background: rgb(136, 203, 171);
    background: linear-gradient(
      0deg,
      rgba(136, 203, 171, 1) 0%,
      rgba(0, 13, 60, 1) 100%
    );
    margin: 0;
    font-family: 'Merriweather', serif;
    color: #fff;

  }
 
  
  /* Typeography General*/
  h1 {
    font-family: 'Fira Sans', sans-serif;
    font-size: 3em;
    margin: 2em 1rem;
  }
  
  @media only screen and (min-width: 35em) {
    h1 {
      font-size: 7em;
      margin: 2em 4rem 1em;
    }
  }
  
  h2 {
    border-bottom: 1px solid #cc1;
    font-family: 'Oxygen', Sans-Serif;
    font-size: 3em;
    color: #fff;
  }
  
  p {
    line-height: 1.6em;
    color: #eee;
  }
  
  /* ---- Layout Rules ---- */
  main {
    margin: 10vh 1em 10vh;
  }
  
  .main-hero {
    min-height: 40vh;
    padding-top: 3em;
  }
  
  section {
    position: relative;
    min-height: 80vh;
  }
  
  /* ---- Module Rules ---- */
  
  /* Navigation Styles*/
  #food {
    background: rgb(9, 55, 56);
    width: auto;
    height: 60px;
    padding: 1% 1% 1%;
    font-size: 40px;
   
  }
  .navbar__menu ul {
    padding-left: 0;
    margin: 0;
    text-align: right;
    background: rgb(15, 76, 78);
  }
  
  .navbar__menu li {
    display: inline-block;
  }
  
  .navbar__menu .menu__link {
    display: block;
    padding: 1em;
    font-weight: bold;
    text-decoration: none;
    color: rgba(238, 238, 238, 0.938);
  }
  
  .navbar__menu .menu__link:hover {
    background: rgba(51, 51, 51, 0.973);
    color: rgba(255, 255, 255, 0.63);
    transition: ease 0.3s all;
  }
  
  .navbar__menu .menu__link__active {
    background: rgba(255, 255, 255, 0.959);
    color: rgba(0, 0, 0, 0.938);
    /* border-radius: 1rem; */
  }
  
  /* Start of Responsive Navbar */
  #integrate {
    display: none;
  }
  
  @media screen and (max-width: 768px) {
    .mobile__nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
  
    .toggle-show {
      display: none;
    }
  
    #integrate {
      display: block;
      cursor: pointer;
      position: absolute;
      top: 1rem;
      right: 0;
      left: 0;
      transition: all 0.5s ease-in;
      z-index: 1000;
    }
  
    .bar {
      margin: 0.45rem 1rem 0.45rem auto;
      height: 4px;
      width: 32px;
      border-radius: 1rem;
      background: rgb(255, 255, 255);
    }
  }
  /* End of Responsive Navbar */
  
  /* Header Styles */
  .page__header {
    background: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
  }
  
  /* Footer Styles */
  .page__footer {
    background: #000;
    padding: 3em;
    color: #fff;
  }
  
  .page__footer p {
    color: #fff;
  }
  
  /* ---- Theme Rules ---- */
  /* Landing Container Styles */
  .landing__container {
    padding: 1em;
    text-align: left;
  }
  
  @media only screen and (min-width: 35em) {
    .landing__container {
      max-width: 50em;
      padding: 4em;
    }
  }
  
  section:nth-of-type(even) .landing__container {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
  }
  
  /* Background Circles */
  /* Note that background circles are created with psuedo elements before and after */
  /* Circles appear to be random do to use of :nth-of-type psuedo class */
  section:nth-of-type(odd) .landing__container::before {
    content: '';
    background: rgba(255, 255, 255, 0.187);
    position: absolute;
    z-index: -5;
    width: 20vh;
    height: 20vh;
    border-radius: 50%;
    opacity: 0;
    transition: ease 0.5s all;
  }
  
  section:nth-of-type(even) .landing__container::before {
    content: '';
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
    position: absolute;
    top: 3em;
    right: 3em;
    z-index: -5;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    opacity: 0;
    transition: ease 0.5s all;
  }
  
  section:nth-of-type(3n) .landing__container::after {
    content: '';
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -5;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    opacity: 0;
    transition: ease 0.5s all;
  }
  
  section:nth-of-type(3n + 1) .landing__container::after {
    content: '';
    background: rgb(255, 255, 255);
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
    position: absolute;
    right: 20vw;
    bottom: -5em;
    z-index: -5;
    width: 15vh;
    height: 15vh;
    border-radius: 50%;
    opacity: 0;
    transition: ease 0.5s all;
  }
  
  /* ---- Theme State Rules ---- */
  /* Section Active Styles */
  /* Note: your-active-class class is applied through javascript. You should update the class here and in the index.html to what you set in your javascript file.  */
  section.your-active-class {
    background: rgb(0, 0, 0);
    background: linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.5) 100%
    );
    border-radius: 1rem;
  }
  
  section.your-active-class .landing__container::before {
    opacity: 1;
    animation: rotate 4s linear 0s infinite forwards;
  }
  
  section.your-active-class .landing__container::after {
    opacity: 1;
    animation: rotate 5s linear 0s infinite forwards reverse;
  }
  
  /* Section Active Styles Keyframe Animations */
  @keyframes rotate {
    from {
      transform: rotate(0deg) translate(-1em) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translate(-1em) rotate(-360deg);
    }
  }
  
  /* Scroll to top button */
  .scroll-top {
    background-color: #fff;
    display: none;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 1rem;
    position: fixed;
    bottom: 1.5rem;
    right: 5rem;
  }
  
  .scroll-top-link {
    font-size: 2rem;
    text-decoration: none;
    color: #000;
  }
  
  @media screen and (max-width: 768px) {
    .scroll-top {
      right: 2.5rem;
    }
  }
  
  @media screen and (max-width: 425px) {
    .scroll-top {
      right: 1rem;
      width: 35px;
      height: 35px;
    }
  
    .scroll-top-link {
      font-size: 1.7rem;
    }
  }