.bold-text {
    font-weight: bold;
}

.red-text {
    color: blue;
}


<style>
/* Per schermi da desktop, crea una griglia con 4 colonne */
.user-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 colonne con larghezza uguale */
    gap: 20px; /* Spazio tra le card */
    padding: 50px; /* Spazio intorno alla griglia */
}

/* Per schermi più piccoli (ad esempio smartphone), adatta il layout */
@media (max-width: 768px) {
    .user-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Colonne adattive */
    }
}

body {
        background-color: #333333; /* Colore di sfondo */
        /* background-image: url('path/to/your/background-image.jpg'); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;

    }
    .user-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 10fr)); /* Crea colonne che si adattano alla larghezza dello schermo */
        gap: 50px; /* Spazio tra le card */
        padding: 100px; /* Spazio intorno alla griglia */
    }


    .user-card {
        background-color: #ffff; /* Colore di sfondo personalizzabile */
        border: 5px solid #ddd;
        border-color: blue;
        border-radius: 15px; /* Angoli arrotondati */
        display: flex;
        align-items: center;
        padding: 5px;
        font-family: 'Times New Roman', serif; /* Font modificabile */
    }

    .user-card .avatar-container {
        flex-basis: 30%; /* Larghezza dell'avatar container */
        text-align: center;
        
    }



    .user-card .info-container {
        flex-basis: 70%; /* Larghezza del contenitore delle informazioni */
        padding-left: 10px;
        border-left: 1px solid #ccc; /* Riga divisoria */


    }

    .info-container h3 {
            font-size: 1.5em; /* Aumenta la dimensione del nome */
            /* Altri stili per .user-info h3 */
        }

    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .status-button {
        padding: 5px 10px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    font-size: 18px; /* Aumenta la dimensione del carattere */
    font-weight: bold; /* Rende il testo in grassetto */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Aggiunge un'ombreggiatura al testo per migliorare la visibilità */    }

    .status-online { background-color: green; }
    .status-busy { background-color: red; }
    .status-paused { background-color: #ffcc99; }
    .status-booked { background-color: blue; }

h1 {
            text-align: center;
            color: white;
            font-weight: bold;
                font-size: 36px; /* Imposta la dimensione del font */
            font-family: 'Times New Roman', serif; /* Font modificabile */
        }

.container {
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    height: 15vh; /* Altezza totale della viewport */
}
.cloud-button {
    display: inline-block; /* Rende il div in linea con il contenuto */
    background-color: #0b3d91; /* Blu notte */
    padding: 20px 40px; /* Spazio intorno al testo */
    border-radius: 25px; /* Angoli arrotondati per l'effetto nuvola */
    color: white; /* Colore del testo */
    text-align: center; /* Allinea il testo al centro */
    font-family: 'Times New Roman', serif; /* Scegli il font che preferisci */
    font-size: 24px; /* Dimensione del testo */
    font-weight: bold; /* Rende il testo in grassetto */
    margin: 10px 0; /* Margini intorno al bottone */
}


</style>