body,html{
    margin:0;
    padding:0;
    font-size:1.2em;
    font-family:Andale Mono, monospace;
    font-style:bold;
    background-color:#141b21;
    color:white;
    cursor: url("../cursor/Normal Select.cur"), default;
}


body.clair{
    color: #141b21;
    background-color: #B1C3D3;
    cursor: url("../cursor/clair_Normal Select.cur"), default;
}

body.clair p, body.clair li, body.clair h1, body.clair h2, body.clair h3{
    cursor: url("../cursor/clair_Text Select.cur"), text;
}

body.clair p{
    color: #141b21;
}

body.clair hr{
    border-color:#101417;
}

body.clair a{
    color:#3E586E;
    cursor: url("../cursor/clair_Link Select 2.cur"), pointer;
    color:white;
}

body.clair b{
    color:#647D90;
    text-decoration:underline 2px;
}

body.clair a:hover{
    color:#141b21;
}

body.clair .settings a{
    background-color:#B1C3D3;
    color:#141b21;
}

body.clair .settings a:hover{
    background-color:#859AAD;
}

body.clair footer{
    border-color:#141b21;
    background-color:#647D90;
}

body.clair footer{
    color:white;
}

body.clair #retour{
    color:#141b21;
}

body.clair .settings p{
    cursor: url("../cursor/clair_Link Select 2.cur"), pointer;
}



.settings{
    display:flex;
    justify-content:center;
    align-items:center;
    height:11vh;
    position:fixed;
    right:50px;
    top:50px;
    width:10vw;
    display:flex;
    flex-direction:column;
}


p,li,h1,h2,h3{
    cursor: url("../cursor/Text Select.cur"), text;
}

a,button,.settings p{
    cursor: url("../cursor/Link Select 2.cur"), pointer;
}

p{
    margin:5.5%;
}

hr{
    width:90%;
    height: 5px;
    border:none;
    border-top:solid 4px white;
    margin:auto;
    opacity:100%;
    padding-top:100px;
}

h1{
    padding-top:50px;
    font-weight:bold;
    font-size:2.5em;
}

h2{
    font-size:2em;
}

header h2{
    padding-bottom:5%;
}

a{
    padding-top:2.6%;
    color:white;
    font-size:1.2em;
}

a:hover{
    color:#3E586E;
}

    
h1,h2,h3,a{
    text-align:center;
}

#corps{
    padding-top:0;
}

img{
    width:80%;
    border-radius:3%;
    transition: transform 0.5s;
}

img:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

section{
    padding-top:5.2%;
    padding-bottom:5.2%;
}

.projets{
    margin:auto;
    padding:50px 0 50px 0;
}

footer{
    background-color:#101417;
    padding:50px 0 50px 0;
    border-top:solid white 3px;
}


section h2{
    text-align:left;
    padding-left:50px;
}

ul{
    padding-left:100px;
}

#retour{
    position:fixed;
    left:50px;
}

#flag,#icon{
    height:80%;
    width:auto;
}

.settings a{
    height:5.5vh;
    width:100%;
    background-color:#141b21;
    color:white;
    border:none;
    transition: background 0.4s;
    text-decoration:none;
    font-size:1em;
}

.settings a:hover{
    background-color:#252F38;
    color:white;
    /* -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); */
}


/*sae202*/

#img_projet_202{
    width:80%;
}

.logos{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logos img{
    max-width:49%;
    transition: transform 0.5s;
}

.site{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-bottom:100px;
}

.site img{
    width:100%;
    transition: transform 0.5s;
    margin:auto;
}

.site img:nth-of-type(2){
    padding:15% 0 15% 0;
}

.affiche img{
    width:60%;
    transition: transform 0.5s;
}

.site img:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.affiche img:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.logos img:hover{
    -ms-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

.affiche img{
    display:flex;
    justify-content:center;
}

.affiche a{
    padding-left:50px;
}

body.clair .affiche a{
    color:#141b21;
}

body.clair .affiche a:hover{
    color:white;
}

/*sae203*/
.dct{
 padding:5% 0 5% 0;
}

#img_projet_203{
    width:80%;
    border-radius:3%;
}

/*r209*/
#img_projet_209{
    width:80%;
    margin:auto;
    display:flex;
    transition:transform 0.5s;
    border-radius:3%;
}

#img_projet_209:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.logo img{
    transition: transform 0.5s;
}

.logo img:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

/*sae301*/

#img_projet_301{
    width:60%;
    margin:auto;
    display:flex;
    transition:transform 0.5s;
    border-radius:3%;
}

#img_projet_301:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.logos_301{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logos_301 img{
    max-width:49%;
    transition: transform 0.5s;
}


.logos_301 img:hover{
    -ms-transform: scale(1.6);
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
}

/*sae303*/

#img_projet_303{
    width:80%;
    margin:auto;
    display:flex;
    transition:transform 0.5s;
    border-radius:3%;
}

#img_projet_303:hover{
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.settings a{
    display:flex;
    justify-content:center;
    align-items:center;
}


@media only screen and (max-width : 768px) {
    .settings img{
        display:block;
    }

    .settings p{
        display:none;
    }

    p,li,a,button{
        font-size:16px;
    }

    h1{
        font-size:35px;
    }

    h2{
        font-size:30px;
    }

    h3, .topnav a{
        font-size:25px;
    }

    h4{
        font-size:18px;
    }

    img {
        transition: none !important;
        transform: none !important;
    }

}