/* 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: 0.96rem; /* 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: #c1dfb9; /* Imposta il colore di sfondo. */
  color: #333; /* Imposta il colore del testo. */
}
/* stile per l'header */
.header {
  /* Definisce il contenitore dell'intestazione. */
  display: flex; /* Attiva il layout Flexbox. */
  padding: 20px; /* Aggiunge spazio interno. */
  position: relative; /* Rende il contenitore riferimento per elementi assoluti. */
}
/* stile per il testo all'interno dell'header */
.header h1 {
  /* Seleziona il titolo dell'intestazione. */
  font-size: 1.5rem; /* Imposta la dimensione del titolo. */
  text-align: center; /* Centra il testo. */
  text-align: justify; /* Giustifica il testo e prevale sulla riga precedente. */
}
/* stile per il main */
.main {
  /* Definisce il contenitore principale. */
  display: flex; /* Attiva il layout Flexbox. */
  justify-content: center; /* Centra gli elementi orizzontalmente. */
  align-items: center; /* Centra gli elementi verticalmente. */
  }
/* la griglia che contiene le box */
.container-box {
  /* Definisce la griglia delle box. */
  display: grid; /* Attiva il layout CSS Grid. */
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* Crea colonne responsive. */
  gap: 10px; /* Imposta lo spazio tra le colonne e le righe. */
}
/* le singole box all'interno della griglia */
.box_1, /* Seleziona la prima box. */
.box_2, /* Seleziona la seconda box. */
.box_3 {
  /* Seleziona la terza box. */
  min-height: 200px; /* Imposta l'altezza minima. */
  max-height: 200px; /* Imposta l'altezza massima. */
  min-width: 250px; /* Imposta la larghezza minima. */
  max-width: 250px; /* Imposta la larghezza massima. */
  margin: 20px;  /* Aggiunge spazio esterno. */  padding: 20px; /* Aggiunge spazio interno. */
  text-align: justify; /* Giustifica il testo. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra. */
  overflow: auto; /* Mostra lo scorrimento quando serve. */
  border-radius: 10px; /* Aggiunge angoli arrotondati. */
}
/* lo stile per la tabella all'interno della box 1, box 2 e box 3 */
.box_2 table, /* Seleziona la tabella della seconda box. */
.box_3 table, /* Seleziona la tabella della terza box. */
.box_1 table {
  /* Seleziona la tabella della prima box. */
  width: 100%; /* Estende la tabella alla larghezza disponibile. */
  border-collapse: collapse; /* Unisce i bordi delle celle. */
}
/* lo stile per l'intestazione della tabella all'interno della box 1, box 2 e box 3 */
.box_2 table thead tr, /* Seleziona la riga d'intestazione della seconda tabella. */
.box_3 table thead tr, /* Seleziona la riga d'intestazione della terza tabella. */
.box_1 table thead tr {
  /* Seleziona la riga d'intestazione della prima tabella. */
  text-align: center; /* Centra il testo dell'intestazione. */
  background-color: #9bbe87; /* Colora lo sfondo dell'intestazione. */
}
/* lo stile per le celle della tabella all'interno della box 1, box 2 e box 3 */
  .box_2 th, /* Seleziona le intestazioni della seconda tabella. */
  .box_2 td, /* Seleziona le celle della seconda tabella. */
  .box_3 th, /* Seleziona le intestazioni della terza tabella. */
  .box_3 td, /* Seleziona le celle della terza tabella. */
  .box_1 th, /* Seleziona le intestazioni della prima tabella. */
  .box_1 td {
  /* Seleziona le celle della prima tabella. */
  padding: 8px; /* Aggiunge spazio interno alle celle. */
  text-align: center; /* Centra il contenuto delle celle. */
}
/* lo sfondo per le righe pari della tabella all'interno della box 1, box 2 e box 3 */
.box_1 table tbody tr:nth-child(even), /* Seleziona le righe pari della prima tabella. */
.box_2 table tbody tr:nth-child(even), /* Seleziona le righe pari della seconda tabella. */
.box_3 table tbody tr:nth-child(even) {
  /* Seleziona le righe pari della seconda tabella. */
  background-color: rgba( 
    142,
    200,
    165,
    0.49
    ); /* Colora alternativamente le righe. */
  }
  /* lo sfondo per le righe al passaggio del mouse della tabella all'interno della box 1, box 2 e box 3 */
  .box_1 table tbody tr:hover, /* Seleziona la riga attiva della prima tabella. */
  .box_2 table tbody tr:hover, /* Seleziona la riga attiva della seconda tabella. */
  .box_3 table tbody tr:hover {
    /* Seleziona la riga attiva della terza tabella. */
    background-color: #e7ffd9; /* Cambia lo sfondo al passaggio del mouse. */
    border: 1px solid #333; /* Evidenzia il bordo della riga. */
  }
  /* lo stile per i link all'interno della tabella nella box 1, box 2 e box 3 */
  .box_1 table tbody tr a, /* Seleziona i link della prima tabella. */
  .box_2 table tbody tr a, /* Seleziona i link della seconda tabella. */
  .box_3 table tbody tr a {
    /* Seleziona i link della terza tabella. */
    color: #5a755a; /* Imposta il colore dei link. */
    text-decoration: none; /* Rimuove la sottolineatura. */
}
/* stile per il footer */
.footer {
  /* Definisce il contenitore del piè di pagina. */
  display: flex; /* Attiva il layout Flexbox. */
  flex-direction: column; /* Dispone gli elementi in verticale. */
  justify-content: center; /* Centra gli elementi lungo l'asse principale. */
  align-items: center; /* Centra gli elementi lungo l'asse trasversale. */
  padding: 20px; /* Aggiunge spazio interno. */
}
/* lo stile per il link mailto all'interno del footer */
.footer mailto .a-mailto {
  /* Seleziona il link mailto nel footer. */
  color: #5a755a; /* Imposta il colore del link. */
  text-decoration: none; /* Rimuove la sottolineatura. */
}
/* lo stile per il link mailto all'interno del footer al passaggio del mouse */
.footer mailto .a-mailto:hover {
  /* Seleziona il link mailto quando è puntato. */
  font-weight: bold; /* Rende il testo in grassetto. */
}
/* il div nascosto che appare sopra il contenuto principale */
.div-gost {
  /* Definisce il pannello nascosto sopra il contenuto. */
  display: none; /* Nasconde il pannello inizialmente. */
  position: absolute; /* Posiziona il pannello rispetto al contenitore. */
  top: 0; /* Posiziona il pannello nella parte superiore della finestra. */
  left: 0; /* Posiziona il pannello nella parte sinistra della finestra. */
  width: 100vw; /* Estende il pannello alla larghezza della finestra. */
  height: 100vh; /* Estende il pannello all'altezza della finestra. */
  background-color: rgba(
    0,
    0,
    0,
    0.9
  ); /* Applica uno sfondo nero trasparente. */
  justify-content: center; /* Centra il contenuto del pannello. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  z-index: 100; /* Porta il pannello sopra gli altri elementi. */
}
/* la x del div nascosto */
.div-gost span::before {
  /* Crea il pulsante di chiusura del pannello immagine. */
  content: "X"; /* Inserisce la lettera X. */
  color: #fff; /* Rende bianca la X. */
  position: absolute; /* Posiziona la X sopra il pannello. */
  top: 20px; /* Distanza dal bordo superiore. */
  right: 20px; /* Distanza dal bordo destro. */
  width: 30px; /* Imposta la larghezza dell'area cliccabile. */
  height: 30px; /* Imposta l'altezza dell'area cliccabile. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  font-size: 24px; /* Imposta la dimensione della X. */
  font-weight: bold; /* Rende la X in grassetto. */
}
/* la x del div nascosto */
.div-txt .span-ics::before {
  /* Crea il pulsante di chiusura del pannello testuale. */
  content: "X"; /* Inserisce la lettera X. */
  color: #ff0000; /* Rende rossa la X. */
  position: absolute; /* Posiziona la X sopra il pannello. */
  top: 20px; /* Distanza dal bordo superiore. */
  right: 20px; /* Distanza dal bordo destro. */
  width: 30px; /* Imposta la larghezza dell'area cliccabile. */
  height: 30px; /* Imposta l'altezza dell'area cliccabile. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  font-size: 24px; /* Imposta la dimensione della X. */
  font-weight: bold; /* Rende la X in grassetto. */
}
/* l'immagine ingrandita */
.div-gost img {
  /* Seleziona l'immagine ingrandita. */
  display: block; /* Visualizza l'immagine come blocco. */
  width: 100%; /* Estende l'immagine in larghezza. */
  height: 100%; /* Estende l'immagine in altezza. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  object-fit: contain; /* Mantiene le proporzioni dell'immagine. */
}
/* lo stile per il div-txt nascosto */
.div-txt {
  /* Definisce il pannello testuale nascosto. */
  display: none; /* Nasconde il pannello inizialmente. */
  position: absolute; /* Posiziona il pannello sopra il contenuto. */
  top: 0px; /* Allinea il pannello al bordo superiore. */
  left: 0; /* Allinea il pannello al bordo sinistro. */
  width: 100vw; /* Estende il pannello alla larghezza della finestra. */
  height: 100vh; /* Estende il pannello all'altezza della finestra. */
  text-align: justify; /* Giustifica il testo. */
  background-color: #ffffffec; /* Applica uno sfondo bianco traslucido. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  overflow: scroll; /* Abilita lo scorrimento del contenuto. */
  z-index: 100; /* Porta il pannello sopra gli altri elementi. */
}
/* lo stile per il div-portrait all'interno del div-txt nascosto */
.div-txt .div-portrait { /* Seleziona il ritratto nel pannello testuale. */
  display: inline-block; /* Visualizza il ritratto come blocco in linea. */
  background-color: #fff; /* Imposta il colore del passepartout. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aggiunge un'ombra. */
  border-radius: 10px; /* Arrotonda gli angoli. */
}
/* lo stile per le immagini all'interno del div-txt nascosto */
.div-txt .div-portrait img { /* Seleziona le immagini del ritratto. */
  display: block; /* Visualizza l'immagine come blocco. */
  max-width: 100%; /* Impedisce all'immagine di superare il contenitore. */
  height: auto; /* Mantiene proporzioni e altezza automatica. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  border-radius: 10px; /* Arrotonda gli angoli dell'immagine. */
  border: 1px solid #181818; /* Disegna un bordo scuro. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aggiunge un'ombra all'immagine. */
}
/* l'immagine dell'osso all'interno del div-txt nascosto */
.div-txt #img-txt-small { /* Seleziona la piccola immagine dell'osso. */
  position: absolute; /* Posiziona l'immagine indipendentemente dal flusso. */
  max-width: 10%; /* Limita la larghezza dell'immagine. */
  height: auto; /* Mantiene le proporzioni. */
  border-radius: 10px; /* Arrotonda gli angoli. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Aggiunge un'ombra. */
  top: 60px; /* Imposta la distanza dal bordo superiore. */
  left: 60px; /* Imposta la distanza dal bordo sinistro. */
  opacity: 0.5; /* Imposta l'opacità dell'immagine. */  
}
/* lo stile per il paragrafo all'interno del div-txt nascosto */
.div-txt .div-portrait p { /* Seleziona il paragrafo del ritratto. */
  position: absolute; /* Posiziona il paragrafo in modo indipendente. */
  display: inline-block; /* Mantiene il paragrafo come blocco in linea. */
  margin: 20px 20px; /* Imposta il margine verticale e orizzontale. */  
  line-height: 1.6; /* Imposta l'interlinea. */
  color: #000; /* Imposta il colore del testo. */
  background-color: #fff; /* Imposta lo sfondo del paragrafo. */
  padding: 20px; /* Aggiunge spazio interno al paragrafo. */
}
/* il  popup per l'avatar */
.div-popup { /* Definisce il popup associato all'avatar. */
  display: none; /* Nasconde il popup inizialmente. */
  position: absolute; /* Posiziona il popup rispetto al contenitore. */
  top: 10px; /* Distanza dal bordo superiore. */
  left: 10px; /* Distanza dal bordo sinistro. */
  width: 200px; /* Imposta la larghezza del popup. */
  height: auto; /* Adatta l'altezza al contenuto. */
  background-color: #fff; /* Imposta lo sfondo del popup. */
  padding: 20px; /* Aggiunge spazio interno. */
  border-radius: 5px; /* Arrotonda gli angoli. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra. */
  z-index: 100; /* Porta il popup sopra gli altri elementi. */
}
/* l'avatar */
.avatar-image { /* Definisce l'immagine dell'avatar. */
  display: inline; /* Visualizza l'avatar in linea. */
  min-width: 120px; /* Imposta la larghezza minima. */
  min-height: 120px; /* Imposta l'altezza minima. */
  max-width: 120px; /* Imposta la larghezza massima. */
  max-height: 120px; /* Imposta l'altezza massima. */
  background-image: url("../img/avatar/avatar.png"); /* Imposta l'immagine di sfondo. */
  background-repeat: no-repeat; /* Evita la ripetizione dello sfondo. */
  border-radius: 50%; /* Rende l'avatar circolare. */
  position: relative; /* Rende l'avatar riferimento per il popup. */
  cursor: pointer; /* Mostra il cursore cliccabile. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra. */
  margin: 0 20px 0 0; /* Aggiunge spazio a destra. */
  transition: transform 0.3s ease-in; /* Anima la trasformazione. */
}
/* al passaggio del mouse sull'avatar, ingrandisci l'immagine */
.avatar-image:hover { /* Applica lo stile quando il mouse passa sull'avatar. */
  transform: scale(1.1); /* Ingrandisce leggermente l'avatar. */
}
/* al passaggio del mouse sull'avatar, ingrandisci l'immagine */
.avatar-image:active { /* Applica lo stile quando l'avatar viene cliccato. */
  transform: scale(1.1); /* Ingrandisce leggermente l'avatar. */
}
/* al passaggio del mouse sull'avatar, mostra il popup */
.avatar-image:hover > div { /* Seleziona il popup al passaggio del mouse. */
  display: block; /* Mostra il popup. */
}
/* al clic sull'avatar, mostra il popup */
.avatar-image:active > div { /* Seleziona il popup durante il clic. */
  display: block; /* Mostra il popup. */
}
/* indicatore online */
.div-online { /* Definisce l'indicatore dello stato online. */
  position: absolute; /* Posiziona l'indicatore sull'avatar. */
  bottom: 0px; /* Allinea l'indicatore al bordo inferiore. */
  right: 0px; /* Allinea l'indicatore al bordo destro. */
  width: 20px; /* Imposta la larghezza dell'indicatore. */
  height: 20px; /* Imposta l'altezza dell'indicatore. */
  border-radius: 50%; /* Rende circolare l'indicatore. */
  border: 2px solid white; /* Aggiunge un bordo bianco all'indicatore online. */
  background-color: green; /* Colora di verde lo stato online. */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra. */
}
@media (min-width: 600px) {
  .main{
    display: block; /* Cambia il layout a blocco per schermi piccoli. */
  }
}