/* Stile generale della pagina */
body {
    font-family: Arial, Helvetica, sans-serif; /* Imposta il tipo di carattere */
    max-width: 800px;                         /* Limita la larghezza massima della pagina */
    margin: 20px auto;                        /* Centra la pagina e aggiunge spazio sopra e sotto */
    line-height: 1.5;                         /* Aumenta lo spazio tra le righe di testo */
}

/* Stile del titolo principale */
h1 {
    color: #333;                              /* Imposta il colore del titolo (grigio scuro) */
}

/* Stile di base dei pulsanti */
button {
    margin-right: 10px;                      /* Spazio a destra di ogni pulsante */
    margin-top: 5px;                         /* Spazio sopra i pulsanti */
    padding: 6px 12px;                       /* Spazio interno del pulsante */
    border: 1px solid #444;                  /* Bordo grigio scuro */
    border-radius: 4px;                      /* Angoli leggermente arrotondati */
    background-color: #eee;                  /* Colore di sfondo chiaro */
    cursor: pointer;                         /* Cambia il cursore in una mano */
    transition: background-color 0.2s;       /* Effetto di transizione sul cambio colore */
}

/* Effetto quando il mouse passa sopra il pulsante */
button:hover {
    background-color: #ddd;                  /* Cambia il colore di sfondo al passaggio del mouse */
}

/* Classe per nascondere un elemento */
.nascosto {
    display: none;                           /* Nasconde completamente l'elemento */
}

/* Classe per evidenziare un elemento */
.evidenziato {
    background-color: #ffff99;               /* Evidenzia con colore giallo chiaro */
}

/* Stile del contenitore della mappa */
#map {
    border: 1px solid #ccc;                  /* Bordo grigio chiaro intorno alla mappa */
}