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;
        height: 425px;
        }
        .galleria>img{
        width: 100%;
        height: 70%;
        display: block; /* Rimuove lo spazio sotto le immagini */
        border: 2px solid white;
        margin-bottom:25px;
        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: 22px; /* Ridotto per mobile */
            margin: 10px 0;
          }
        
          .menu > h2 {
            font-size: 14px;
            margin: 0;
            top: 40px;
          }
        
          .menu > ul {
            flex-direction: column;
            position: relative; /* Rimosso absolute per migliorare il layout */
            font-size: 14px;
            margin-top: -10px;
            margin-left: 370px;
            margin-bottom: -30px;
          }
        
          .menu > ul > li {
            margin: 5px 0;
          }
          .galleria {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Colonne più strette */
            gap: 20px;
            padding: 10px;
            width: 90%;
            grid-auto-rows: 200px; 
            height: 100%;
          }
        
          .galleria > img {
            width: 100%;
            height: 100%;
            margin-left: -2px;
            object-fit: cover; /* Mantiene le proporzioni senza distorsione */
            border-radius: 5px;
          }
      }
@media screen and (max-width: 900px) and (orientation: landscape) {
    /* Generale */
    body {
        text-align: center;
    }

    /* Menu */
    .menu {
        position: relative;
    }

    .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-bottom: -30px;
    }

    .menu > ul > li {
        margin: 5px 0;
        margin-left: 830px;

    }
    .galleria {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* 4 colonne fisse */
      gap: 20px;
      height: 300px; /* Altezza fissa, puoi regolare */
      padding: 10px;
      width: 96%;
  }
  
  .galleria > img {
      width: 100%;
      height: 75%;            /* Occupa tutta l’altezza della cella */
      object-fit: cover;       /* Per adattare l'immagine senza deformarla */
      border: 2px solid white;
      border-radius: 5px;
  }
    }