/* reset di base per margini e padding */
* {
  /* Seleziona tutti gli elementi della pagina. */
  margin: 0;
  /* Rimuove il margine predefinito. */
  padding: 0;
  /* Rimuove il padding predefinito. */
  box-sizing: border-box;
  /* Include bordo e padding nelle dimensioni. */
  font-size: 1rem;
  /* Rimuove lo spazio bianco tra gli elementi inline-block. */
}

/* per tutto il documento, utilizza il font Roboto e imposta il box-sizing a border-box */
body {
  /* Applica lo stile di base al documento. */
  font-family: "Roboto", sans-serif;
  /* Imposta il carattere principale. */
  background-color: #181818;
  /* Imposta il colore di sfondo. */
  color: #f5f5f5;
  /* Imposta il colore del testo. */
}

/* stile per l'intestazione principale */
.h1-header {
  padding: 20px;
  /* Aggiunge padding sopra e sotto l'intestazione principale. */
  font-size: 2rem;
  /* Imposta la dimensione del font per l'intestazione principale. */
  text-align: center;
  /* Centra il testo dell'intestazione principale. */
  margin: 0 auto;
  /* Aggiunge margine sopra e sotto l'intestazione principale. */
}

/* stile per il paragrafo dell'intestazione */
.p-header {
  padding: 50px 0px;
  /* Aggiunge padding sopra, sotto, a sinistra e a destra del paragrafo. */
  font-size: 1.2rem;
  /* Imposta la dimensione del font per il paragrafo. */
  text-align: center;
  /* Centra il testo del paragrafo. */
  margin: 0 auto;
  /* Centra il paragrafo orizzontalmente. */
}

/* stile per il div delle coordinate */
.div-coord {
  display: grid;
  /* Utilizza il layout grid per il div delle coordinate. */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  /* Definisce le aree della griglia per il div delle coordinate. */
  color: #181818;
  /* Imposta il colore del testo del div delle coordinate. */
  text-align: center;
  /* Imposta l'allineamento del testo al centro per il div delle coordinate. */
  margin: 20px 5px;
  /* Aggiunge margine intorno al div delle coordinate. */

}
.div-mappa {
  margin: 20px 5px;
  /* Aggiunge margine intorno al div della mappa. */
   width: 100%;
  height: 400px;
  border-radius: 20px;
} 
/* stile per il box all'interno del div delle coordinate */
.box {
  background-color: #cccccc;
  /* Imposta il colore di sfondo per il div dell'altitudine. */
  border-radius: 10px;
  /* Aggiunge un bordo arrotondato per il div dell'altitudine. */
  box-shadow: 10px 10px 20px -2px rgba(192, 192, 192, 0.46);
  -webkit-box-shadow: 10px 10px 20px -2px rgba(192, 192, 192, 0.46);
  /* Aggiunge un'ombra al div per un effetto di profondità. */
  overflow: auto;
}
/* stile per il label delle coordinate */
.div-lat p,
.div-acc p,
.div-alt p {
  /* Posizione relativa al box contenitore. */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  /* Imposta la posizione iniziale del paragrafo all'interno del box. */
  background-color: #9b9a9a;
  /* Imposta il colore di sfondo per i paragrafi all'interno dei box delle coordinate. */
}

/* stile per il pulsante delle coordinate */
.btn-coord {
  padding:5px;
  /* Imposta lo spazio interno del pulsante. */
  background-color: #cccccc;
  /* Imposta il colore di sfondo per il pulsante. */
  border-radius: 5px;
  cursor: pointer;
  /* Cambia il cursore quando si passa sopra il pulsante. */
}

.btn-coord:hover {
  color: red
  /* Cambia il colore del testo del pulsante quando si passa sopra con il mouse. */
}

/* stile per il footer */
footer {
  padding: 20px;
  /* Aggiunge padding sopra e sotto il footer. */
  text-align: center;
  /* Centra il testo del footer. */
  line-height: 1.5;

  /* Imposta l'altezza della linea del testo del footer. */
}