.navbar-toggle {
    display: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.navbar-toggle-line {
    width: 2rem;
    height: 0.2rem;
}

.light-mode .navbar-toggle-line {
    background: black;
}

.dark-mode .navbar-toggle-line {
    background: white;
}

.navbar-links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; /*Uncomment to make link-banner links evenly spaced out*/
    gap: 3ch;
    font-weight: bold;
}

.navbar-links a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
}

.link-banner a.active {
    text-decoration: none;
    font-weight: bold;
    color: black;
}

.link-banner nav a:hover {
    color: black;
}

.navbar-divider {
    width: 100%;
    border: none;
    border-top: 1px solid rgba(211, 211, 211, 0.8);
    margin: 3px auto;
    display: none;
}

@media (max-width: 500px) {
    .navbar-links {
        display: none;
        flex-direction: column;
    }

    .navbar-toggle {
        display: flex;
    }

    .navbar-divider {
        display: block; /* Show divider in mobile view */
    }
}

.navbar-links.show {
    display: flex;
    gap: 1ch;
}

@media (max-width: 450px) {
    .link-banner nav a {
        font-size: 15px;
    }
}