/* CSS per il menu "hamburger" */
.menu-toggle {
    display: none; /* Nasconde il menu-toggle per default */
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
}

@media (max-width: 680px) {
    .menu-toggle {
        display: block; /* Mostra il menu-toggle sui dispositivi mobili */
    }

    nav ul {
        display: none; /* Nasconde il menu per default sui dispositivi mobili */
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    nav ul.showing {
        display: block; /* Mostra il menu quando ha la classe 'showing' */
    }

    nav ul li {
        display: block; /* Mostra i link di navigazione uno sotto l'altro */
        text-align: left; /* Allinea i link a sinistra */
        margin: 5px 0;
    }

    nav ul li a {
        display: block; /* Assicura che i link occupino l'intera larghezza disponibile */
        padding: 10px; /* Aggiunge spazio intorno ai link */
    }
}

/* CSS specifico per il corpo della pagina */
body {
    font-family: "Microsoft Sans Serif", sans-serif;
    margin: 0;
    padding: 0;
    background-color: white; /* Sfondo bianco per l'intera pagina */
}

/* CSS specifico per l'intestazione */
header {
    background-color: white; /* Cambiato il colore di sfondo del header in bianco */
    color: black; /* Cambiato il colore del testo in nero */
    padding: 10px 0;
    text-align: center;
}

/* Stili per la navigazione */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: black; /* Colore del testo */
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold; /* Rende il testo in grassetto */
}

nav ul li a:hover {
    background-color: #555;
}

nav ul li a.active {
    background-color: #c3c3c3; /* Colore di sfondo per il link attivo */
    color: black; /* Colore del testo per il link attivo */
}

/* CSS specifico per l'eroe della pagina */
.hero {
    text-align: center;
    padding: 20px 50px 100px; /* Aggiunge spazio intorno all'immagine e al titolo */
    position: relative; /* Posizionamento relativo per allineare il titolo */
}

/* Contenitore per l'immagine */
.image-container {
    text-align: center;
    margin: 20px 0;
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    margin: 0 auto;
    border: none;
    max-width: 100%;
    height: auto;
}

/* Crediti della foto */
.photo-credit {
    text-align: right;
    font-size: 14px;
    color: #555;
    margin-top: 5px;
    width: 100%;
    position: relative;
    right: 0;
}

.home-page .photo-credit {
    margin-top: 10px; /* Aggiusta questo valore per regolare la distanza tra l'immagine e la didascalia */
    text-align: right; /* Allinea il testo della didascalia a destra */
}

/* Stili generali per il contenuto */
.content {
    text-align: center; /* Allinea il testo al centro */
    max-width: 800px; /* Larghezza massima per la sezione */
    margin: 0 auto; /* Centra la sezione orizzontalmente */
    padding: 20px; /* Aggiunge spazio intorno alla sezione */
    font-family: "Microsoft Sans Serif", sans-serif; /* Usa il carattere desiderato */
}

.content p {
    text-align: center; /* Allinea il testo dei paragrafi al centro */
    line-height: 1.5; /* Imposta l'interlinea a 1.5 volte l'altezza del carattere */
}

.content h1, .content h2, .content h3 {
    text-align: center; /* Mantiene i titoli centrati */
}

/* Altri stili CSS specifici per la pagina 'stampa' */
.thumbnails {
    display: flex; /* Utilizza il layout flessibile per le miniature */
    flex-wrap: wrap; /* Permette al contenitore delle miniature di andare a capo quando necessario */
    justify-content: center; /* Centra le miniature orizzontalmente */
    gap: 20px; /* Aggiunge spazio tra le miniature */
}

.thumbnail {
    width: calc(50% - 10px); /* Occupa metā della larghezza del contenitore delle miniature per disporle su due colonne */
    box-sizing: border-box; /* Assicura che il padding sia incluso nella larghezza */
    padding: 10px; /* Spazio intorno alla miniatura */
    text-align: center; /* Allinea il testo al centro */
}

.thumbnail img {
    max-width: 100%; /* Imposta una larghezza massima per le miniature */
    height: auto; /* Mantieni l'aspetto proporzionato */
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine all'interno del contenitore */
}

.caption {
    font-size: 14px; /* Riduci le dimensioni del carattere per le didascalie */
    margin-top: 10px; /* Aggiunge spazio sopra la didascalia */
}

/* Altri stili CSS */

@media (max-width: 768px) {
  /* Stili CSS per schermi con larghezza massima di 768px */
}

@media (max-width: 480px) {
  /* Stili CSS per schermi con larghezza massima di 480px (ad esempio, dispositivi mobili in modalitā verticale) */
}

/* Altri stili CSS */
.bio-section {
    text-align: left; /* Allinea il testo a sinistra */
    max-width: 700px; /* Larghezza massima per il contenitore del testo */
    margin: 0 auto; /* Centra il contenitore orizzontalmente */
    padding: 0 20px; /* Aggiunge spazio intorno al contenitore */
}

.bio-section h3 {
    text-align: center; /* Mantiene il titolo centrato */
}

.bio-section p {
    text-align: left; /* Allinea il testo dei paragrafi a sinistra */
}

/* CSS specifico per la pagina 'Le pių note' */
body {
    font-family: "Microsoft Sans Serif", sans-serif;
    margin: 0;
    padding: 0;
    background-color: white; /* Sfondo bianco per l'intera pagina */
}

header {
    background-color: white; /* Cambiato il colore di sfondo */
    color: black; /* Testo nero */
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    color: black; /* Testo nero */
    text-decoration: none;
    padding: 10px 20px;
}

nav ul li a:hover {
    background-color: #555;
    color: white; /* Testo bianco al passaggio del mouse */
}
nav ul li a.active {
    background-color: #c3c3c3; /* Colore di sfondo per il link attivo */
    color: black; /* Testo nero */
}

footer {
    text-align: center; /* Centra il testo nel pič di pagina */
    margin-top: 30px; /* Aggiunge spazio sopra al pič di pagina */
}

/* CSS specifico per la pagina 'stampa' */
.stampa-page .content p {
    text-align: center; /* Allinea il testo al centro */
    line-height: 1.5; /* Imposta l'interlinea a 1.5 volte l'altezza del carattere */
}

/* CSS specifico per l'immagine centrata e senza cornice nella pagina 'La disinvolta manolesta di Gavino Sanna' */
.gavino-page .image-container {
    text-align: center;
    margin: 20px 0;
}

.gavino-page .image-container h3 {
    text-align: center;
    margin: 10px 0;
}

.gavino-page .image-container img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    border: none;
}