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 */
    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: 480px) {
      /* 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%;
        }
      
        .galleria > img {
          width: 100%;
          height: 100%;
          margin-left: -2px;
          border-radius: 5px;
          object-fit: cover;
        }
      }