body,
html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    /* Sfondo scuro come nell'immagine */
    font-family: 'Arial', sans-serif;
    color: #fff;
    /* Testo bianco */
}

.timer-container {
    position: relative;
    /* Imposta il contenitore principale per il posizionamento relativo */
    width: 18.75rem;
    /* Ad esempio, o qualsiasi altra larghezza desideri */
    margin: 0 auto;
    /* Centra il container nello schermo */
}

.time-display-svg {
    width: 100%;
    /* Fa sì che l'SVG occupi tutta la larghezza del contenitore */
    height: auto;
    /* Mantiene le proporzioni */
    display: block;
    /* Evita spazi aggiuntivi sotto l'immagine */
    position: relative;
    z-index: 1;
    /* potrebbe non essere necessario, ma garantisce che questo elemento sia sotto l'immagine della lancetta dell'orologio */
}

.clockhand-svg {
    position: absolute;
    top: 28%;
    /* Centra verticalmente */
    left: 50%;
    /* Centra orizzontalmente */
    transform: translate(-50%, -50%);
    /* Centra perfettamente */
    width: 125%;
    /* o qualsiasi dimensione in percentuale o px che si adatti bene */
    height: auto;
    /* Mantiene le proporzioni */
    z-index: 2;
    /* Sopra l'immagine del timer */
    transform-origin: 50% 50%;
}

/*@keyframes rotation {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}*/




.time-display {
    position: absolute;
    /* Posizionamento assoluto all'interno del suo contenitore relativo */
    top: 70%;
    /* Centra verticalmente */
    left: 50%;
    /* Centra orizzontalmente */
    transform: translate(-50%, -50%);
    /* Centra perfettamente il testo */
    font-size: 60px;
    /* Imposta la dimensione del testo */
    color: black;
    /* Imposta il colore del testo, se necessario */
    /* Assicurati di avere un contrasto adeguato affinché il testo sia leggibile sopra l'SVG */
    z-index: 3;
}


.svg-button-container {
    display: flex;
    justify-content: space-around;
    /* Distribuisce in modo uniforme lo spazio intorno agli elementi */
    align-items: center;
    /* Centra verticalmente gli elementi nel container */
    padding-top: 1.875rem;
    /* Aggiunge spazio sopra i bottoni */
    margin: 0 auto;
    /* Centra il container se necessario */
}

.svg-button {
    width: 3.75rem;
    /* Aumenta la larghezza degli SVG */
    height: auto;
    /* Mantiene le proporzioni dell'SVG */
    cursor: pointer;
    transition: transform 0.2s;
}

/* Specifica lo stile per l'SVG centrale */
#double-time {
    width: 5.375rem;
    /* Rende il bottone centrale leggermente più grande */
}

.svg-button:not(:last-child) {
    margin-right: 1.25rem;
    /* Aggiunge spazio extra a destra di ogni bottone tranne l'ultimo */
}

.svg-button:hover {
    transform: scale(1.1);
}

.svg-button:active {
    transform: scale(0.9);
}

.text-container {
    position: absolute;
    margin-top: 1rem;
    /* ad esempio, se vuoi centrarlo verticalmente */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    /* centra orizzontalmente i contenuti */
    align-items: center;
    /* centra verticalmente i contenuti */
    pointer-events: none;
    /* Evita che il contenitore influenzi gli eventi del mouse */
}

.text {
    color: #F6BCD7;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    font-weight: 500;
    pointer-events: auto;
    /* Permette al testo di ricevere eventi del mouse, se necessario */
    /* Rimuovere le proprietà relative al posizionamento che sono ora gestite dal contenitore */
}






/* Se necessario, qui si possono aggiungere media query per la responsività */