html{
    background-color: black;
    color: black;
    margin: 10px;
    padding: 10px;
}
h1{
    font-family: gagalin;
}
.navbar{
    list-style: none;
    background-color: #333;
    top: 0;
    width: 100%;
    position: relative;
    text-align: center;
    border-top: 10px;
    height: 5vh;
}
.navbar a{
    color: white;
}
.navbar a:hover{
    cursor: pointer;
}
ul.navbar li{
    display: inline-block;
    margin: 20px;
}
html li{
    list-style-type: none;
}
.anim{
    animation-name: diapo_1;
}
@keyframes diapo_1{
    from{
        margin-left: 100%;
        width: 300%;
        }
    to{
        margin-left: 0%;
        width: 100%;
        
        }
}
#div{
    height: 90vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}
#div div{
    height: 90vh;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
#un{
    background-color: rgb(36, 164, 138);
    animation-duration: 2s;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
}
#deux{
    background-color: yellow;
    animation-duration: 2s;
    text-align: center;
    line-height: 70px;
    
}
#deux li{
    list-style-type: none;
}
#deux li a{
    color: black;
}
#trois{
    background-color: rgb(168 182 230);
    animation-duration: 2s;
    font-size: x-large;
}
#trois h1{
    text-align: center;
}
#trois ul li .cvc{
    margin-left: 770px;
}
#trois ul li .physique{
    margin-right: 400px;
    margin-left: 200px;
}
#trois ul li .code{
    float: right;
    margin-right: 20px;
}
#quatre{
    background-color: #cda0cd;
    animation-duration: 2s;
    font-size: x-large;
}
#quatre h1{
    text-align: center;
}
#quatre ul li .covid, .site{
    margin-left: 30px;
    margin-right: 110px;
}
#quatre ul li .complementarite{
    margin-left: 700px;
}
#quatre ul li .CV{
    float: right;
    margin-right: 10px;
}
#quatre_un{
    background-color: #a640bf;
    animation-duration: 2s;
    font-size: x-large;
}
#quatre_un h1{
    text-align: center;
}
#quatre_un ul li .stage-agenda{
    height: 250px;
    width: 500px;
    background-color: white;
    margin-left: 300px;

}
#quatre_un ul li .tilleuls{
    margin-left: 410px;
    height: 100px;
    width: 400px;
}
#quatre_un ul li .stage-carte{
    height: 207px;
    width: 207px;
    margin-left: 1000px;   
}
#quatre_un ul li .stage-convention{
    width: 400px;
    height: 300px;
}
#cinq{
    background-color: #bf4084;
    animation-duration: 2s;
    font-size: x-large;
}
#cinq h1{
    text-align: center;
    color: white;
}
#cinq ul li{
    width: 100%;
    display: flex;
    justify-content: center;
}
#cinq ul li .dassault{
    margin-right: 470px;
    margin-left: 400px;
}
#cinq ul li .stage{
    margin-left: 30px;
    margin-right: 450px;
}
#six{
    background-color: aqua;
    animation-duration: 2s;
    text-align: center;
    font-size: x-large;
}
#six li{
    list-style-type: none;
    height: 100px;
}
#six_un{
    background-color: #2f2fc0;
    text-align: center;
    font-size: xx-large;
}
#six_un ul li .qcai{
    width: 1133px;
    height: 623px;
}
#sept{
    background-color: #425868;
    animation-duration: 2s;
    text-align: center;
    font-size: large;
}
#sept h1{
    color: white;
}
#fin{
    background-color: #800080;
    animation-duration: 2s;
    text-align: center;
    font-size: xx-large;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
}
#fin h1{
    color: white;
}
#fin h2{
    color: white;
    -webkit-text-stroke: 1px black;
}
.end{
    animation-name: diapo_1;
    animation-duration: 300s;
    color: black;
    -webkit-text-stroke: 1px white;
}