/* ===============================
   BODY - STILI GENERALI
=============================== */
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: black;
    margin: 0px;  /* aggiunto 'px' */
    padding: 0px; /* aggiunto 'px' */
}

/* ===============================
   HERO - SEZIONE PRINCIPALE
=============================== */
.hero {
    position: relative;
    text-align: center;
    color: white;
}

.hero-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.hero-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: grey;
    padding: 10px 20px;
    border-radius: 10px;
}

/* ===============================
   INTRO, TABELLE, IMMAGINI PASSIONI
=============================== */
.intro,
.tabella-passioni,
.immagine-passione {
    width: 80%;
    margin: 30px auto;
    background-color: grey;
    padding: 20px;
    border-radius: 10px;
}

.foto-passione {
    display: block;
    width: 50%;
    margin: 20px auto;
    border-radius: 10px;
}

.didascalia {
    text-align: center;
    font-style: italic;
    color: lightpink;
}

/* ===============================
   TABELLE
=============================== */
table {
    width: 70%;
    margin: 20px auto;
    border-collapse: collapse;
}

td {
    border: 1px solid red;
    padding: 15px;
    background-color: lightpink;
}

/* ===============================
   LINK SEZIONE
=============================== */
.link-sezione ul {
    list-style-type: square;
    width: 60%;
    margin: 0 auto;
    padding: 0;
}

.link-sezione a {
    color: red;
    text-decoration: none;
}

.link-sezione a:hover {
    text-decoration: underline;
}

/* ===============================
   FOOTER
=============================== */
footer {
    justify-content: space-between;
    align-items: center;
    background-color: grey;
    padding: 10px 20px;
    font-size: 0.9em;
}

/* ===============================
   SITOGRAFIA
=============================== */
.sitografia li {
    margin: 8px 10px;
}

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

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

/* ===============================
   SECONDA PAGINA - LINK E TESTI
=============================== */
.seconda-pagina {
    text-align: center;   /* centra tutto il testo */
    color: black;
    padding: 40px 20px;  /* spazio interno alla pagina */
}

.seconda-pagina .titolo-seconda {
    font-size: 36px;      /* dimensione fissa del titolo */
    margin-bottom: 20px;  /* spazio sotto il titolo */
}

.seconda-pagina .descrizione-seconda {
    font-size: 1.2em;     /* dimensione leggermente più grande del testo normale */
    margin-bottom: 30px;  /* spazio sotto la descrizione */
}

/* ===============================
   SECONDA PAGINA - CENTRATURA TOTALE
=============================== */
.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;
}