/* Stili di base */ 
body, html { 
    margin: 0; 
    padding: 0; 
    font-family: 'Gotham', sans-serif; 
    width: 100%; 
    height: 100%; 
    background: url('img/SfondoTraspVanigliaPro.png') no-repeat center center fixed; 
    background-size: cover; 
    color: #fff; 
} 
    .container { 
        width: 100%; 
        max-width: 800px; 
        margin: 50px auto; 
        padding: 20px; 
        border-radius: 8px; 
        box-shadow: 0px 0px 10px rgba(0,0,0,0.1); 
        text-align: center; 
        background-color: rgba(255, 255, 255, 0.385); 
    } 
    .button-list { 
        display: flex; 
        flex-direction: column; 
        gap: 10px; 
        align-items: center;
    } 
    
    .button-list a img {
        width: 100%; 
        max-width: 350px; 
        height: auto; 
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .floating-back { 
        position: fixed; 
        bottom: 20px; left: 20px; z-index: 1000; 
        left: 0;         /* Allinea a sinistra */
        bottom: 0;       /* Allinea in basso */
       
   
    } 
        .floating-back img { 
            width: 50px; 
            height: auto; 
            cursor: pointer;
            transition: transform 0.3s ease; 
        } 
      
    
        h1 { 
            font-size: 32px; 
            color: #000; 
            margin-bottom: 10px; 
        } 
        h2 { 
            font-size: 17px; 
            color: #353434; 
            margin-bottom: 20px; 
            font-weight: 100;
        } 
      
        /* video */ 
        .video-list { 
            display: flex; 
            flex-direction: column; gap: 15px; 
            align-items: center; 
        }  
            
            .video-item { 
                background: #b9cbe292;
                padding: 15px; 
                border-radius: 8px; 
                width: 100%; 
                max-width: 600px; 
                text-align: center; 
                color: #000; 
            } 
                /* Container per l'anteprima video */ 
                .video-preview { 
                    position: relative; 
                    cursor: pointer; 
                    margin-top: 10px; 
                } 
                /* Thumbnail */ 
                .video-preview img { 
                    width: 100%; 
                    height: auto; 
                    border-radius: 8px; 
                } 

            
           
                        /* Importa il font Gotham */ 
                        @font-face { font-family: 'Gotham'; 
                            src: url('font/gotham-book-webfont.woff2') format('woff2'), 
                            url('font/gotham-book-webfont.woff') format('woff'), 
                            url('font/gotham-book-webfont.ttf') format('truetype'); 
                            font-weight: normal; 
                            font-style: normal; 
                        }


    
  .video-container-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
    padding: 20px;
  }

  .video-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: calc(50% - 20px); /* Due colonne con spazio tra loro */
    max-width: 400px; /* Limita la larghezza massima di ogni colonna */
    box-sizing: border-box;
  }

  .video-container h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
    color: #333;
  }

  video {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }