header {
    background: #503214b3;
    padding: 1.25em;
    text-align: center;
    border-bottom: 0.25em solid #5a3f26;
}

header h1 {
    color: #f8e7c1;
    margin: 0;
    font-size: 3rem;
    text-shadow: 0.05em 0.05em #3b2f1e;
}

body {
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-image: url("paper.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
    color: #3b2f1e;
}

/* navbar */
nav {
    background: #fff5dc77;
    border-bottom: 0.25em solid #5a3f26;
    padding: 1em;
}

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 2.5em;
    }

    nav ul li a {
        text-decoration: none;
        color: #3b2f1e;
        font-size: 1.3em;
        font-weight: 600;
        padding: 0.5em 1em;
        border-radius: 0.3em;
        transition: 0.3s;
    }

    nav ul li a:hover {
        background: #fff5dcc7; /* sfondo schiarito quando passi cursore */
        color: #3b2f1e; /*testo stesso colore*/
    }


    nav ul li {
        position: relative; /*posiziona il submenu sotto la voce principale*/
    }

    /*menu tendina*/
    nav ul .submenu { 
        display: none; /*nasconde submenu*/
        position: absolute;
        background: #fff5dcea;
        border: 0.13em solid #5a3f26;
        border-radius: 0.3em;
        z-index: 20;
    }

    nav ul .submenu li a {
        display: block; /* voce occupa tutto il blocco */
        padding: 0.6em;
        border-bottom: 0.05em solid #5a3f26; /*separa le voci*/
        color: #3b2f1e;
        background: #fff5dc77;
    }

    nav ul .submenu li:last-child a {
        border-bottom: none; /*ultima voce senza bordo*/
    }

    nav ul li:hover > .submenu {
        display: block; /*mostra submenu al passaggio del mouse*/
    }

    @media (max-width: 40em) {
    nav ul {
        flex-wrap: wrap;
        gap: 1em;
    }

    nav ul li a {
        font-size: 1em;
        padding: 0.4em 0.6em;
    }
}
/*----*/


/* contenitore principale della pagina*/
.container {
    width: 80%;
    margin: auto;
    padding: 1.5em;
    background: #fff5dc93;
    border: 0.2em solid #5a3f26;
    border-radius: 0.6em;
    box-shadow: 0 0 1.25em #5a3f2680;
}

@media (max-width: 40em) {
    .container {
        width: 90%;
        padding: 1em;
    }
}

h2 {
    text-align: center;
    font-size: 2.2em;
    margin-top: 0;
}

p {
    text-align: justify;
    font-size: 1.2em;
    line-height: 1.6;
}


img {
    width: 18em;
    height: 18em; 
    border: 0.2em solid #5a3f26;
    border-radius: 0.6em; 
}

.container > img {
    display: block;
    margin: 0 auto 1.5em auto;
    max-width: 50%;
    width: 100%;
    height: auto;
    border-radius: 0.6em;
    box-shadow: 0 0 1em #5a3f2680;
}


/* blocco con immagini alternate */
.creature-block {
    display: flex;
    align-items: center;
    gap: 1.25em;
    margin: 2.5em 0;
    padding: 1.25em 0;
    background: none; /*elimina riquadri singoli */
    border: none;      
    box-shadow: none;  
}

/* alternanza */
.creature-block.left .image-container { order: 0; }
.creature-block.left .text-container  { order: 1; }

.creature-block.right .image-container { order: 1; }
.creature-block.right .text-container  { order: 0; }

/* immagine */
.image-container img {
    width: auto;
    border-radius: 0.6em;
    border: 3px solid #5a3f26;  
}

/* testo */
.text-container h3,
.text-container h2 {
    margin-top: 0;
    font-size: 1.8em;
    color: #3b2f1e;
}

.text-container p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #3b2f1e;
}


@media (max-width: 38em) {
    .creature-block {
        flex-direction: column;
        text-align: center;
    }

    .creature-block.left .image-container,
    .creature-block.right .image-container,
    .creature-block.left .text-container,
    .creature-block.right .text-container {
        order: initial;
    }

    .image-container img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}



/*galleria immagini*/
.gallery {
    display: flex;
    flex-wrap: wrap; /*immagini a capo*/
    gap: 1.8em;                           
    justify-content: space-between; 
    padding: 0.6em 0; 
    align-items: flex-start;                   
}

/* singolo elemento galleria */
.gallery-item {
    background: #fff5dcaa;               
    border: 3px solid #5a3f26;           
    border-radius: 0.6em;                 
    box-shadow: 0 0 0.6em #5a3f2680;     
    width: 19em;
    object-fit: cover;                        
    overflow: hidden; /*evita overflow*/
    transition: transform 0.2s, box-shadow 0.3s;  /*animazione*/
}

.gallery-item:hover {
    transform: scale(1.03); /*ingrandimento*/
    box-shadow: 0 0 1em #5a3f26cc; /* intensifica ombra */
}

/* immagine */
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 0.2em solid #5a3f26; /* bordo inferiore per separare l'immagine */
}

/* descrizione sotto */
.gallery-item div.desc {
    padding: 0.75em;
    text-align: center;
    font-size: 1.1em;
    color: #3b2f1e;
    font-family: Georgia, 'Times New Roman', Times, serif;  
    background: #fff5dcc0; 
}



@media (max-width: 700px) {
    .gallery {
        justify-content: center;
    }
    .gallery-item {
        width: 45%; /* due immagini per riga */
    }
}

@media (max-width: 450px) {
    .gallery-item {
        width: 90%;                      /* Una immagine per riga */
    }
}


.licenza {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6em;
    justify-content: center; /* elementi centrati su tutta la larghezza */
    padding: 0.6em 0; 
    position: relative; /* resta in fondo al flusso della pagina */
    bottom: 0;
    font-size: 0.9em; 
    color: #3b2f1e;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}

.licenza img {
    width: 2.5em;
    height: auto;
}

/*dropdown*/
.dropdown {
    position: relative;
    display: inline-block; 
    text-align: center;
}

.dropdown-content {
    display: none; /* nascosto finché non c’è hover */
    position: absolute;
    top: 100%; /* esce sotto l’elemento */
    left: 0;
    
    background: #fff5dcea;
    border: 2px solid #5a3f26;
    border-radius: 0.5em;
    box-shadow: 0 0 0.75em #5a3f2680;

    min-width: 10em;
    padding: 1em 1.25em; 
    z-index: 1; /* sta sopra gli altri elementi ma sotto nav */
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.dropdown:hover .dropdown-content {
    display: block; /* mostra al passaggio del mouse */
}

.container .dropdown {
    font-size: 1.2em; 
    background: #fff1cbaa;
    padding: 1em 1.25em;
    border: 0.1em solid #5a3f26;
    border-radius: 0.5em;
    box-shadow: 0 0 0.6em #5a3f2680;
    display: inline-block; 
    margin-bottom: 1.25em;
}

@media (max-width: 20em) {
    .container .dropdown {
        font-size: 1em;
        padding: 0.8em 1em;
    }
    .dropdown-content {
        font-size: 0.1em;
        padding: 0.8em;
    }
}


.footer-note {
    text-align: center;
    font-size: 0.75em;
    color: #3b2f1e;
    margin-top: 2em;
    opacity: 0.7;
}


/*girare pagina*/
.page-nav {
    width: 100%;
    display: flex;
    justify-content: center; /* uno a sinistra, uno a destra */
    align-items: center;
    gap: 75%;
}

#next, #prev {
    width: 4em;
    height: 4em;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
}

/* freccia a destra */
#next {
    background-image: url("right.png");
}

/* freccia a sinistra */
#prev {
    background-image: url("left.png");
}

@media (max-width: 40em) {
    .page-nav {
        gap: 40%;
    }
}

@media (max-width: 20em) {
    .page-nav {
        gap: 20%;
    }
}


/*cambiare lingua*/
.language-switch {
    position: absolute;
    top: 1em; /* distanza dal top */
    right: 1em; /* distanza dal lato destro */
    display: flex;
    flex-direction: column; /* uno sotto l’altro */
    gap: 0.5em; /* distanza tra it e en */
}

#it, #en {
    width: 1.5em; /* dimensioni sprite */
    height: 1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    cursor: pointer;
}

/* sprite */
#it {
    background-image: url("it.png");
}

#en {
    background-image: url("en.png");
}

@media (max-width: 20em) {
    .language-switch {
        top: 4.5em;
        right: 0.7em;
        transform: scale(0.8);
    }
}