body{
    background:linear-gradient(130deg,rgb(60, 105, 255), rgb(213, 1, 255));
    font-family: 'Inter', sans-serif;
    margin:0;
    /*box sizing*/
}
.projet{
    height:auto;
    width:100%;
    display:flex;
    flex-direction:column;
    transition:0.5s;
}
.projet:hover{
    transform:scale(1.02);
    transition:0.5s;
}
.apercuprojet{
    height:80%;
    width:100%;
    background:#191919;
    border-radius:20px 20px 0px 0px;
}
.apercuprojet img{
    width:100%;
    height:auto;
    border-radius:20px 20px 0px 0px;
}
.titleprojet{
    height:20%;
    width:100%;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:0px 0px 20px 20px;
}
.titleprojet p{
    margin:0;
    color:#fff;
}
@media screen and (max-width:780px){
    .titleprojet p{
        font-size:0.9rem;
        
    }
    .titleprojet{
        height:100%;
    }
    
}
@media screen and (max-width:500px){
    .titleprojet p{
        font-size:0.7rem;
    }
}
.section1{
    width:100%;
}
.section2{
    width:100%;
    background-color:#191919;
    padding-bottom:7%;
}
.section3{
    width:100%;
    padding-bottom:4%;
}
.section4{
    width:100%;
}
/*------------Header-------------*/
header{
    margin:0;
    height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}
.textcontainers{
    width:90%;
    padding-left:5%;
    padding-top:3%;
    color:rgb(0, 0, 0);
    display:flex;
}
.textcontainer1 p{
    margin:0;
    cursor:default;
}
.text1{
    font-size:5rem;
    font-weight:600;
}
.text2{
    font-size:11rem;
    font-weight:900;
}
.parentdescendre{
    width:98%;
    display:flex;
    justify-content:flex-end;
}
.descendre{
    width:auto;
    margin-left:1%;
    transition:0.8s;
    transform:rotate(90deg);
}
.descendre:hover{
    transition:0.8s;
    transform:rotate(0deg);
}
@media screen and (max-width:780px){
    .parentdescendre{
        margin-top:15%;
        display:flex;
        justify-items:center;
        justify-content:center;
    }
    .descendre{
        transform:rotate(0deg);
    }
    .descendre:hover{
        transform:rotate(0deg);
    }
}
@media screen and (max-width:900px){
    .textcontainer1{
        margin-top:19%;
    }
    .text2 p{
        font-size:8rem;
    }
}
@media screen and (max-width:780px){
    .textcontainers{
        justify-content:center;
    }
    .text1 p{
        font-size:3.5rem;
        text-align:center;
    }
    .text2 p{
        font-size:6rem;
        text-align:center;
    }
}
@media screen and (max-width:500px){
    .textcontainer1{
        margin-top:50%;
        margin-bottom:7%;
    }
    .text1 p{
        font-size:2.8rem;
    }
    .text2 p{
        font-size:3.7rem;
    }
}
/*------------Main-------------*/
.invisible{
    height:0.01rem;
}
.quisuisjecontainer{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
}
.quisuisje{
    background:#191919;
    border:solid rgb(255, 255, 255)3.5px;
    display:flex;
    width:80%;
    justify-content:center;
    margin-bottom:2%;
    height:auto;
    font-size:0.9rem;
}
.bloc1{
    display:flex;
    align-items:center;
    /* background:blue; */
    margin:3%;
    color:#fff;
}
.bloc2{
    display:flex;
    flex-direction:column;
    /* background:green; */
    margin:3%;
    color:#fff;
}
.contacts{
    width:80%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.contacts a{
    color:#ffffff;
    text-decoration:underline;
}
a{
    text-decoration:none;
    border:none;
}
.parentliens{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.parentliens a{
    text-align:center;
    width:75%;
    background:#191919;
    border:solid #fff 3.5px;
    padding:0.1%;
    color:#fff;
}
.parentliens a p{
    font-size:1.1rem;
}
.parentliens a:hover{
    background:#fff;
    border:solid #191919 3.5px;
    color:#191919;
}
.projets{
    max-width:1920px;
    min-width:300px;
    width:100%;
    height:auto;
    display:grid;
    justify-content:center;
    grid-gap:50px;/*gouttière*/
    grid-template-columns:repeat(auto-fill,400px);/*auto fill créer autant de bails possible pour 300px*/
}
.affichecontainer{
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill,100%);/*auto fill créer autant de bails possible pour 300px*/
    justify-content:space-around;
}
.affiches{
    /* max-width:1920px;
    width:auto; */
    /* background:red; */
    display:flex;;
    height:auto;
    /* height:auto; */
    /* justify-content:center; */
    align-items:center;
    justify-content:center;
    gap:3%;
    margin-top:7%;
    margin-bottom:2%;
    grid-template-columns:repeat(auto-fill,30%);
}
.affiche{
    height:auto;
    width:240px;
    cursor:pointer;
    transition:0.5s;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin:0 2% 0 2%;
}
.affiche:hover{
    transform:rotate(-1.5deg);
    transition:0.4s;
}
.affiche:active{
    transform:scale(0.);
}
.affiche:hover img{
    transform:scale(1.05);
}
.affiche img{
    height:100%;
    width:100%;
    object-fit:cover;
    transition:0.5s linear;
}
.affichepopup{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0, 0, 0, 0.937);
    height:100%;
    width:100%;
    display:none;
}
span{
    position:absolute;
    top:0.5%;
    right:1.5%;
    font-size:3rem;
    font-weight:100;
    color:#fff;
    cursor:pointer;
}
span:hover{
    color:#6e6e6e;
}
span:active{
    color:#fff;
}
.affichepopup img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:30%;
    object-fit:cover;
}
@media screen and (max-width:780px){
    .affiches{
        flex-direction:column;
        margin-top:17%;
        margin-bottom:4%;
        grid-template-columns:repeat(auto-fill,48%);
    }
    .affichepopup img{
        width:65%;
    }
}
/* GRAND TITRES ------------------------------------------------- */
.whitetitle p{
    font-size:5rem;
    font-weight:900;
    color:#fff;
    margin-left:5%;
    margin-top:3.5%;
    margin-bottom:3.5%;
}
.blacktitle p{
    font-size:5rem;
    font-weight:900;
    color:#191919;
    margin-left:5%;
   
    margin-bottom:4%;
}
@media screen and (max-width:780px){
    .whitetitle p{
        font-size:4rem;
    }
    .blacktitle p{
        font-size:4rem;
        margin-top:5%;
    }
}
@media screen and (max-width:500px){
    .whitetitle p{
        font-size:2.2rem;
        margin-top:6%;
        margin-bottom:5%;
    }
    .blacktitle p{
        font-size:2.2rem;
        margin-bottom:6%;
        
    }
}
.projetetgallerie p{
    font-size:5rem;
    font-weight:900;
    color:#191919;
    margin-left:5%;
    margin-top:3rem;
    margin-bottom:2rem;
}
/*------------Gallerie button-------------*/
.galleries{
    display:flex;
}
.galleries a{
    text-decoration:none;
}
.galleriephoto{
    background-color:#fff;
    width:50%;
    display:flex;
    color:#191919;
}
.galleriedessin{
    background-color:#191919;
    color:#fff;
    width:50%;
}
.gall{
    height:100vh;
    width:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:1s;
    font-size:2rem; 
}
@media screen and (max-width:780px){
    .gall p{
        font-size:1.2rem;
    }
}
a.galleriphotoa{
    width:100%;
}
.galleriephoto p{
    color:#000;
}
.galleriedessin p{
    color:#fff;
}
.galleriephoto:hover{
    cursor:pointer;
    background-color:#dfdfdf;
    transition:1s;
}
.galleriedessin:hover{
    cursor:pointer;
    background-color:#252525;
    transition:1s;
}
.gall:active{
    font-size:80%;
}
footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:3%;
    background:#000;
    color:#fff;
    font-size:0.8rem;
}
@media screen and (max-width:780px){
    footer{
        font-size:0.65rem;
    }
}
footer a{
    color:#fff;
}
footer a:hover{
    color:rgb(162, 162, 162);
}
.contact{
    text-align:right;
}
/*------------Media-------------*/
@media screen and (max-width:1324px){
    .projetetgallerie p{
        font-size:4rem;
    }
    .bloc1 img{
        width:280px;
        height:280px;
    }
    .bloc2 p{
        font-size:0.9rem;
    }
}
@media screen and (max-width:1215px){
    .bloc1 img{
        width:260px;
        height:260px;
    }
    .bloc2 p{
        font-size:0.8rem;
    }
}
@media screen and (max-width:1094px){
    .bloc1 img{
        width:240px;
        height:240px;
    }
}
@media screen and (max-width:880px){
    .projetetgallerie p{
        font-size:3rem;
    }
    .bloc1 img{
        margin-bottom:6%;
    }
}
@media screen and (max-width:750px){
    .quisuisje{
        flex-direction:column;
        height:auto;
        align-items:center;
        padding:8%;
        width:68%;
    }
    .mydescription p{
        font-size:0.7rem;
    }
    .contacts{
        flex-direction:column;
    }
    .parentliens a{
        width:100%;
        margin:2%;
        
    }
    .parentliens a p{
        font-size:0.8rem;
    } 
}
@media screen and (max-width:500px){
    
    .bloc1 img{
        width:200px;
        height:200px;
    } 
}
@media screen and (max-width:400px){
    .projetetgallerie p{
        font-size:3rem;
    }s
    .projets{
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    .projet{
        width:250px;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }
    .textprojet{
        height:18%;
    }
    .textprojet p{
        font-size:0.8rem;
    }
}
@media screen and (max-width:360px){
    .projetetgallerie p{
        font-size:2.5rem;
        
    }
}

@media screen and (max-width:550px){
    .contacts{
        display:flex;
        flex-direction:column;
        padding-top:3%;
        padding-bottom:3%;
    }
}
.container{
    width:75%;
    display:flex;
    flex-direction:column;
}
.title{
    display:flex;
    /* background:purple; */
    font-size:3rem;
    padding:1.5%;
    font-weight:600;
    margin-bottom:0.8%;
}
.title p{
    font-size:2rem;
    font-weight:600;
}
.content{
    display:flex;
    height:55vh;
    align-items:center;
}
.textskills{
    background:blue;
    display:flex;
    flex-direction:column;
    width:50%;
    height:91%;
}
.text{
    background:#ffa500;
    height:60%;
    display:flex;
    align-items:flex-start;
}
.text p{
    font-size:0.9rem;
}
.skills{
    background:#3799a6;
    border-radius:20px;
    height:30%;
    padding:20px;
}

/* #projet1{
    display:none;
    /*scroll-behavior:auto !important;
}*/
@media screen and (max-width:900px){
    .title{
        padding:0 0 0 5%;
        margin-bottom:7%;
        border-radius:10px;
    }
    .content{
        display:flex;
        flex-direction:column;
        height:55vh;
        align-items:center;
    }
    /* .entiteprojet{
        width:100%;
        justify-content:center;
        padding:0;
    }
    .entiteprojet p{
        font-size:0.7rem;
    } */
    .text p{
        font-size:0.7rem;
    }
    .textskills{
        width:100%;
    }
    .skills{
        font-size:0.8rem;
    }
    .parentretour{
        margin-top:35%;
    }
}
@media screen and (max-width:590px){
    .text{
        height:80%;
    }
    .projets{
        max-width:1920px;
        min-width:300px;
        width:100%;
        height:auto;
        display:grid;
        justify-content:center;
        grid-gap:50px;/*gouttière*/
        grid-template-columns:repeat(auto-fill,88%);/*auto fill créer autant de bails possible pour 300px*/
    }
}
@media screen and (max-width:900px){
    .parentretour{
        margin-top:35%;
    }
}
.github{
    width:100%;
    display:flex;
    justify-content:center;
}
.github a{
    text-decoration:underline;
    color:black;
}
.github a:hover{
    color:#424242;
    text-decoration:none;
}
@media screen and (max-width:1285px){
    .github{
        margin-bottom:5%;
    }
}
@media screen and (max-width:584px){
    .blacktitle p{
        font-size:2rem;
    }
}
.grandpereretour{
    width:100%;
    display:flex;
    justify-content:center;
}
.parentretour{
    width:70%;
    display:flex;
    justify-content:center;
    align-items:center;
    /* background:rgb(223, 90, 90); */
    margin-top:3%;
    margin-bottom:1%;
    /* background:red; */
}
.parentretour a{
    text-align:center;
    width:35%;
    background:#000000;
    border:solid rgb(0, 0, 0)3.5px;
    text-decoration:none;
    color:rgb(255, 255, 255);
}
.parentretour a:hover{
    background:rgb(255, 255, 255);
    color:#000000;
}
@media screen and (max-width:780px){}
    .parentretour a{
        padding:1%;
    }
@media screen and (max-width:730px){
    .parentretour a{
        width:50%;
        margin-bottom:4%;
        padding:4%;
        font-size:0.9rem;
        border:solid rgb(0, 0, 0)3.2px;
    }
}
@media screen and (max-width:520px){
    .parentretour a{
        width:70%;
        margin-bottom:6%;
        border:solid rgb(0, 0, 0)3px;
    }
}
@media screen and (max-width:590px){
    .text{
        height:80%;
    }
    .projets{
        max-width:1920px;
        min-width:300px;
        width:100%;
        height:auto;
        display:grid;
        justify-content:center;
        grid-gap:50px;/*gouttière*/
        grid-template-columns:repeat(auto-fill,88%);/*auto fill créer autant de bails possible pour 300px*/
    }
}
@media screen and (max-width:400px){
    .projet{
        width:100%;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }
}