*{
    background-color: black;
    color: white;
    font-size: 50px;			
    text-transform: uppercase;
}
.container{
    margin: auto;
}
table{
    margin: auto;
    text-align: center;
}
tr,td{			
    text-align: center;
}
td{ padding:20px }
#new{
    /*display: none;*/
    position: absolute;
    left: 0;
    bottom: 0;
    border-color: white;
    margin: 10px;
    font-size: 35px;
}
#string{
    text-align: center;
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
}
#progress-bar-container {
    width: 100%;
    height: 100px;
    background-color: white;
    text-align: center;
}
#progress-bar {
    width: 0;
    height: 100%;
    background-color: #4CAF50;
    text-align: center;
}
.newTimerInput, .newTimerInput tr, .newTimerInput td, .newTimerInput input{
    font-size:12pt;
    text-align: left;
}
input{
    width: 100%;
    box-sizing: border-box; /* Assicura che il padding non influisca sulla larghezza totale */
}


@media screen and (max-width: 768px) {
    /* Riduce la dimensione del font principale per una migliore leggibilità */
    * {
        font-size: 40px; 
    }

    /* Imposta la tabella del timer per occupare l'intera larghezza */
    .timer table {
        width: 100%;
    }

    /* Trasforma le celle della tabella in elementi a blocco.
    Questo forza ogni cella ad andare a capo, creando il layout verticale.
    */
    .timer tr, .timer td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 0; /* Riduce il padding per ottimizzare lo spazio verticale */
    }

    /* Nasconde la riga originale con le etichette (days, hours, etc.) */
    .timer tr:last-child {
        display: none;
    }

    /* Aggiunge le etichette direttamente sotto ogni valore numerico
    usando i pseudo-elementi CSS. Questo crea un blocco unico per ciascuna unità di tempo.
    */
    td#days::after {
        content: 'Giorni';
        display: block;
        font-size: 18px; /* Usa un font più piccolo per l'etichetta */
        text-transform: uppercase;
    }

    td#hours::after {
        content: 'Ore';
        display: block;
        font-size: 18px;
        text-transform: uppercase;
    }

    td#minutes::after {
        content: 'Minuti';
        display: block;
        font-size: 18px;
        text-transform: uppercase;
    }

    td#seconds::after {
        content: 'Secondi';
        display: block;
        font-size: 18px;
        text-transform: uppercase;
    }

    /* Ottimizza il pulsante "New Timer" per l'uso su mobile */
    #new {
        width: 90%;
        left: 5%; /* Centra il pulsante */
        font-size: 24px;
    }
}