.nav {
  display: flex;
  color: var(--nav-text-color);
  background-color: var(--nav-main-color);
  border-bottom: 4px solid var(--nav-secondary-color);

  .inner {
    display: flex;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;

    ul {
      list-style: none;
      display: flex;
      flex-direction: row;
      padding: 0;
      margin: 0;

      &.alignRight {
        margin-left: auto;
      }

      li {
        display: flex;

        &.active {
          font-weight: bold;

          a {
            background-color: var(--nav-secondary-color);
          }
        }

        a {
          color: inherit;
          text-decoration: none;
          padding: 1rem;
        }
      }
    }
  }
}