body{
  font-family: calibri;
  color: white;
  margin: 0px;
  padding: 0px;
}
.hero{ /*riferito al testo"le mie passioni" e all'immagine in lato colorata*/
  position: relative; /*posiziona un elemento in modo “relativo” alla sua posizione normale*/
  text-align: center;
  color: white;
}
.hero-img{ /*serve per cambiare la grandezza dell'immagine*/
  width:100%;
  height:300px; 
  object-fit: cover; /*controllare come un’immagine o un video si adatta dentro il contenitore*/
}
.hero-text{ /*posizionamente delle scritte sopra l'immagine e creazione del quadratino grigio*/
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: grey;
    padding: 10px 20px; /*altezza quadratino grigio*/
    border-radius: 10px; /*arrotondamento bordi quadratino grigio*/
}
.intro, /*main, secondo quadratino grigio e testo */
.tabella-passioni,
.immagine-passione {
    width: 80%;
    margin: 30px auto;
    background-color: grey;
    padding: 20px;
    border-radius: 10px;
}
.foto-passione {
    display: block; /*Occupa tutta la larghezza disponibile, inizia su una nuova riga, può avere larghezza e altezza impostate manualmente. immegine ferma*/
    width: 50%;
    margin: 20px auto;
    border-radius: 10px;
}
.didascalia { /* la scritta in rosa sotto l'immagine teatro*/
    text-align: center;
    font-style: italic;
    color: lightpink;
}
/*inizio tabella*/
table { /*mette il quadratino grigio con la scritta "le mie passioni" */
    width: 70%;
    margin: 20px auto;
    border-collapse: collapse; /*i bordi adiacenti delle celle si fondono in un unico bordo condiviso.*/
}
td { /*sfondo rosa della tabella e le linee rosse*/
    border: 1px solid red;
    padding: 15px;
    background-color: lightpink;
}
/*fine tabella*/

/*link sezione*/
.link-sezione ul { 
    list-style-type:square; /*i pallini dell’elenco vengono sostituiti da quadratini pieni */
    width: 60%;
    margin: 0 auto; /*l’elemento si centra orizzontalmente nel suo contenitore.*/
    padding-left: 20px; /* necessario per mostrare i quadratini */
    display: block; /* o default */
}
.link-sezione a {
    color: red;
    text-decoration: none /*Il link apparirà senza sottolineatura.*/
}
.link-sezione a:hover { /*Quando ci passi il mouse sopra, diventano rossi e sottolineati.*/
    text-decoration: underline; /*Tutto il testo dentro il paragrafo <p> verrà sottolineato sempre.*/
}
/*fine link*/
/*footer*/
footer { /*dove c'è il copyright*/
    display: flex; /* allinea tutto sulla stessa riga*/
    justify-content: space-between; /*Il primo elemento si posiziona all’inizio, l’ultimo elemento alla fine, gli altri elementi vengono distribuiti uniformemente nello spazio rimanente, controlla l’allineamento orizzontale*/
    align-items: center;
    background-color: grey;
    padding: 10px 20px;
    font-size: 0.9em;
}
/*fine footer*/
/*seconda pagina, link e testi*/
.seconda-pagina {
    text-align: center;       /* centra tutto il testo */
    display: flex;            /* attiva flexbox */
    flex-direction: column;   /* mette tutto in verticale */
    align-items: center;      /* centra tutto orizzontalmente */
    justify-content: center;  /* opzionale: centra verticalmente */
    padding: 40px 20px;
    color: black;
}
/* Titolo centrato */
.seconda-pagina .titolo-seconda {
    font-size: 36px;
    margin-bottom: 20px;
}

/* Descrizione centrata */
.seconda-pagina .descrizione-seconda {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* ===============================
   LISTA SITOGRAFIA - centrata
=============================== */
.seconda-sitografia {
    list-style-type: square;
    padding: 0;
    margin: 0 0 60px 0;
    text-align: left;      /* mantiene i bullet a sinistra */
    display: inline-block; /* permette di centrare la lista nel contenitore */
}

.seconda-sitografia li {
    margin: 8px 0;
}

.seconda-sitografia a {
    color: red;
    text-decoration: none;
}

.seconda-sitografia a:hover {
    text-decoration: underline;
}