@import "variables/variables.css";

.nav-item.dropdown a:hover {
    background-color: var(--gray-700);
    color: var(--white);
}

/* Override bootstrap style to match custom theme */
.btn-outline-secondary {
    color: var(--gray-300);
    border-color: var(--gray-300)
}

/* Override bootstrap style to match custom theme */
.btn-outline-secondary:hover {
    color: var(--white);
    background-color: var(--gray-700);
    border-color: var(--gray-700)
}

/* For devices smaller than 767px */
/* MOBILES - override bootstrap style to match custom theme */
@media (max-width: 767px) {
    .navbar-collapse {
        background-color: var(--gray-800);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 1;
    }

    .navbar-toggler__position {
        position: absolute;
        top: 8px;
        left: 16px;
    }

    /*.navbar-toggler,
    .navbar-brand {
        z-index: 1;
    }*/

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-brand {
        font-size: 1.8em;
        letter-spacing: 2px;
        margin-right: 0;
    }

    .navbar-collapse .nav-link {
        font-size: 1.5em;
        letter-spacing: 2px;
    }

    .navbar-collapse .nav-item:not(:last-child) {
        border-bottom: 1px solid darkgray;
        padding: 0.2em 3em;
    }

    /*.navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link:active {
        color: darkseagreen;
    }*/

    .navbar-collapse.show {
        transition: all 0.5s;
    }

    .mr-auto {
        margin-right: unset !important;
    }

    @media screen and (min-width: 576px) {
        .navbar-collapse .nav-item:not(:last-child) {
            padding: 0.4em 7em;
        }
    }
}