/* Nascondi la barra di scorrimento su tutti i browser */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* Nascondi la barra di scorrimento per WebKit (Chrome, Safari, etc.) */
html::-webkit-scrollbar {
    display: none;
}

body {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #000; /* Sfondo nero per desktop e tablet */
    z-index: 9999;
}

#progress-bar::after {
    content: "";
    display: block;
    height: 100%;
    background-color: rgba(255, 255, 255, 1); /* Riempimento bianco opaco 0.9 per desktop e tablet */
    transform-origin: left;
    transform: scaleX(var(--scroll-width, 0));
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Stili per smartphone */
@media screen and (max-width: 767px) {
    #progress-bar {
        height: 6px;
        background-color: rgba(255, 255, 255, 0.9); /* Sfondo bianco opaco 0.9 per smartphone */
    }

    #progress-bar::after {
        background-color: #000; /* Riempimento nero per smartphone */
    }
}