:root {
    --nav-index-scroll-bg: #ffffff;
    --nav-index-scroll-text: #353635;
    --nav-index-scroll-icon: #0b0f10;
    --nav-index-link: #ffffff;
}

/*@media (prefers-color-scheme: dark) {
    :root {
        --nav-index-scroll-bg: hsl(215, 25%, 12%);
        --nav-index-scroll-text: hsl(210, 20%, 88%);
        --nav-index-scroll-icon: hsl(210, 20%, 92%);
        --nav-index-link: hsl(210, 20%, 96%);
    }
}*/

/*main HEADER*/
#mainHeader {
    position: fixed !important;
    top: 0;
    width: 100%;
    transition: background-color 0.5s ease; /* Suaviza a mudança de cor */
    z-index: 1000;
    border: none;
}

    /* Header transparente no topo */
    #mainHeader.transparent {
        background-color: transparent !important;
        background: unset !important;
        box-shadow: none;
    }

        #mainHeader.transparent .nav-item a {
            color: var(--segment-contrast) !important;
        }
        /* Header colorido ao rolar */
        #mainHeader.scrolled {
            background-color: var(--nav-index-scroll-bg);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        #mainHeader.scrolled a {
            color: var(--nav-index-scroll-text);
        }

        #mainHeader.scrolled .notification-button {
            color: var(--nav-index-scroll-icon);
        }

    /* Estilização dos links (opcional) */
    #mainHeader a {
        color: var(--nav-index-link);
        text-decoration: none;
        font-weight: bold;
    }