#menu{
    background-image: url(../img/menu-01.png);
    background-repeat: no-repeat;
    width: 1920px;
    height: 1080px;
    position: relative;
    z-index: 0;
    display: flex;
    overflow: hidden;    
}

.menu-btn{
    position:relative;
    height: 1080px;;
    background-repeat: no-repeat;
    z-index: 10;
    cursor: pointer;
    animation: fadeIn 1s;
}

#menu-boutonconnaitre{
    background-image: url(../img/menu-02.png);
    margin-left: 550px;
    width: 410px;
}

#menu-boutoncomprendre{
    background-image: url(../img/menu-03.png);
    width: 417px;
}

#menu-boutonjouer{
    background-image: url(../img/menu-04.png);
    width: 359px;
}

#menu-boutonprogramme{
    background-image: url(../img/menu-05.png);
    width: 184px;
}

@media screen and (max-width :1334px){
    #menu{
        width: 1334px;
        height: 800px;
        background-image: url(../img/menu-tab-01.png);
    }    

    #menu-boutonconnaitre{
        background-image: url(../img/menu-tab-02.png);
        margin-left: 338px;
        width: 308px;
    }

    #menu-boutoncomprendre{
        background-image: url(../img/menu-tab-03.png);
        width: 304px;
    }

    #menu-boutonjouer{
        background-image: url(../img/menu-tab-04.png);
        width: 281px;
    }

    #menu-boutonprogramme{
        background-image: url(../img/menu-tab-05.png);
        width: 107px;
    }

}


/*
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
*/

  /*@keyframes glissement {
    from {
      margin-left: 100%;
      width: 300%; 
      
      animation-duration: 3s;
    animation-delay: 15s;
    animation-name: glissement;
    animation-iteration-count: infinite;/*

    */
#debug{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height: 25px;
    background-color: rgba(rgba(0, 0, 0, 0.329), green, blue, alpha);
    color: white;
    text-align: right;
}