@font-face {
  font-family:'Alice' ;
  src: url(font/Alice.ttf) format(truetype);
}

@font-face {
  font-family:'Bodonibold' ;
  src: url(font/BodoniFLF-Bold.ttf) format(truetype);
}

@font-face {
  font-family:'bod' ;
  src: url(font/bod.ttf) format(truetype);
}

@font-face {
  font-family:'PL' ;
  src: url(font/Pl.ttf) format(truetype);
}

@font-face {
  font-family:'Didot' ;
  src: url(font/Didot.otf) format(truetype);
}
@font-face {
  font-family:'DidotDisplayLP' ;
  src: url(font/DidotDisplay.ttf) format(truetype);
}

@font-face {
  font-family:'Poppinsbold' ;
  src: url(font/Poppins-Bold.ttf) format(truetype);
}
@font-face {
  font-family:'PoppinsSemiBold' ;
  src: url(font/Poppins-SemiBold.ttf) format(truetype);
}
@font-face{
  font-family:'Zing';
  src:url(font/Zing.ttf) format(truetype);
}

@font-face{
  font-family:'Vanity';
  src:url(font/Vanity.otf) format(truetype);
}

@font-face{
  font-family:'gotic';
  src:url(font/gotic.ttf) format(truetype);
}

/*---------------------------------------------------- */

/* definisco che l'immagine e il body rispetti le dimensioni che gli ho dato */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* Qua inizia la grafica del menu a scomparsa */



#menuBtn {
    position: fixed;
    top: 20px;
    left: 10px;
    z-index: 2000; /* molto sopra il menu e overlay */
    padding: 10px 15px;
    color: black;
    font-family: Vanity;
    font-size: 2rem;
    letter-spacing: 5px;
    border: none;
    cursor: pointer;
    border-radius: none;
    transition: opacity 0.3s ease;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Menu a comparsa */
#sidebar {
    position: fixed;
    top: 0;
    gap: 10px;
    left: -350px;
    width: 250px;
    height: 100%;
    background: #bd0000;
    overflow-y: auto;
    padding: 50px;
    transition: left 0.3s ease;
    z-index: 1000; /* sotto il bottone */
}
#sidebar.active {
    left: 0;
}


#sidebar input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
}

#sidebar ul {
  list-style: none;
  padding: 0;
}

#sidebar li {
  margin-bottom: 15px;
}

#sidebar a {
  text-decoration: none;
  color: white;
}

#sidebar a:hover {
  color: white;
 font-size: 22px;
}

#sidebar .divider {
    height: 1px;
    margin: 40px 0;
}


#storyList {
  font-family: Didot;
  font-weight: 100;
  font-size: 20px;
}

/* qua inizia il  Contenuto del blog ----------------------------------------------------------------------------------------- */
#content {
  max-width: 1000px;
  margin: auto;
}
#content1, #content2, #content3, #content4, #content5, #content6 {
  font-family:Didot;
  font-size: 18px;
  color: #1F0800;

}

/* Overlay semi-trasparente quando il menu è aperto */
#overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 900;
}


.T1, .T2, .T3, .T4, .T5, .T6 {
  margin-top: 60px;
  font-family: Didot;
  font-size: 10rem;
  font-weight: 100;
}

#storia1, #storia2, #storia3, #storia4, #storia5, #storia6 {
  font-family: Didot;
  font-size: 2.5rem;
}

.sottotesto1, .sottotesto2, .sottotesto3, .sottotesto4, .sottotesto5, .sottotesto6 {
  font-family: Didot;
  font-size: 1.7rem;
  font-weight: 200;
}

/* --- STILE GIORNALE --- */

#content1,
#content2,
#content3,
#content4,
#content5,
#content6 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
  row-gap: 0; /* ZERO spazio verticale */
}


/* i paragrafi scorrono come colonne editoriali */
#content1 p,
#content2 p,
#content3 p,
#content4 p,
#content5 p,
#content6 p {
 line-height: 1.65;
  margin: 0 0 1.4em 0;
}

.img-center {
  grid-column: 1 / -1;   /* attraversa le due colonne */
  display: flex;
  justify-content: center;
  align-self: center;    /* non spinge il layout */
  padding: 1.2em 0;     /* respiro editoriale minimo */
}

.img-center img {
  width: 100%;
  max-width: 380px;
  display: block;
}


.img-center img:hover {
  transform: scale(1.05);
  opacity: 0.6;

}


#content1 p:first-child::first-letter,
#content2 p:first-child::first-letter,
#content3 p:first-child::first-letter,
#content4 p:first-child::first-letter,
#content5 p:first-child::first-letter,
#content6 p:first-child::first-letter {
  font-size: 6rem;
  float: left;
  line-height: 1;
  margin-right: 8px;
  font-family: Alice;
  color: #ff3131 ;
}


@media (max-width: 600px) {
  #content1,
  #content2,
  #content3,
  #content4,
  #content5,
  #content6 {
    grid-template-columns: 1fr;
  }

  .img-center {
    padding: 1em 0;
  }
}

/* ===================================================== */
/* MOBILE – SMARTPHONE (fino a 600px)                    */
/* ===================================================== */

@media (max-width: 600px) {

  /* ----------------------------- */
  /* RESET STRUTTURALE */
  /* ----------------------------- */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  #content {
    padding: 0 16px;
  }

  /* ----------------------------- */
  /* MENU */
  /* ----------------------------- */
  #menuBtn {
    font-size: 1.4rem;
    letter-spacing: 3px;
    top: 15px;
    left: 15px;
  }

  #sidebar {
    width: 220px;
    padding: 30px 20px;
  }

  #storyList {
    font-size: 16px;
  }

  /* ----------------------------- */
  /* TITOLI */
  /* ----------------------------- */
  .T1 {
    font-size: 4rem;
    margin-top: 80px;
    text-align: center;
  }

  #storia1,
  #storia2,
  #storia3,
  #storia4,
  #storia5,
  #storia6 {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-top: 60px;
  }

  .sottotesto1,
  .sottotesto2,
  .sottotesto3,
  .sottotesto4,
  .sottotesto5,
  .sottotesto6 {
    font-size: 1.1rem;
    line-height: 1.4;
  }

  /* ----------------------------- */
  /* CONTENUTO EDITORIALE */
  /* ----------------------------- */
  #content1,
  #content2,
  #content3,
  #content4,
  #content5,
  #content6 {
    display: block;          /* ADDIO colonne */
    font-size: 16px;
  }

  #content1 p,
  #content2 p,
  #content3 p,
  #content4 p,
  #content5 p,
  #content6 p {
    line-height: 1.7;
    margin-bottom: 1.2em;
  }

  /* Capolettera */
  #content1 p:first-child::first-letter,
  #content2 p:first-child::first-letter,
  #content3 p:first-child::first-letter,
  #content4 p:first-child::first-letter,
  #content5 p:first-child::first-letter,
  #content6 p:first-child::first-letter {
    font-size: 4rem;
    line-height: 1;
    margin-right: 6px;
  }

  /* ----------------------------- */
  /* IMMAGINI */
  /* ----------------------------- */
  .img-center {
    padding: 1em 0;
  }

  .img-center img {
    max-width: 100%;
    border-radius: 2px 2px;
  }

  /* ----------------------------- */
  /* LINK E HOVER (NO EFFETTI INUTILI) */
  /* ----------------------------- */
  .img-center img:hover {
    transform: none;
    opacity: 1;
  }

}