/* Hidden navbar# */
/* (R/L-side buttons display:initial)? hiddenBar hidden : not hidden */

#hiddenBar {
    background-color: transparent;
    width: 98%;
    height: 12vw;  
    margin: 3% 1%;
    border: solid black 0.5vw;
    
    display: none; /*Warning: when visible, change with display:flex; */
    flex-direction: row; 
    gap: 2%; 

    justify-content: center;
    
    overflow: hidden;
}

.hiddenButton {
    position: relative; 
    width: 18%; 
    height: 96%; 
    top: 2%; 
    min-width: 48px;
    border-radius: 100%;

    font-size: 1em; 
    color: white; 
    background-color: darkred; 
    font-weight: 900;

    overflow: hidden; 
}

#hiddenButton2, #hiddenButton4 {
    background-color: black;
}

.hiddenButton:active {
    background-color: black;
    box-shadow: 0.5vw 0.5vw 0.5vw orange;
}

#hiddenButton2:active, #hiddenButton4:active {
    background-color: darkred;
    box-shadow: 0.5vw 0.5vw 0.5vw orange;
}

/* Questa scelta ci consente di mantenere l'evento 'click' al 
posto dei pointer events - che hanno altri 
inconvenienti: Eliminiamo il ritardo dei 300ms nel caso
di applicazioni touch sul click; ciò 
mantiene la possibilità comunque di scorrere la
pagina e zoomare con due dita */

button, a {
    touch-action: manipulation; 
}

/* MEDIA_____________________________________________
_________________________________________________________
_________________________________________________________ */

@media all and (max-width: 660px) {
    #hiddenBar {
        display: flex;
    }
}

@media all and (max-width: 500px) {
    #hiddenBar {
        margin: 3% 0%;
        border: none; 
        width: 100%; 
    }

    .hiddenButton {
        font-size: 0.8em; 
    }
}

@media all and (max-width: 400px) {
    .hiddenButton {
        font-size: 0.6em; 
    }
}