html{
    font-size : 24px;
    background-color : white;
    font-family : Montserrat;
    color : #222222;
}

.red {
    color : #f14343;
}

a{
    text-decoration : none;
    transition: all 0.2s linear;
}

a:hover{
    color : #f14343;
    text-decoration : underline;
}

header{
    text-align : center;
}

nav ul{
    display : flex;
    justify-content: flex-end;
}

nav ul li{
    list-style-type : none;
    padding : 20px;
    font-size : 0.8rem;
}

nav ul li a{
    color : black;
}

header h1{
    margin : 60px 0;
    font-size : 2.8rem;
    text-shadow : 5px 5px 5px lightgray;
    text-transform : uppercase;
}

#slogan{
    margin : 80px 0;
}

hr{
    width : 60%;
    margin : 70px auto;
    color : lightgray;
}

section h2{
    text-align : center;
    font-size : 1.5rem;
    text-transform : uppercase;
    font-weight : normal;
    font-style : italic;
    margin : 70px 0;  
    
    
}
.container{
    display : flex;
    justify-content : space-around;
}
.container > div{
    scale: 1.5;
    opacity : 0;
    padding : 0 40px 20px 40px;
    border : #e7e7f3 solid 1px;
    box-shadow : 0px 0px 20px 0px rgba(0,0,0,0.8);
    width : 20%;
    border-radius : 3px;
    background-color : white;
    transition : all 1s linear;
}
.container div h3{
    text-align : center;
    padding-bottom : 10px;
    font-size : 1.2rem;
    text-transform : uppercase;
}
.container div p{
    font-size : 0.65rem;
}
.cover img{
    width : 100%;
    height : 20%;
}
.btn_formation{
    text-align : center;
    margin-top : 35px;
    
}
.btn_formation a{
    display : inline-block;
    background-color : #6dbe38;
    padding : 25px;
    
    text-transform : uppercase;
    text-align : center;
    color : white;
}
.voir_formations{
    display : block;
    margin-top : 3rem;
    text-align : center;
    color : black;
    text-decoration : none;
    font-style : italic;
}
footer{
    background-color : lightgray;
    padding : 50px;
    text-align : center;
    font-size : 0.8rem;
    margin-top : 80px;
    border-top : darkgray solid 1px;
}

footer a{
    color : inherit;
}
/* CONTACT */

#contact, #connexion{
    text-align : center;
    opacity : 0;
    transition : opacity 1s linear;
}
#contact input, #connexion input{
    padding : 15px;
    margin : 30px;
}
#contact input:nth-child(1), #contact input:nth-child(2){
    margin-top : 0px;
}
#contact textarea{
    padding : 15px;
    margin-top : 5px;
}

#about{
    width : 80%;
    margin : auto;
    opacity : 0;
    transition : opacity 1s linear;  
}

#logo{
    border-radius : 40px;
    box-shadow : black 0px 0px 20px 2px;
    display : inline-block;
    width : 26%;
    min-width : 250px;
    margin : 3% 10%;
    vertical-align : top;
    
}

#about .txt{
    display : inline-block;
    font-size : 0.8rem;
    width : 52%;
    text-align : justify;
}

#about a{
    color : #f14343;
    text-decoration : underline;
}

.erreur{
    color : red;
    font-weight : bold;
}

#espace_formation p{
    text-align : center;
}

#deconnexion a{
    display : inline-block;
    background-color : #f14343;
    padding : 25px;
    text-transform : uppercase;
    text-align : center;
    color : white;
    font-size : 0.7rem;
    margin : 20px;
}

#formation{
    width : 90%;
    margin : auto;
    background-color : white;
}
#prez_formation{
    font-family : roboto;
    display : flex;
    justify-content : space-evenly;
}
#prez_formation img{
    width : 25%;
}
#prez_formation>div{
    width : 42%;
    margin : 0px auto;
}
#prez_formation h2{
    margin : 60px auto;
    font-family : roboto;
}
#contenu_formation{
    display : flex;
    justify-content : space-evenly;
    margin-top : 50px;
}
#contenu_formation div{
    margin : auto;
}
#contenu_formation ol li a{
    color : inherit;
}

#contenu_formation li{
    cursor : pointer;
    transition : color 0.25s ease;
}
#contenu_formation li:hover{
    color : #f14343;
}

#page_formation h2{
    font-size : 2rem;
}
#paiement_paypal{
    width : 30%;
    margin : auto;
}

#prix_formation{
    font-size : 2rem;
    color : green;
    text-align : center;
    font-weight : bold;
}

#page_formation{
    text-align : center;
}
#page_formation input{
    padding : 5px;
    margin : 5px;
}
#cibles_formation {
    width : 50%;
    margin : auto;
    list-style-type: none;
    text-align : justify;
}
#cibles_formation li{
    padding : 10px;
}
#cibles_formation li:before{
    content : "✅ ";
}

#mentions{
    text-align : center;
}

#avantages{
    margin-bottom : 50px;
}
#avantages mark{
    font-weight : bold;
    font-style : italic;
}
#avantages li{
    margin : 20px;
    list-style-type : none;
}
#cgv{
    width : 60%;
    margin : auto;
}
#pb_achat{
    font-size : 0.7rem;
}


@media screen and (max-width:1280px){
    header h1{
        font-size : 1.7rem;
        margin : 50px 0;
    }

    #slogan{
        width : 80%;
        margin : auto;
        font-size : 0.7rem;
    }
    
    nav ul li{
        font-size : 0.6rem;
        
    }

    hr{
        width : 50%;
        margin : 50px auto;
    }

    section h2{
        font-size : 1.3rem;
        margin : 30px auto;
    }

    .container{
        display : block;
    }
    .container > div{
        width : 50%;
        margin : 40px auto;
    }
    .container div h3{
        text-align : center;
        padding-bottom : 10px;
        font-size : 0.7rem;
        text-transform : uppercase;
    }
    .container div p{
        font-size : 0.6rem;
        
    }
    .cover img{
        width : 100%;
        height : 20%;
    }
    footer{
        font-size : 0.8rem;
    }
    .cover{
        width : 50%;
        margin : auto;
    }
    #logo{
        display : block;
        margin : 60px auto;
    }
    #about .txt{
        display : block;
        width : 90%;
        margin : auto;
        font-size : 0.7rem;
    }
    #contact input, #contact textarea, #connexion input{
        display : block;
        width : 80%;
        padding : 10px;
        margin : 10px auto;
        font-size : 0.7rem;
    }
    #prez_formation img{
        display : none;
    }
    #prez_formation>div{
        width : 90%;
        font-size : 0.7rem;
    }
    #prez_formation h2{
        margin : 10px auto;
        font-family : roboto;
        font-size : 0.7rem;
    }
    #contenu_formation{
        display : block;
        text-align : center;
        font-size : 0.7rem;
    }
    #contenu_formation > div{
        margin : 50px auto;
    }
    #contenu_formation video{
        width : 100%;
    }
    #deconnexion{
        margin : 60px;
        font-size : 0.5rem;
    }
    #cgv{
        font-size : 0.9rem;
        width : 80%;
    }
   
}
@media screen and (max-width:640px){

    header h1{
        font-size : 1.3rem;
        margin : 50px 0;
    }

    #slogan{
        width : 80%;
        margin : auto;
        font-size : 0.8rem;
    }
    nav ul{
        justify-content : space-evenly;
        padding-left : 0px;
    }
    nav ul li{
        font-size : 0.4rem;
        padding : 5px;
    }

    hr{
        width : 50%;
        margin : 50px auto;
    }

    section h2{
        font-size : 1rem;
        margin : 50px 0;
    }

    .container{
        display : block;
    }
    .container > div{
        width : 50%;
        margin : 40px auto;
    }
    .container div h3{
        text-align : center;
        padding-bottom : 10px;
        font-size : 0.7rem;
        text-transform : uppercase;
    }
    .container div p{
        font-size : 0.7rem;
        
    }
    .cover img{
        width : 100%;
        height : 20%;
    }
    footer{
        font-size : 0.5rem;
    }

    #logo{
        display : block;
        margin : 60px auto;
    }
    #about .txt{
        display : block;
        width : 90%;
        margin : auto;
        font-size : 0.7rem;
    }
    #contact input, #contact textarea, #connexion input{
        display : block;
        width : 80%;
        padding : 7px;
        margin : 10px auto;
        font-size : 0.7rem;
    }
    #deconnexion{
        font-size : 0.5rem;
    }
    #page_formation p{
        font-size : 0.7rem;
    }

    #page_formation h2{
        font-size : 0.9rem;
    }
    #paiement_paypal{
        width : 80%;
        margin : auto;
    }
    
    #prix_formation{
        font-size : 1rem;
        color : green;
        text-align : center;
        font-weight : bold;
    }
    #mentions{
        font-size : 0.7rem;
    }
    #cgv{
        width : 90%;
        margin : auto;
        font-size : 0.8rem;
    }
}