@import 'values.css';

#navbar {
    background-color: var(--bg-color);
    user-select: none;
}

.navbar-anchor,
#menu-toggler {
    color: #fff;
    display: block;
    padding: 1em;
}

.navbar-anchor:hover,
#menu-toggler:hover {
    color: var(--link-color);
}

#navbar-anchors,
#navbar {
    align-items: center;
    display: flex;
    list-style-type: none;
}

#menu-toggler {
    border: none;
    background-color: transparent;
    border-top: 1px solid var(--link-color);
    display: none;
}

@media (max-width: 768px) {
    .navbar-anchor {
        padding: 0.5em;
    }

    #navbar-anchors,
    #navbar {
        flex-direction: column;
    }

    #menu-toggler {
        display: block;
    }
}

#navbar-logo {
    font-weight: bold;
}