.nav-bar {
    background-color: var(--main-color);
    display: flex;
}

.nav-bar-items a {
    border-right: 3px solid var(--text-color-tint);
    border-right: 2.5px solid #cee7eb;
}

.nav-bar a {
    color: var(--text-color-tint);
    color: #cee7eb;
    font-size: 1.8rem;
    text-decoration: none;
    background-color: inherit;
    margin-right: 1rem;
    padding-right: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: underline transparent;
    text-underline-offset: 0.5rem;
    transition: all 0.3s;
}
.nav-bar a:hover {
    color: #fff;
    text-decoration: underline 2px;
    text-underline-offset: 0.5rem;
}
.nav-link-active {
    color: #fff !important;
    text-decoration: underline 2px !important;
    text-underline-offset: 0.5rem !important;
}
.nab-bar-title {
    padding: 1rem;
    background-color: inherit;
    width: 20%;
    display: flex;
    justify-content: space-around;
    background-color: var(--text-color);
}

.nav-bar-items {
    /* overflow-x: scroll; */
    white-space: nowrap;
    padding: 1rem;
    background-color: inherit;
}

.nav-bar-items::-webkit-scrollbar {
    /* display: none; */
}