#mainNav {
    background-color: fade-out($secondary, 0.1);
    font-family: $headings-font-family;

    .navbar-brand {
        color: $primary;
    }

    .navbar-nav {
        .nav-item {
            .nav-link {
                color: fade-out($white, 0.3);

                font-weight: 800;
            }

            &.active {
                .nav-link {
                    color: $primary;
                }
            }
        }
    }

    @media (min-width: 992px) {
        .navbar-nav {
            .nav-item {
                .nav-link {
                    font-size: 0.9rem;

                    &:hover {
                        color: fade-out($white, 0.6);
                    }
                }

                &.active {
                    .nav-link:hover {
                        color: $primary;
                    }
                }
            }
        }
    }
}
