#navbar {
    user-select: none;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: hsla(0, 0%, 100%, 0.16);
    position: relative;
    z-index: 1000;
}

#navbar li { margin: 0; padding: 0; }
#navbar::after { content: ""; display: table; clear: both; }

#rightNav, #navbar #menu {
    float: right;
    display: block;
    text-align: center;
    padding: 13px 16px;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1;
}

#rightNav { padding: 14px 16px; }
#navbar #menu { color: hsla(0, 0%, 100%, 0.90); }

#leftNav {
    float: left;
    display: block;
    color: hsla(0, 0%, 100%, 0.90);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    box-sizing: border-box; 
    line-height: 1;
    margin: 0;
}

#leftNav:hover { background-color: hsl(0, 0%, 15%); }
#leftNav:active, .navLink.active { background-color: hsl(0, 0%, 8%); }

.theme-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    color: hsla(0, 0%, 100%, 0.90);
}
.theme-button:hover { background-color: hsl(0, 0%, 15%); }
.theme-button:active { background-color: hsl(0, 0%, 8%); }

.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    color: hsla(0, 0%, 100%, 0.90);
    line-height: 1;
    display: block;
}

.menu-clip {
    position: absolute;
    right: 0;
    top: 100%;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    filter: drop-shadow(2px 8px 16px hsla(0, 0%, 0%, 0.5));
    clip-path: inset(0px -100px -100px -100px);
}

.menu-clip.show { grid-template-rows: 1fr; opacity: 1; }

.menu-content {
    display: block;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: hsl(0, 0%, 12%); 
    border: 1px solid hsla(0, 0%, 100%, 0.1); 
    border-top: none;
    min-width: 160px;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom-left-radius: 8px;
    overflow: hidden;
    min-height: 0;
}

.menu-entry { padding: 0; }
.menu-entry a {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;
}
.menu-entry:hover { background-color: hsl(0, 0%, 15%); }
.menu-entry:active { background-color: hsl(0, 0%, 8%); }

#navbar #menu:has(.menu-button:hover) { background-color: hsl(0, 0%, 15%); }
#navbar #menu:has(.menu-button:active) { background-color: hsl(0, 0%, 8%); }