#navbar{
    position: fixed; top: 0;
    z-index: 999999;

    width: 100%; height: 60px;
    display: flex; align-items: center;
    
    background-color: var(--bg-primary);
    box-shadow: 0 0 5px var(--bg-secondary);

    font-size: clamp(16px, 2vw, 24px);

    ul{
        display: flex; 
        justify-content: space-between; align-items: center;

        width: 100%; height: 60px;
        li{
            padding: 0px 20px;
        }
        ul{
            li{
                position: relative;
                height: 60px;
                display: flex; 
                align-items: center;
            }
        }
    }
    .hidden-link{
        position: absolute;
        bottom: 0px; left: 50%;
        transform: translateX(-50%) translateY(100%);

        font-size: clamp(10px, 2vw, 18px);
        background-color: var(--bg-primary); 
        box-shadow: 0 2px 5px -2px var(--bg-secondary);
        padding: 10px;

        opacity: 0; visibility: hidden;
        transition: opacity .3s ease;
    }
}

#navbar .active-hidden-link:hover > .hidden-link{
    opacity: 1; visibility: visible;
}
#navbar .hidden-link:hover{
    opacity: 1; visibility: visible;
}
.current-page{
    text-decoration: underline 1px solid var(--bg-secondary);
}

.menu-btn{
    visibility: hidden;
    opacity: 0;

    position: relative;

    min-width: 60px; max-width: 120px;
    width: 4vw; height: 40px;
}

.upper-layer,
.lower-layer{
    position: absolute;
    top: 50%; left: 50%;

    width: 90%; height: 3px;
    background-color: var(--txt-color-primary);
    
    transition: transform .4s ease, background-color .4s ease;
    transform: translateX(-50%) translateY(var(--start-posX-menuBtn)) rotate(0);
}
.upper-layer{
    --start-posX-menuBtn: 8px;
    --angle-rotation-menubtn: 15deg;
}
.lower-layer{
    --start-posX-menuBtn: -8px;
    --angle-rotation-menubtn: -15deg;
}

.hidden-nav-menu{
    visibility: hidden;
    opacity: 0;
    z-index: 999;

    position: fixed;
    top: 0;
    width: 100%; height: 100%;

    display: flex;
    justify-content: center; align-items: center;

    background-color: var(--bg-tertiary);

    transition: opacity .3s ease;
}
.hidden-navlist{
    text-align: center;
    li ul li{
        padding-block: 10px;
        a{
            color: var(--description-color);
        }
    }
}


.menuBtn-open{
    transform: translateX(-50%) translateY(-50%) rotate(var(--angle-rotation-menubtn));
    background-color: var(--bg-tertiary);
}
.visible{
    visibility: visible;
    opacity: 1;
}


@media screen and (max-width: 950px) {
    .menu-btn{
        visibility: visible;
        opacity: 1;
    }
    .left-box ul li:nth-child(2),
    .left-box ul li:nth-child(3),
    .left-box ul li:nth-child(4){
        display: none !important;
    }
}