box {
            box-sizing: border-box;
        }

        body {
            
            margin: 0;
            padding: 0;
            background-color: lightblue;
            
        }

        /* Intestazione */
        header {
            background-color: lightblue;
            color: blue;
            width: 100%;
            height: 30%;
            text-align: center;
            
        }

        /* Contenitore principale */
        .container {
            display: flex;
            flex-wrap: wrap; /* Permette agli elementi di andare a capo */
           
        }



        /* Articolo principale */
        main {
            flex: 3; /* Occupa più spazio (proporzione 3) */
            width: 100%;
            background-color: lightblue;
           overflow-y: auto; /* Aggiunge la barra di scorrimento verticale */
            height: auto;
            
            
       }

        /* Barra laterale (Sidebar) */
        aside {
            flex: 1; /* Occupa meno spazio (proporzione 1) */
            min-width: 30%;
            overflow-y: auto; /* Aggiunge la barra di scorrimento verticale */
            background-color: lightblue;
            padding-left: 20px;
             height: auto;
            
       }
      
    
        /* Piè di pagina */
        footer {
            background-color: lightblue;
            color: black;
            text-align: center;
            border: 3px #8b5a2b;
            position: fixed;
            margin: 0;
            width: 100%;
            height: 20%;
            
        }


        /* Media Query: per schermi piccoli (smartphone) */
        @media (max-width: 768px) 


{
            .container {
                flex-direction: column; /* Impila gli elementi verticalmente */
            }

            footer {
                position: relative;
                height: 20px;
                }

h1 {
               font-size: 14px;

           }

h2 {
               font-size: 14px;
               
           }

h3 {
               font-size: 10px;
               
           }

h4 {
               font-size: 12px;

           }

h5 {
               font-size: 12px;

           }



nav {
               font-size: 12px;
            }
        

.griglia-immagini {
  display: grid;
  /* Crea colonne automatiche che si adattano allo schermo */
  grid-template-columns: repeat(auto-fit, minmax(73px, 1fr));
  gap: 10px; /* Spazio tra le immagini */
           }
      


.griglia-immagini img {
  width: 30%;
  height: auto;
  border-radius: 10px; /* Dati angoli arrotondati opzionali */
          }
    
.pagina-testo {
;height: 800px
       }
       
pagina-libro {
;height: 800px
       }


.figcaption {
  margin-top: 7px; /* Spazio tra l'immagine e la didascalia */
  font-size: 6px;
 
          }



     }

/*...................................*/

        /* 1. Il contenitore principale (la finestra visibile) */
        .slider-container {
            width: 80%;          /* Larghezza del riquadro */
            height: 420px;         /* Altezza del riquadro (mostra circa 2 immagini alla volta) */
            overflow: hidden;      /* Nasconde le immagini che escono dal riquadro */
            border: 3px double #8b5a2b;
            border-radius: 8px;
            margin: 5px 10px 10px;
            position: relative;
        }

        /* 2. La striscia che contiene tutte le immagini */
        .slider-track {
            display: flex;
            flex-direction: column; /* Dispone le immagini in verticale */
            /* Avvia l'animazione: nome, durata (20s), andamento lineare, ciclo infinito */
            animation: scorrimentoVerticale 40s linear infinite;
        }

        /* 3. EFFETTO HOVER: Blocca l'animazione al passaggio del mouse */
        .slider-container:hover .slider-track {
            animation-play-state: paused;
        }

        /* Styling delle singole immagini */
        .slider-track img {
            width: 100%;
            height: 200px;         /* Altezza fissa per ogni immagine */
            object-fit: cover;     /* Adatta l'immagine senza distorcerla */
        }

        /* 4. L'ANIMAZIONE: Sposta la striscia verso l'alto */
        /* Nota: Lo spostamento finale (-1000px) corrisponde all'altezza totale delle prime 5 immagini originali */
        @keyframes scorrimentoVerticale {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-1000px); 
            }
        }