html,body{
  font-family:'Cormorant Sans', sans-serif;
  background-color:#f6eee7; /*colore sfondo della pagina*/
  color:#3a2e28; /*colore testo*/
  overflow-x:hidden; /*evita uno scroll orizzontale*/
  margin:0; /*azzera tutti margini*/
  padding:0;
}

/* NAVBAR */ 
.navbar{ 
  width:100%; /*larghezza totale dello schermo*/ 
  padding: 1.4em; /*spessore barra*/ 
  color:white; /*colore testo*/
  display:grid; /*layout a gliglia*/ 
  align-items:center; /*centra il contenuto in verticale*/ 
  background-color: #3a1e16; /*colore sfondo barra*/ 
   overflow-x:hidden;
} 

.navbar ul{ 
  list-style:none; /*toglie i puntini della lista*/ 
  display:flex; /*mette gli elementi in orizzontale*/ 
  gap:2em; /*spazio tra le parole*/ 
  justify-content:center; /*contenuto della barra centrale*/ 
  margin: 0; 
}

.navbar a{
  color:white;
  text-decoration:none; /*toglie la sottolineatura*/
  font-weight:600; /*grassetto*/
  font-size:1.05em; /*Dimensione del testo*/
  transition:0.2s; 
}

.navbar a:hover{
  color:#c9a48e; /*cambio di colore quando ci passi sopra*/
}

/*HEADER*/
.header{
  position:relative;
  background-image:url('cottura-carne-procedimento-valori-nutrizionali-composizione.jpg');
  background-position:center; /*centra l'immagine*/
  width:100%; /*header occupa tutta la larghezza*/
  max-width: 100%; /*impedisce che superi la larghezza dello schermo*/
  padding:6.5em 1.25em; 
  text-align:center; /*testo centrato*/
  overflow: hidden; 
}

/*per opacizzare l'immagine*/
.header::before{
  content:""; 
  position:absolute; /*distanza dal bordo*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.35);/*0.35 livello di opacità*/
  z-index:0; /*profondità dell'immagine rispetto al testo*/
}

.header h1{
  position:relative; 
  font-family:'cormorant-sans','Helvetica',sans-serif;
  font-size:2.6em;
  color:white;
  text-shadow:0 0.375em 1.375em rgba(0,0,0,0.6); /*ombra al testo*/
  margin-bottom:1%; 
}

.header p{
  position:relative;
  color:#f5e9e1;
  font-size:1.1em;
  max-width:70%;
  margin:0 auto; /*centra il testo*/
  line-height:1.6; /*spazio tra una riga e l'altra*/
}

/*SCHEDE*/
.schede{
  display:flex;
  justify-content:center; /*centra tutte le schede*/
  gap:2em; 
  padding:3em 2em;
}

.scheda{
  width:18.75em;
  background:white;
  border-radius:0.9375em; /*angoli arrotondati*/
  overflow:hidden; /*bordi superiori*/
  box-shadow:0 0.25em 0.75em rgba(0,0,0,0.1); /*ombra intorno alle schede*/
  transition:0.3s;
}

.scheda:hover{
  transform:scale(1.05); /*ingrandimento al tocco*/
}

.scheda img{
  width:100%;
  height:11.25em;
  object-fit:cover; /*l'immagine si adatta al contenitore*/
}

.scheda-body{
  padding:1.5em;
  text-align:center;
}

.scheda h3{
  font-family:'Cormorant Sans','Helvetica', sans-serif;
  font-size:1.6em; /*dimensione titolo*/
  color:#3a1e16;
  margin-top: 1%;
   margin-bottom:3%;
}

.scheda p{
  color:#4d3d36;
  margin-bottom:0.875em; /*distanza dai bottoni*/
  font-size:0.95em;
  line-height:1.5;
}
 
/*stile dei bottoni*/
.bottoni{
  background:#8b4a2f;
  padding:0.625em 1.125em; 
  color:white;
  border-radius:0.5em; /*ampiezza del bordo*/
  font-weight:600; /*grandezza testo*/
  text-decoration:none;
  transition:0.25s;
}

.bottoni:hover{
  background:#3a1e16; /*quando passi sopra al bottone cambia colore*/
}

/*testo introduttivo metodi*/
.testo{  
  max-width:68.75em; 
  margin:3.125em auto; 
  padding:0 1.25em; 
  line-height:1.7; /*spazio tra le righe*/
  text-align: justify;
}

/*linea divisoria*/
.linea {
    width: 100%;
    height: 0.125em; 
    background-color: #ccc;
    margin: 2.72% 0; 
}

/*CONTENUTO DELLE PAGINE*/
.contenuto{
  max-width:68.75em;
  margin:3.75em auto;
  padding:0 1.5em;
}
 /*blocchi informativi*/
.blocco{
  display:flex; /*posiziona il testo accanto all'immagine*/
  gap:2.2em; /*distanza tra immagine e testo*/
  align-items:center;
  margin-bottom:4em; 
}

.blocco img{
  width:17.5em;
  border-radius:0.875em; /*arrotonda angoli immagine*/
  flex-shrink:0; /*impedisce all'immagine di restringersi*/
}

.blocco h2{
  font-family:'Cormorant Sans', sans-serif;
  font-size:2em;
  color:#3a1e16;
  margin-bottom:1%; 
}

.blocco p{
  font-size:1.05em;
  line-height:1.65;
  color:#4d3d36;
  text-align: justify;
}

/*"Lo sapevi che"*/
.nota{
  background: linear-gradient(135deg, #f2e4d8, #e8d5c5);
  color:#3a1e16;
  padding:0.875em 1.125em;
  border-left:0.375em solid #8b4a2f; /*bordo al lato della nota*/
  border-radius:0.5em;
  margin-top:-2.5em;
  margin-bottom:2.5em;
  font-size:0.95em;
  line-height:1.65;
  box-shadow:0 0.25em 0.625em rgba(0,0,0,0.08); /*ombra*/
}

footer{
  background:#8b5e3c;
  color:white;
  text-align:center;
  padding:1em;
  margin-top:3em;
  font-size:0.9em;
}

.licenza{
  display: flex;
  flex-direction: column; 
  align-items: center;    
  gap: 0.5em;              
}

.licenza img {
  height: 1.5em;
  width: 3em;
}

.licenza a{
  color: white;
  text-decoration: none;
  font-size:  0.6em;
}