:root {
    --navbar-title-color: #ba4024;
    --navbar-text-glow-color: #e27a62;

    --navbar-link-text-color: #00bfff;
    --navbar-link-text-glow-color: #75d1ef;
}


#main-navbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-height: 1rem;
    margin: 0.5rem 0.5rem;
    position: fixed;
}

#main-navbar #navbar-title {
    color: var(--navbar-title-color);
    text-shadow: 0px 0px var(--default-text-glow-radius) var(--navbar-text-glow-color); 
}

#main-navbar nav > ul {
    display: flex;
    list-style-type: none;
    padding: 0px;
}

#main-navbar nav > ul > li.active-link {
    display: none;
}

#main-navbar nav > ul > li:not(:first-child)::before {
    content: "\00a0|";
}

#main-navbar nav > ul > li > a {
    color: var(--navbar-link-text-color);
    text-shadow: 0px 0px var(--default-text-glow-radius) var(--navbar-link-text-glow-color);
    transition: filter 200ms ease-in;
}

#main-navbar nav > ul > li > a:hover {
    filter: brightness(150%);
}