body{
    font-family: "Bodoni Moda", serif;
    background-color: black;
    }
    .menu{
        position: sticky;    /* Rende il menù "appiccicoso" */
        top: 0;              /* Fa in modo che il menù resti in cima alla pagina */
        z-index: 1000;
        }
        .menu>h1{
        text-align: left;
        margin-left: 20px;
        margin-top: 40px;
        font-family: "Bodoni Moda", serif;
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;
        font-size: 40px;
        letter-spacing: 1px;
        color: white;
        }
        .menu>h2{
        position: absolute;
        text-align: left;
        margin-left: 20px;
        margin-top: -30px;
        font-family: "Bodoni Moda", serif;
        font-optical-sizing: auto;
        font-weight: lighter;
        font-style: normal;
        font-size: 25px;
        color: white;
        }
        .hidden {
          opacity: 0;
          transition: all 3.2s ease;
        }
        
        .slide-sx {
          transform: translateX(-100px);
        }
        .slide-dx {
          transform: translateX(100px);
        }
        .zoom {
          transform: scale(0.2);
        }
        
        .fade {
          transform: translateY(20px);
        }
        
        /* Applica l'effetto quando viene aggiunta la classe .show */
        .show {
          opacity: 1;
          transform: none;
        }
        .menu>ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-top: -80px; /* Posiziona il menu in alto */
        right: 60px; /* Posiziona il menu a destra */
        display: flex; 
        font-size: 25px;
        font-weight: lighter;
        font-family: "Bodoni Moda", serif;
        position: absolute;
        }
        .menu>ul>li{
        margin-left: 50px; /* Distanza tra i menu items */
        }
        .menu>ul>li>a {
        text-decoration: none; /* Rimuove la sottolineatura dei link */
        color: white; /* Colore del testo */
        padding: 1px; /* Spaziatura interna */
        display: block;
        border-bottom: 1px solid transparent;
        border-radius: 2px;
        transition: border-color 0.9s;
        }
        .menu>ul>li>a:hover{
        border-bottom-color: white;
        }
        .galleria{
          border: 3px solid white;
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crea colonne fluide */
          grid-auto-rows: 350px; 
          gap: 20px; /* Distanza tra le immagini */
          padding: 20px;
          margin-top: 50px;
          }
          .galleria>img{
          width: 100%;
          height: 100%;
          display: block; /* Rimuove lo spazio sotto le immagini */
          border: 2px solid white;
          cursor: pointer;
          transition: transform 0.3s; 
          }
          .galleria>img:hover{
            transform: scale(1.05);
          }
        @media (max-width: 768px) {
            /* Generale */
            body {
              font-size: 16px;
              text-align: center;
            }
          
            /* Menu */
            .menu {
              position: relative;
              width: 90%;
            }
          
            .menu > h1 {
              font-size: 25px; /* Ridotto per mobile */
              margin: 10px 0;
            }
          
            .menu > h2 {
              font-size: 20px;
              margin: 0;
              top: 40px;
            }
          
            .menu > ul {
              flex-direction: column;
              position: relative; /* Rimosso absolute per migliorare il layout */
              font-size: 20px;
              margin-top: -15px;
              margin-left: 370px;
              margin-bottom: -30px;
            }
          
            .menu > ul > li {
              margin: 5px 0;
            }
          
            /* Galleria */
            .galleria {
              grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Colonne più strette */
              gap: 20px;
              padding: 10px;
              width: 93%;
              grid-auto-rows: 200px; 
            }
          
            .galleria > img {
              width: 100%;
              height: 100%;
              margin-left: -2px;
              object-fit: cover; /* Mantiene le proporzioni senza distorsione */
              border-radius: 5px;
            }
          }