html,body{
  font-family:'Cormorant Sans', sans-serif;
  background-color:rgb(226, 239, 255); /*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: rgb(187, 219, 255); /*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: #fc7f4a;
  text-decoration:none; /*toglie la sottolineatura*/
  font-weight:600; /*grassetto*/
  font-size:1.05em; /*Dimensione del testo*/
  transition:0.2s; 
}

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

/*---------------------------------- HEADER ---------------------------------- */
.header{
  position:relative;
  background-image:url('porto3.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 h2{
  font-family:'Cormorant Sans','Helvetica', sans-serif;
  font-size:1.6em; /*dimensione titolo*/
  color:#fc7f4a;
  margin-top: 1%;
   margin-bottom:3%;
}
/*-------------- TESTO DENTRO RIQUADRI ------------ */
.scheda p{
  color:#023276;
  margin-bottom:0.875em; /*distanza dai bottoni*/
  font-size:0.95em;
  line-height:1.5;
}



/* ---------------------------------- stile dei bottoni ---------------------------------- */
.bottoni{
  background:#fc7f4a;
  padding:0.625em 1.125em; 
  color:white;
  border-radius:0.5em; /*ampiezza del bordo*/
  font-weight:300; /*grandezza testo*/
  text-decoration:none;
  transition:0.25s;
}

.bottoni:hover{
  background:#0047AB; /*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;
}

/* ---------------------------------- footer ---------------------------------- */
.site-footer {
  background-color: #0047AB;
  color: #eee;
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  margin-top: auto;
  border-top: 1px solid #555;
}

.site-footer a {
  color: #aad4ff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
} 

.site-footer p {
  text-align: center;  /* o left, right, quello che vuoi */
}

/*---------------Pagina 1 Misure testo principale----------------- */
.Menu-completo {

    width:70%;

    margin:4em auto;

    text-align:center;
}
.Menu-completo h1 { 

    font-family: Georgia, serif;

    font-size:3em;

    color:#0047AB;

    letter-spacing:2px;

    margin-bottom:0.5em;
}
.Menu-completo p {

    font-family: Georgia, serif;

    font-size:1.3em;

    line-height:1.7;

    color:#3a2e28;

    font-style:italic;
}
/*-----------Misure e colore sottotitoli pagina 1 -----la sezione p modifica i paragrafi all'interno della sezione---*/
.Menu-completo {

    width:70%;

    margin:4em auto;

    text-align:center;
}
.Menu-completo h2 {

    font-family: Georgia, serif;

    font-size:1.5em;

    color:#0047AB;

    letter-spacing:2px;

    margin-bottom:0.5em;
}
.Menu-completo p {

    font-family: Georgia, serif;

    font-size:1.3em;

    line-height:1.7;

    color:#3a2e28;

    font-style:italic;
}

/*------------- Pagina 2 misure e colori testo principale e sottotioli--------------*/
.lafocacciaa {

    width:70%;

    margin:4em auto;

    text-align:center;
}
.lafocacciaa h1 {

    font-family: Georgia, serif;

    font-size:3em;

    color:#0047AB;

    letter-spacing:2px;

    margin-bottom:0.5em;
}

.lafocacciaa h2 {

    font-family: Georgia, serif;

    font-size:1.5em;

    color:#0047AB;

    letter-spacing:2px;

    margin-bottom:0.5em;
}
.lafocacciaa p {

    font-family: Georgia, serif;

    font-size:1.3em;

    line-height:1.7;

    color:#3a2e28;

    font-style:italic;
}


/*---------------------- PAGINA 3  --------------------- */

body.dizionario-page {

    background-color: #ffc7ba !important; /*------------lo sfondo è diverso rispetto alle altre pagine-----------*/

}

/*----TITOLO PAGINA------*/

.titolo-dizionario {

    width:70%;

    margin:4em auto;

    text-align:center;

}

.titolo-dizionario h1 {

    font-family: Georgia, serif;

    font-size:3em;

    color:#5b1e12;

    letter-spacing:2px;

    margin-bottom:0.5em;

}

/*----Sottotitolo-Il--dizionariodelsapore-------*/

.titolo-dizionario em {

    font-size:1.2em;

}

/*------Descrizione----*/

.titolo-dizionario p {

    font-family: Georgia, serif;

    font-size:1em;

    line-height:1.7;

    color:#3a2e28;

    font-style:italic;

}

/*----Singole parole del dizionario-----*/

.voce {

    width:70%;

    margin:4em auto;

    text-align:center;

    font-family:Georgia, serif;

    color:#2f261f;

}

/*-----Parolaprincipale---------*/

.voce h3 {

    font-family:"Times New Roman", serif;

    font-size:2em;

    font-style:italic;

    color:#5b1e12;

    margin-bottom:0.3em;

}

/*-----Categoriaparola-----*/

.categoria {

    font-size:1em;

    color:#6b5845;

}

/*----Etimologia-----*/

.etimo {

    font-size:1em;

    font-style:italic;

    color:#6b5845;

}

/*----Descrizionedelsignificato----*/

.voce p {

    font-size:1.1em;

    line-height:1.7;

}

/*------Pagina 3 misure foto -----*/
.foto3 {
    width:70%;
    margin:5em auto;
    text-align:center;
}
.foto3 img {
    width:100%;
    max-width:700px;
    height:auto;

    border:8px solid #f4f0e6;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.25);
}

/*---------------MISURE e colori TESTO PAGINA 4 ------*/
.U-salutu-finali {

    width:70%;

    margin:4em auto;

    text-align:center;

}
.U-salutu-finali h1 {

    font-family: Georgia, serif;

    font-size:3em;

    color:#0047AB;

    letter-spacing:2px;

    margin-bottom:0.5em;

}
.U-salutu-finali p {

    font-family: Georgia, serif;

    font-size:1.3em;

    line-height:1.7;

    color:#3a2e28;

    font-style:italic;

}

/*------- Pagina 4 misure foto per centrarle ---------*/ 
.sciacca7 {
    width:70%;
    margin:3em auto;
    text-align:center;
}
.sciacca7 img {
    width:100%;
    max-width:700px;
    height:auto;

    border:10px solid #f4f0e6;

    box-shadow:       
    0 8px 20px rgba(1, 76, 249, 0.25);
}
/*-----------------vincenzolicata--------------*/

.vincenzolicata {    /*---foto e testo---*/
    width:70%;
    margin:4em auto;
    display:flex;   /*------con il flex gli elementi vengono messi sulla stessa riga----*/
    align-items:center; /*---centra verticalmente foto e testo---*/
    gap:3em;   /*---crea lo spazio tra immagine e testo*/
}

.vincenzolicata-foto {
    width:35%;      /*----rende la foto più piccola....*/
    margin:0;
}

.vincenzolicata-foto img {
    width:100%;
    height:auto;

    border:10px solid #f4f0e6;

    box-shadow:
    0 8px 20px rgba(1,76,249,0.25);
}

.vincenzolicata-testopoesia {
    width:65%;    /*------testo puù grande rispetto la foto*/
    text-align:left;
}

.vincenzolicata-testopoesia p {
    font-family:Georgia, serif;
    font-size:1.3em;
    line-height:1.7;
    color:#3a2e28;
    font-style:italic;
}

/*---------------Vincenzo licata testo descrizione--------------*/
.vincenzolicatadescrizione{
    width:85%;
    margin:2em auto 4em auto;
    text-align:center;
}

.vincenzolicatadescrizione p{
    font-family:Georgia, serif;
    font-size:1.1em;
    line-height:1.8;
    color:#3a2e28;
}

/*-----------------portavagnu foto e testo--------------*/

.portavagnu{ /*fotoetesto-----*/
    width:70%;
    margin:4em auto;
    display:flex;
    align-items:flex-start;
    gap:3em;
}

.portavagnufoto{
    width:35%;  /*---foto più piccola----*/
    margin:0;
}

.portavagnufoto img{
    width:100%;
    height:auto;
    display:block;

    border:10px solid #f4f0e6;

    box-shadow:
    0 8px 20px rgba(1,76,249,0.25);
}

.portavagnu-testo{
    width:65%;    /*----testo più grande rispetto la foto-----*/
    text-align:left;
}

.portavagnu-testo p{
    font-family:Georgia, serif;
    font-size:1.3em;
    line-height:1.7;
    color:#3a2e28;
    font-style:italic;
}


/*--------------- descrizione. porta vagnu--------------*/
.ivansegreto{
    width:85%;
    margin:2em auto 4em auto;
    text-align:center;
    clear:both;
    display:block;
}

.ivansegreto p{
    font-family:Georgia, serif;
    font-size:1.1em;
    line-height:1.8;
    color:#3a2e28;
}




/*-----------Riferimenti Bibliografici----------*/

.bibliografia {

    width:70%;

    margin:4em auto;

    text-align:center;
}
.bibliografia h1 { 

    font-family: Georgia, serif;

    font-size:3em;

    color:#0047AB;

    letter-spacing:2px;

    margin-bottom:0.5em;
}
.bibliografia p {

    font-family: Georgia, serif;

    font-size:1.3em;

    line-height:1.7;

    color:#3a2e28;

    font-style:italic;
    }
    
    
    
/* ================= MEDIA QUERY MOBILE per dispositivi mobili ================= */

@media screen and (max-width: 768px) {

  /* ---------- GENERALE ---------- */

  html, body {
    overflow-x: hidden;
  }


  /* ---------- NAVBAR ---------- */

  .navbar {
    padding: 1em;
  }

  .navbar ul {
    flex-direction: column;
    gap: 1em;
    text-align: center;
    padding: 0;
  }

  .navbar a {
    font-size: 1em;
  }


  /* ---------- HEADER ---------- */

  .header {
    padding: 4em 1em;
  }

  .header h1 {
    font-size: 2em;
  }

  .header p {
    max-width: 90%;
    font-size: 1em;
  }


  /* ---------- SCHEDE ---------- */

  .schede {
    flex-direction: column;
    align-items: center;
    padding: 2em 1em;
  }

  .scheda {
    width: 90%;
  }

  .scheda img {
    height: auto;
  }


  /* ---------- TESTI PRINCIPALI ---------- */

  .testo,
  .Menu-completo,
  .lafocacciaa,
  .titolo-dizionario,
  .U-salutu-finali,
  .bibliografia {
    width: 90%;
    padding: 0;
  }


  .Menu-completo h1,
  .lafocacciaa h1,
  .titolo-dizionario h1,
  .U-salutu-finali h1,
  .bibliografia h1 {
    font-size: 2em;
  }


  .Menu-completo p,
  .lafocacciaa p,
  .U-salutu-finali p,
  .bibliografia p {
    font-size: 1.1em;
  }


  /* ---------- BLOCCHI FOTO + TESTO ---------- */

  .blocco {
    flex-direction: column;
    text-align: center;
  }

  .blocco img {
    width: 90%;
  }

  .blocco p {
    text-align: justify;
  }


  /* ---------- FOTO PAGINE ---------- */

  .foto3,
  .sciacca7 {
    width: 90%;
    margin: 3em auto;
  }

  .foto3 img,
  .sciacca7 img {
    width: 100%;
    border-width: 5px;
  }


  /* ---------- VINCENZO LICATA ---------- */

  .vincenzolicata {
    width: 90%;
    flex-direction: column;
    gap: 2em;
    text-align: center;
  }


  .vincenzolicata-foto,
  .vincenzolicata-testopoesia {
    width: 100%;
  }


  .vincenzolicata-testopoesia {
    text-align: center;
  }


  .vincenzolicata-testopoesia p {
    font-size: 1.1em;
  }


  .vincenzolicatadescrizione {
    width: 90%;
  }


  /* ---------- PORTA VAGNU ---------- */

  .portavagnu {
    width: 90%;
    flex-direction: column;
    gap: 2em;
  }


  .portavagnufoto,
  .portavagnu-testo {
    width: 100%;
  }


  .portavagnu-testo {
    text-align: center;
  }


  .portavagnu-testo p {
    font-size: 1.1em;
  }


  /* ---------- IVAN SEGRETO ---------- */

  .ivansegreto {
    width: 90%;
  }

  .ivansegreto p {
    font-size: 1em;
  }


  /* ---------- FOOTER ---------- */

  .site-footer {
    font-size: 0.8rem;
    padding: 15px;
  }

}