nav
{
    

    background-color: rgb(from var(--primary-accent) r g b / 75%);
    ;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    height: auto;
    overflow: hidden;
    transition: all 0.3s ease-in-out;

    margin: -10px;
    margin-bottom: 0px;
    gap: 5px;
    z-index: 100;
    top: 10px;
    position: sticky;
    
    box-sizing: border-box;
    text-align: center;
    
    display: flex;
    
    padding: 12px;

    border-radius: var(--primary-radius);
    scroll-behavior: smooth;

    
}

nav a, nav label
{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;    
    padding: 10px /*15px*/;
    border-radius: var(--secondary-radius);
    align-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease-in-out;
    outline: hsla(0, 0%, 100%, 0) solid 0px;
}


nav a:hover , nav label:hover, nav a:focus, nav label:focus

{
  color: var(--primary-accent);

  background: white;
    outline: white solid 5px;
    /* transform: scale(1.05); */
svg
{
    
    fill : var(--primary-accent);
    stroke: var(--primary-accent);
}
}
svg
{
    transition: all 0.3s ease-in-out;
    height: 23px;
  fill: white;
  color: white;
  stroke: white;

}

nav a img, nav .icon
{  
    height: 15px;
    filter: drop-shadow(var(--primary-shadow));
}

.hamburger
{
    display: none;
    
}

nav .right
{
    margin-left: auto;
}

@media screen and (max-width: 500px)
{
    .menu
    {
        display: none;
    }
    .hamburger
    {
        display: flex;
    }

    nav .logo
    {
        flex: 1;
    }
    .menu.show
    {
        display: flex;
    }

    nav 
    {
        flex-direction: column;
        
    max-height: 67px;
        /*padding: 7px 12px;*/
    
    }
    #menu-toggle:checked ~ nav
    {
        max-height: 150px;
    }
    #menu-toggle:not(:checked) ~ nav > a
    {
        pointer-events: none;
        cursor: none;

    }

    nav .right
    {
        margin-left: unset;
    }
    
}