.nav {
  transition: background-color .3s ease-in-out,border-color .3s ease-in-out;
  background-color: #000;
  border-bottom: 1px solid rgb(128, 0, 0);
  color: #FFF;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  font-family: "SFMoviePoster", system-ui, sans-serif;
  font-size: 2.8rem;

  nav {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;

    .header-logo img {
      height: 35px;
      display: inline-block;
    }

    .nav-links {
      list-style: none;
      display: flex;
      align-items: center;

      @media screen and (max-width: $breakpoint-sm) {
        display: none;
      }

      a {
        display: inline-block;
        text-decoration: none;

        li {
          margin: 0px 20px;
          color: #FFF;
          border-bottom: 1px solid transparent;

          &:hover,
          &.active {
            border-color: inherit;
            padding: 0px 0px;
          }
        }
      }
    }

    .nav-left {
      display: flex;

      .header-logo {
        margin-right: 20px;
      }
    }
  }
}

body.hero .nav {
  background-color: transparent;
  border-bottom: 1px solid transparent;

  a li {
    color: #FFF;
  }
}

body.hero.scroll .nav {
  background-color: #000;
  border-bottom: 1px solid rgb(128, 0, 0);

  .header-logo img {
    filter: none;
  }

  a li {
    color: #FFF;
  }
}