header {
    position: absolute;
    width: 100%;
    height: 8vh;
    top: 0;
    left: 0;
    background: #000;
    color: #fff;
    padding: 0 1rem;
}

nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

img.logo { width: 90px;
}

.toggle {
    display: none;
}

.menu {
    display: flex;
    justify-content: space-between  ;
    align-items: center;
    list-style: none;
    width: 1960px;
    padding-right: 80px;
}

.menu li a {
    color: white;
    text-decoration: none;
    font-family: 'Comfortaa', cursive;
}






h1.titre{justify-items: center;
text-decoration: underline;
color: white
;
font-family: 'Comfortaa', cursive;}

nav ul li:hover{
    transform: scale( 1.3);
    transition: 0.3s all;
 
}
nav ul li{ color: pink;}
body{background-color: whitesmoke;}








   h1.introduction {
    font-family: 'Comfortaa', cursive;
        color: #000 ;
        padding-top: 40px;
        text-align: center;
        text-decoration: underline 5px ;
        
        

    }
    p.introduction{
        
        text-align: center;
        font-size: 20px;
        font-family: 'Comfortaa', cursive;
    }
     

      
      table  {
        border-collapse: collapse;
        margin: auto;
        border: 2px solid black;
      }
      thead tr {
        background-image: linear-gradient( black        , white );
        color: #fff;
        text-align: left;
      }
      th, td {
        padding: 15px 20px;
        text-align: center;
        font-family: 'Comfortaa', cursive;
      }
      h1.expl{text-align: center;
        text-decoration: underline;
        color: black;
        font-family: 'Comfortaa', cursive;
      
      }   
      p.expl{
        
        font-size: 20px;
        font-family: 'Comfortaa', cursive;
      }
      footer{
        padding-top: 200px;
      }
      img{

        width: 100px; }
        /*slider*/
        div.slides{
            display: flex;
            flex-direction: row;
            animation: glisses 10s infinite ease;
            float: left;
            align-items: flex-start;
                
        }
        
        @keyframes glisses{
            0%{
                transform: translateX(100px);
    
            }
            10%{
                transform: translateX(250px);
                
            }
            33%{
                transform: translateX(0px);
                
            }
            66%{
                transform: translateX(-250px);
            
                
            }
            100%{
                transform: translateX(100px);
                
            }