nav{
    background-color: var(--primary);
}

#navbar{
    position: fixed;
    display: flex;
    transition: top 0.4s; 
    top: 0;
    height: 3.5rem;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--primary-darker);
}


:root:has(#dark-mode:checked) nav {
    --primary: var(--background-alt);
    --primary-darker: var(--card-shadow-dark); /*#353547*/
}
.ps-nav-link {
    border-radius: 1rem;
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0rem 1rem;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.ps-nav-link:hover{
    background-color: var(--primary-darker);
}
.dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus {
    background-color: var(--primary-darker);
}

.rotondo{
    border-radius: 1rem;
    background-color: var(--primary);
    color: white;
}
.menu-links {
    height: 100%;
    display: flex;
    align-items: center;
    background: var(--primary);
}
.icona{
    display:none;
    height: 1rem;
 }
.dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}
.dropdown .dropdown-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 3.25rem;
    opacity: 0;
    padding: .75rem 0;
    pointer-events: none;
    transform: translate(0, -1rem);
    transition: all .1s ease-in-out;
}
.dropdown .dropdown-menu:has(.dropdown-lang) {
    padding: 0 0;
}
.dropdown .dropdown-menu::after{
    content: "";
    height: 1rem;
    background: none;
    width: 100%;
    position: absolute;
    top: -1rem;
}
.dropdown:hover .dropdown-menu {
    opacity: 1;
    pointer-events: all;
    transform: translate(0, 0);
}
.dropdown-item {
    padding: .5rem 1rem;
}
hr{
    border: none;
    height: 1px;
    background-color: white;

}

.dropdown-lang{
    max-height: 400px;
    overflow-y: overlay;
    padding: .75rem 0;
}

nav img, nav svg {
    height: 1.5rem;
}

.logo-extended {
    fill: var(--primary-darkmode);
}

:root:has(#dark-mode:checked) .logo-extended {
    fill: var(--primary-static);
}

.logo-extended .eye{
    transform-origin: 50% 60%;
}
.logo-extended:hover .eye{
    animation: blink 500ms linear 1 normal forwards
}
.logo-small {
    display: none;
}
.bnb-smart-chain {
    height: var(--button-small-height);
}
.bnb-smart-chain .menu-button {
    position: relative;
    display: flex;
    padding-left: 3rem;
    background: #EEF4FF;
}
.bnb-smart-chain .ps-nav-link{
    flex-direction: row;
}

.bnb-smart-chain .menu-button img{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.bnb-smart-chain .dropdown-title {
    border-bottom: 1px solid var(--primary-darker);
}
.bnb-smart-chain .dropdown-title:hover {
    background: transparent;
}
:root:has(#dark-mode:checked) .bnb-smart-chain .menu-button {
    background: #353547;
}
:root:has(#dark-mode:checked) .bnb-smart-chain .menu-button span{
    color: var(--primary-static);
}
:root:has(#dark-mode:checked) .bnb-smart-chain .menu-button svg{
    fill: var(--primary-static);
}
@keyframes blink { 
    0% {
        transform: scale(1,1);
        animation-timing-function: cubic-bezier(0.7,0,0.3,1)
    } 
    50% {
        transform: scale(1,0);
        animation-timing-function: cubic-bezier(0.7,0,0.3,1)
    } 
    100% {
        transform: scale(1,1)
    }
}

@keyframes blink-logo-small { 
    0% {
        transform: translate(98.692997px,117.896004px) scale(1,1);
        animation-timing-function: cubic-bezier(0.7,0,0.3,1)
    } 
    50% {
        transform: translate(98.692997px,117.896004px) scale(1,0);
        animation-timing-function: cubic-bezier(0.7,0,0.3,1)
    } 
    100% {
        transform: translate(98.692997px,117.896004px) scale(1,1)}
    }

@media screen and (max-width: 768px) {
    nav .logo-small {
        display: block;
    }
    nav .logo-extended {
        display: none;
    }

    .menu-links .dropdown .dropdown-menu {
        bottom: calc(3rem + 1px);
        top: unset;
        margin: 0 auto;
    }
    .logo-small:hover .eyes{
        animation: blink-logo-small 500ms linear 1 normal forwards
    }
    .menu-links{
        position:fixed;
        bottom:0;
        width:100%;
        height: unset;
        border-top:1px solid var(--primary);
        display:flex;
        justify-content: space-around;
        padding-left:0px;
       
    }
    .ps-nav-link{
        padding-left:8px;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding:.25rem 1rem .25rem 1rem;
    }
    .icona{
        display: block;
    }
    .dropdown {
        position: unset;
    }
    .menu-links .dropdown-menu{
        width:100vw;
        left: 0;
        transform: translate(0, 1rem);
    }
.dropdown > a{
    font-size:10px;
   text-align: center;
}

}

@media screen and (max-width: 576px) {
    .bnb-smart-chain .ps-nav-link {
        padding: .25rem .5rem .25rem 1rem;
    }
    .bnb-smart-chain .menu-button {
        padding-left: 2rem;
    }
}