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


/* là c'est le clair UwU */

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

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

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 hr{
    border-color:#101417;
}

body.clair a{
    color:#3E586E;
}

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

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

body.clair .topnav a{
    color:white;
    background-color:#647D90;
}

body.clair .topnav a:hover, body.clair a.active{
    color:#252F38;
    background-color:#859AAD;
}

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

body.clair #cv{
    background-color:#647D90;
}

body.clair #dev,body.clair #audio,body.clair #graph,body.clair #com{
    background-color:#6687A3;
    color:white;
    border: 3px solid #647D90;
}

body.clair button{
    background-color:#647D90;
    cursor: url("cursor/clair_Link Select 2.cur"), pointer;
}

body.clair button:hover{
    background-color:#6687A3;
}

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

body.clair .projets a:hover{
    color:#647D90;
}

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

body.clair footer{
    color:white;
}

/* normal commence ici */

#about p{
    margin:5.5%;
}

p{
    color:white;
    font-size:120%;
}

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

a,button,#précédent,#suivant{
    cursor: url("cursor/Link Select 2.cur"), pointer;
}

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

h1{
    padding-top:2%;
    padding-bottom:2.5%;
    font-weight:bold;
    font-size:2.5em;
}

section h2{
    font-size:2em;
    padding-bottom:2.5%;
}

a{
    text-decoration:none;
    color:white;
}

a:hover{
    color:#3E586E;
}

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

.topnav {
    overflow: hidden;
    background-color:#101417;
    width:100vw;
}

.topnav a {
    float: left;
    color:white;
    text-align: center;
    text-transform: uppercase;
    padding:0 auto 0 auto;
    height:11vh;
    padding-top:1.7%;
    text-decoration: none;
    width:20vw;
    background-color:#101417;
    vertical-align: middle;
}

.settings{
    height:100%;
    width:20vw;
    display:flex;
    flex-direction:column;
    justify-content:stretch;
}
.settings a{
    height:5.5vh;
    width:100%;
}

.topnav a:hover {
    background-color:#252F38;
    color:white;
    transition: background 0.5s;
}

.topnav a.active {
    background-color: #252F38;
    color: white;
    width:20vw;
}

.topnav .icon {
    display: none;
}


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

#about img{
    width:60%;
    margin:auto;
    display:block;
}

#cv{
    font-size:1.4em;
    background-color:#101417;
    height:5.5vh;
    margin:3% auto auto auto;
    width: 35%;
    text-align:center;
    transition: transform 0.5s, background 0.5s;
    border-radius:15%;
}

#cv:hover{
    background-color: #252F38;
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

#cv a:hover{
    color:white;
}

section{
    padding:2.6% 0 2.6% 0;
}

#about{
    border-top:none;
    padding-bottom:7.8%;
}

#about h2{
    padding-top:2%;
    text-align:left;
    margin:auto auto auto 20%;
}

#description{
    padding-top:2.6%;
    padding-left:2.6%;
}

b{
    color:#3E586E;
}

#skills{
    padding-top:15vh;
    padding-bottom:15vh
}

#skills h3{
    padding-top:1.9%;;
}

#skills li{
    padding:3% 0 3% 0;
}

ul{
    list-style-type:none;
}

#dev,#audio,#graph,#com{
    padding:1% 0 1% 0;
    width:20%;
    margin-left:2.5%;
    margin-right:2.5%;
    border-radius:10%;
    background-color:#252F38;
    color:white;
    border: 3px solid #3E586E;
}

#projects{
    padding-top:10vh;
    padding-bottom:10vh;
}

.projets{
    margin:auto;
    padding:2vh 0 2vh 0;
}

.projets a{
    text-decoration:underline;
}

.projets h3{
    padding-bottom:2.5%;
    font-weight:bold;
    
}

#img_projet{
    width:60%;
    margin:auto;
    display:flex;
    border-radius:40% 3% 40% 3%;
}

#cat_projet{
    font-size:1em;
}

.buttons{
    display:flex;
    margin:auto;
}

button{
    margin:auto;
    width:11%;
    border-radius:10%;
    background-color:#3E586E;
    color:white;
    border:none;
    transition: background 0.4s, transform 0.4s;
    
}

button:hover{
    background-color:#252F38;
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

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

/* ipad */

@media only screen and (max-width : 1024px) {

    #skills{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #dev,#audio,#graph,#com{
        height:45vh;
        margin:2vh 0 2vh 0;
        width:40vw;
    }

    #dev,#graph{
        margin-right:2vw;
    }

    #audio,#com{
        margin-left:2vw;
    }

    #dev,#audio{
        margin-bottom:2vh;
    }

    #graph,#com{
        margin-top:2vh;
    }

    ul{
        padding-left:2%;
    }

}

@media only screen and (max-width : 768px) {
    /* Styles pour cette Media Queries */
    p,li,a,button{
        font-size:16px;
    }

    #cv{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .image_cv h2{
        display:none;
    }

    .image_cv img{
        display:none;
    }

    .photo{
        max-width:40%;
    }

    h1{
        font-size:35px;
    }

    h2{
        font-size:30px;
    }

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

    h4{
        font-size:18px;
    }

    li{
        font-size:14px;
    }

    .visu_projets{
        display:none;
    }

    #skills{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #dev,#audio,#graph,#com{
        height:35vh;
        margin:2vh 0 2vh 0;
        width:45vw;
    }

    #dev,#graph{
        margin-right:2vw;
    }

    #audio,#com{
        margin-left:2vw;
    }

    #dev,#audio{
        margin-bottom:2vh;
    }

    #graph,#com{
        margin-top:2vh;
    }

    button{
        width:25vw;
    }

    #cat_projet{
        font-size:14px;
    }
}

/* nav-bar, je touche pas */

@media screen and (max-width: 768px) {

    .topnav a{
        display: none;
    }

    #logo {
        display:block;
        width:30vw;
        padding:auto;
        padding-top:4.5%;
    }

    .topnav a.icon {
      float: right;
      display: block;
      padding-top:5%;
    }
  }

@media screen and (max-width: 768px) {
    .topnav.responsive {
        position: relative;
    }
    
    .settings.responsive{
        flex-direction: row;
    }

    .settings.responsive a{
        width:45vw;
        display:block;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive>a{
      float: none;
      display: block;
      text-align: center;
      width:100vw;
      padding-top:5%;
    }

    .topnav.responsive .settings{
        display:flex;
        flex-direction:row;
        width:100vw;
      }

    .topnav.responsive .settings a{
        display:block;
        height:11vh;
        width:50vw;
        text-align:center;
        padding-top:5%;
      }
  }