html{
                scroll-behavior: smooth;
            }
            body{
                margin: 0;
            }
            #btn{
                display: block;
                margin: auto;
            }
            .flex-box{
                display: flex;
                justify-content: center;
                margin-bottom: 120px;
            }
            .matiere-box{
                margin-left: 50px;
            }
            .box{
                width: 300px;
                height: 250px;
            }
            
            .copyright{
                text-align: center;
                background-color: rgb(31, 139, 182);
                margin-top: 5px;
                width: 100%;
                height: 100px;
                padding-top: 25px;
                border-top: 1px solid #0003;
            }
            .copyright p{
                color: white;
                font-family: 'Bebas Neue';
                font-size: 17px;
                letter-spacing: 0.04em;
            }
            .copyright p a{
                text-decoration: none;
                color: white;
                padding: 2px;
                border-radius: 2.5px;
                margin-left: 1.1px;
                transition: 1s;

            }
            .copyright p a:hover{
                background-color: #42495b;
            }
            .top-btn{
                background-color: rgb(236, 236, 236);
                width: 100px;
                display: block;
                margin: auto;
                padding: 5px;
                border-radius: 3px;
            }
            .top-btn a{
                text-decoration: none;
                color: black;
                font-weight: bold;
            }
            .navbar{
                width: 100%;
                overflow: hidden;
                background-color:rgb(31, 139, 182);
                padding: 10px 0px;
                position: fixed;
            }

            .navbar ul{   
                list-style-type: none;
                width: 100%;
                margin: 0;
            }

            .navbar ul li{
                float: left;
                margin-left: 20px;
            }
            .navbar ul li a{
                text-decoration: none;
                color: rgb(255, 255, 255);
                font-size: 0.8em;
                letter-spacing: 0.01em;
                font-family: 'Montserrat', sans-serif;
                font-weight: 550;
            }
            .countainer{
                padding: 50px;
                background-color: rgba(231, 235, 235, 0.13);
            }

            .filieres h2,.download-title{
                font-family: 'Bebas Neue', cursive;
                font-size: xx-large;
                letter-spacing: 0.04em;
                color: #42495b;
                margin-bottom: 22px;
            }
            .filieres h3{
                margin-left: 30px;
                font-family: 'Montserrat';
                font-size: 0.94em;
            }
            .filieres .modules{
                margin-left: 100px;
            }
            .filiere-name{
                margin: 10px 0 26px 0px;
                font-size: 13px;
                font-family: 'Montserrat', sans-serif;
                color: #1f8bb6;
                font-weight: bold;
                border-bottom: 1px solid #00000014;
                padding-bottom: 9px;
            }
            .modules h4{
                padding: 10px;
                background: #7cdaff3d;
                border-radius: 2px;
            }
            .download-section{
                margin-top: 40px;
            }
            .box #btn{
                outline: none;
                border: none;
                padding: 15px;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                background-color: rgb(31 139 182);
                color: white;
                font-weight: bold;
            }
            .box #btn a{
                text-decoration: none;
                color: white;
            }

            .slider{
                border-radius: 10px;
                overflow: hidden;
            }
            .slider img{
                width: 100%;
                height: 400px;
            }
            details summary{
                padding: 8px;
                border-radius: 2px;
                color: white;
                font-family: 'Bebas Neue';
                background-color: #42495bbd;
                font-size: 19px;
                letter-spacing: 0.1em
            }
            details[open]{
                transition: height 2s ease;
            }
            
            /* RESPONSIVES */

            @media only screen and (max-width:1070px){
                .flex-box{
                    display: block;
                }
                .matiere-box{
                    margin: auto;
                    width: 100%;
                }
                .box img{
                    margin: auto;
                    width:100%;
                    height: auto;
                }
                .box{
                    width: auto;
                    height: auto;
                    margin-bottom: 10px;
                }
                .navbar{
                    padding:0;
                    max-height:500px;
                    transition: max-height 0.9s ease-out;
                }
                .navbar ul li{
                    float: none;
                    padding: 17px;
                    text-align: left;
                }
                .navbtn button{
                    margin: auto;
                    width: 100%;
                    padding: 20px;
                    border: none;
                    background: #3f51b5;
                    color: white;
                    font-weight: bold;
                    cursor: pointer;
                }
                .navbtn{
                    display: block!important;
                    position: fixed;
                    z-index: 1;
                }
                .hide{
                    max-height: 0px!important;
                }
            }