/* il corpo della pagina */
html,
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Tahoma, sans-serif;
  background-color: #b7d1bd87;
}
/* ###################################--- HOME PAGE---############################################ */
/* -----------------men----------------------- */
/* le ancore del menù  */
.header .logo,
.header .menu li a {
  text-decoration: none;
  color: gray;
}
/* colore più scuro al passaggio */
.header .logo:hover {
  background-color: #181818;
}
/* l'eader della pagina */
.header {
  position: fixed;
  top: 0;
  background-color: #212121;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  z-index: 1;
}
/* l'ul del menù */
.header .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #212121;
}
/* le ancore della lista menù */
.header .menu li a {
  display: block;
  padding: 15px;
  border-right: 1px solid gray;
  text-decoration: none;
}
/* colore più scuro al passaggio */
.header .menu li a:hover {
  background-color: #181818;
}
/* spazio e carattere logo */
.header .logo {
  float: left;
  font-size: 25px;
  padding: 10px 20px;
}
/* voci menù */
.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height 0.6s ease-out;
}
/* posizione del riquadro della ics */
.header .menu-icon {
  padding: 24px 20px;
  margin: 0px 30px 0px 5px;
  position: relative;
  float: right;
  cursor: pointer;
}
/* il panino centrale */
.header .menu-icon .nav-icon {
  background-color: gray;
  display: block;
  width: 18px;
  height: 2px;
  position: relative;
  transition: background-color 0.2s ease-out;
}
/* il panino superiore e inferiore */
.header .menu-icon .nav-icon::before,
.header .menu-icon .nav-icon::after {
  background-color: gray;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
  position: absolute;
}
.header .menu-icon .nav-icon::after {
  top: -5px;
}
.header .menu-icon .nav-icon::before {
  top: 5px;
}
/* nascondo l'input checkbox */
.header .menu-btn {
  display: none;
}
/* menu dropdown */
.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}
/* nascondo la linea centrale del menu a tendina */
.header .menu-btn:checked ~ .menu-icon .nav-icon {
  background-color: transparent;
}
/* creo la ics */
.header .menu-btn:checked ~ .menu-icon .nav-icon::before {
  transform: rotate(45deg);
  top: 0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon::after {
  transform: rotate(-45deg);
  top: 0;
}
/* ----------------------------contenuto della pagina-------------------------- */
/* il main della pagina */
.main {
  margin-top: 0px;
  padding: 0px;
}
/* l'immagine della home page */
.img-home {
  width: 100%;
  height: auto;
}
/* il div container della pagina */
.container {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background-color: none;
  grid-template-areas:
    "foto"
    "intro"
    "spiega";
}
/* i div flottanti */
.container .foto {
  display: flex;
  grid-area: foto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}
.container .intro {
  display: flex;
  grid-area: intro;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}
.container .spiega {
  display: flex;
  grid-area: spiega;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
}
/* il footer della pagina */
.footer,
.footer a {
  color: gray;
  text-align: center;
  width: 100%;
}
/* ----------------------------media query---------------------------------------- */
/* per i dispositivi con larghezza minima di 600px */
@media (min-width: 600px) {
  /* i li a sinistra */
  .header .menu li {
    float: left;
  }
  /* spazio tra le voci del menù */
  .header .menu li a {
    padding: 10px;
  }
  /* sposto il menù a destra e tolgo l'altezza minima */
  .header .menu {
    clear: none;
    float: right;
    min-height: 50px;
  }
  /* nascondo il panino del menù a tendina */
  .header .menu-icon {
    display: none;
  }
  /* ridefinisco il container della pagina con due colonne e due righe, la prima riga con foto e intro, la seconda riga con spiega */
  .container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "foto intro"
      "spiega spiega";
  }
}
/* --------------------------fine media query--------------------------------------------- */