:root {
    --nav-bar-background-color: #f6f7f8; /* very light grey */
    --nav-bar-link-text-color: black;
    --nav-menu-link-background-color: white;
    --nav-menu-link-hover-background-color: rgba(255, 255, 255, 0.5);
}
[theme="dark"] {
    --nav-bar-background-color: #222222; /* dark grey */
    --nav-bar-link-text-color: white;
    --nav-menu-link-background-color: black;
    --nav-menu-link-hover-background-color: rgba(0, 0, 0, 0.5);
}

/* Custom font for icons */
@font-face {
    font-family: Icons;
    src: url(../fonts/open-iconic.eot);
    src: url(../fonts/open-iconic.eot?#iconic-sm) format('embedded-opentype'), url(../fonts/open-iconic.woff) format('woff'), url(../fonts/open-iconic.ttf) format('truetype'), url(../fonts/open-iconic.otf) format('opentype'), url(../fonts/open-iconic.svg#iconic-sm) format('svg');
    font-weight: 400;
    font-style: normal
}

/* Top left site name */
.nav-bar-top-row {
    background-color: lightgreen;
    height: 3.5rem;
    align-content: center;
    /* Keep visible when scrolling trough RSS items on big screen. */
    position: sticky;
}

@media screen and (min-width: 640px) {
    .nav-bar-top-row {
        width: 200px;
        background-color: lightgreen;
        height: 3.5rem;
        align-content: center;
        position: sticky;
        top: 0;
    }
}
    /* Site name (<a> element) should be white and not underlined */
    .nav-bar-top-row a {
        font-size: 1.1rem;
        color: white;
        text-decoration: none;
        padding-right: 1rem;
    }

/* User icon on the top bar, on the left of the logged in user name */
.top-bar-user-icon {
    font-family: Icons;
    padding-right: 0.1rem;
}
    .top-bar-user-icon:before {
        content: '\e0A5'
    } 
    
.nav-bar {
    background-color: var(--nav-bar-background-color);
    box-sizing: border-box;
}

/* Hide/collapse the navigation bar by default, and show the toggler (hamburger) menu */
.nav-scrollable {
    display: none;
}
.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

/* Show the navigation bar always on wide screens, and hide the toggler (hamburger) menu */
@media (min-width: 640px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {
        width: 200px;
        background-color: var(--nav-bar-background-color);
        /* Never collapse the sidebar for wide screens */
        display: block;
        /* Never scroll, even if a lot of RSS items on the page*/
        position: fixed;
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* This "nav-menu-link" contains both the icon, the link text, as the unread-counter. */
.nav-menu-link {
    display: flex;
    width: 100%;
    font-size: 0.9rem;
    color: var(--nav-bar-link-text-color);
    text-decoration: none; /* no underline */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

    .nav-menu-link:hover {
        color: var(--nav-bar-link-text-color); /* do not change to blue as default for <a> elements */
        background-color: var(--nav-menu-link-hover-background-color)
    }

    /* When the page we're viewing matches this navigation item */
    .nav-menu-link.active {
        color: lightgreen;
        background-color: var(--nav-menu-link-background-color);
    }

    .nav-menu-link:hover:active {
        color: lightgreen;
        background-color: var(--nav-menu-link-background-color);
    }


/* The icon before every item */
.nav-menu-icon {
    font-family: Icons;
    width: 1.5rem;
}
    .nav-menu-icon:before {
        content: '\e087'
    }

/* The counter showing the number of unread items */
.nav-menu-counter {
    margin-left: auto;
    margin-right: 0;
}

/* Home link */
.nav-menu-icon-house {
    font-family: Icons;
    width: 1.5rem;
}
    .nav-menu-icon-house:before {
        content: '\e078'
    }

/* Login link */
.nav-menu-icon-login {
    font-family: Icons;
    width: 1.5rem;
}

    .nav-menu-icon-login:before {
        content: '\e0A5'
    }