.nav-icon {
    width: 20px;
    height: 20px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0.3rem;
}

/*Navigation level 1 Admin */
.nav1-admin {
    background-color: var(--admin-color);
}

    .nav1-admin a {
        color: var(--navbar1-text-color);
    }

        .nav1-admin a:hover {
            background-color: var(--navbar-admin-hover-color);
        }

        .nav1-admin a.active-link {
            background-color: var(--navbar-admin-hover-color);
        }

        .nav1-admin a.login-link {
            background-color: var(--login-color);
        }

            .nav1-admin a.login-link:hover {
                background-color: var(--navbar-login-hover-color);
            }

        .nav1-admin a.admin-link {
            background-color: var(--navbar1-color);
        }

            .nav1-admin a.admin-link:hover {
                background-color: var(--navbar1-hover-color);
            }


/*Navigation level 1 */
.nav1 {
    background-color: var(--navbar1-color);
}

    .nav1 a {
        color: var(--navbar1-text-color);
    }

        .nav1 a:hover {
            background-color: var(--navbar1-hover-color);
        }

        .nav1 a.active-link {
            background-color: var(--navbar1-active-color);
        }

        .nav1 a.login-link {
            background-color: var(--login-color);
            border: none;
            ;
        }

            .nav1 a.login-link:hover {
                background-color: var(--navbar-login-hover-color);
            }

        .nav1 a.admin-link {
            background-color: var(--admin-color);
        }

            .nav1 a.admin-link:hover {
                background-color: var(--navbar-admin-hover-color);
            }


/*Navigation level 2 */
.nav2 {
    background-color: var(--navbar2-color);
}

    .nav2 a {
        color: var(--navbar2-text-color);
        border-right: var(--border-width) solid var(--navbar2-border-color);
    }

        .nav2 a:hover {
            background-color: var(--navbar2-hover-color);
        }

        .nav2 a.active-link {
            background-color: var(--navbar2-active-color);
        }

/*Navigation level 3 */
.nav3 {
    background-color: var(--navbar3-color);
}

    .nav3 a {
        color: var(--navbar3-text-color);
        border-right: var(--border-width) solid var(--navbar3-border-color);
    }

        .nav3 a:hover {
            background-color: var(--navbar3-hover-color);
        }

        .nav3 a.active-link {
            background-color: var(--navbar3-active-color);
        }

/*Navigation level 4 or more */
.nav4ormore {
    background-color: var(--dark-color);
}

    .nav4ormore a {
        color: var(--light-color);
    }

        .nav4ormore a:hover {
            color: var(--white-color);
            background-color: var(--grey-color);
        }

        .nav4ormore a.active-link {
            color: var(--light-color);
            background-color: var(--grey-color);
        }


nav {
    font-size: clamp(2.5rem, 5vw +.5rem, 7rem);
}

    nav ul {
        list-style: none;
        display: flex;
        width: 100%;
    }

    nav .home-li {
        margin-right: auto;
        font-weight: bold;
    }

    nav li {
        display: revert;
    }

    nav a {
        display: flex;
        text-decoration: none;
        padding: 1em 2em;
        transition: background-color 150ms ease;
        white-space: nowrap;
        height: 100%;
    }


.streakcontainer {
    color: var(--dark-text-color);
    background-color: var(--light-transparent-color);
    padding: 1em 2em;
    width: max-content;
    display: flex;
    border-radius: var(--border-radius-tags);
    margin: 1em 2px 1em 0px;
    border: 3px solid var(--white-color);
    box-shadow: 0 2px 20px var(--shadow-color);
}


#open-sidebar-button {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    margin-left: auto;
    cursor: pointer;
}

#close-sidebar-button {
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;
}

#overlay {
    background: var(--overlay-color);
    position: fixed;
    inset: 0;
    z-index: 8;
    display: none;
}




@media only screen and (max-width: 700px) {


    #open-sidebar-button, #close-sidebar-button {
        display: block;
    }

    nav {
        position: fixed;
        width: var(--menu-total-width); /* 100%;*/
        top: 0;
        right: -100%;
        height: 100vh;
        /*width: min(15em, 100%);*/
        z-index: 10;
        transition: right 300ms ease-out;
        display: flex;
        flex-direction: row-reverse;
    }

        nav.show {
            right: 0;
        }

            nav.show ~ #overlay {
                display: block;
            }

        nav ul {
            /*width: 100%;*/ /*var( --menu-width);*/ /* 33%;*/
            flex-direction: column;
            overflow-wrap: break-word;
            text-wrap-mode: wrap;
        }

        nav a {
            width: 100%;
            padding: 1em 1.0em;
            white-space: wrap;
        }


        nav .home-li {
            margin-right: unset;
        }

    .nav1 {
        width: var(--menu-width);
    }

    

    .nav2 {
        width: var(--menu-width);
    }

        .nav2 a {
            border-right-width: 0px;
            border-bottom: var(--border-width) solid var(--navbar2-border-color);
        }

    .nav3 {
        width: var(--menu-width);
    }

        .nav3 a {
            border-right-width: 0px;
            border-bottom: var(--border-width) solid var(--navbar3-border-color);
        }

    .nav4ormore {
        width: var(--menu-width);
    }


    .streakcontainer {
        text-align: center;
        width: 100%;
    }
}