/*
// ===================================================================================================
// ## navbar css
// =================================================================================================== 
*/

/* ids */

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

    width: 100%; height: fit-content; 
    display: flex; justify-content: space-between; align-items: center;
    padding-inline: 30px; padding-block: 5px;
    /* background-color: var(--osso-light);  */
    background-color: var(--osso); 
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--white-2);
    box-sizing: border-box;
}

#navbar-logo {
    width: 45px; height: auto;
}
#navbar-logo-title {
    font-family: var(--redhat);
    font-size: var(--h4o3);
    font-weight: var(--bold);
    color: var(--terra);
}

#navbar a {
    text-decoration: none;
}

/* class */

.navbar-list {
    display: flex; justify-content: start; align-items: center;
    gap: 15px;
}

.navbar-link {
    min-height: 34px;
    display: flex; justify-content: start; align-items: center;
    gap: 8px; padding: 5px 10px; 
    box-sizing: border-box; border-radius: 4px;

    font-family: var(--redhat);
    font-size: var(--h5);
    font-weight: var(--normal);
    color: var(--black);
}
.navbar-link:hover {
    cursor: pointer;
    background-color: var(--panna);
}

.navbar-link .lucide {
    width: 1.8cap;
    color: var(--gray);
}
.navbar-link:hover .lucide {
    color: var(--black);
}