*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: CeraPro;
    background-color: #fffcf1;
    overflow-x: hidden;
    position: relative
}

.PageProject {
    width: 100vw;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ProjectsCenter {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    /* border: 3px solid red; */
}

.browncircle {
    position: absolute;
    z-index: -5;
    left: 2%;
    top: -5%;
    -webkit-animation: do-levitation 3s alternate ease-in-out infinite;
    animation: do-levitation 3s alternate ease-in-out infinite;
}

.TitlePage {
    width: 100%;
    height: 5%;
    top: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

}

.TitlePage h1 {
    -webkit-text-stroke: 2px black;
    color: #fffcf1;
    font-weight: 900;
    z-index: 2;
    font-size: 4rem;
}




.banniere {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.CouvImg {
    position: relative;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    /* background-color: pink; */

}

.Banimg {
    height: 85%;
    width: 85%;
    min-height: 200px;
    max-width: 600px;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    border: 1px solid black;
}

.Banimg video {
    border-radius: 5px;
    height: 100%;
    width: 100%;
}

.motion {
    background-image: url(/medias/cover/motion.jpg)
}

.hexaword {
    background-image: url(/medias/cover/HexaWord.png);
}

.moosy {
    background-image: url(/medias/cover/moosy.png);
}

.mmiairlines {
    background-image: url(/medias/img-projets/MMIairline/2-min.png);
}

.boosta {
    background-image: url(/medias/img-projets/BOOSTA/Boosta-1.png);

}

.youtube {
    background-image: url(/medias/img-projets/Youtube/1-min.png);

}

.topInfo {
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}


.bottomInfo {
    width: 100%;
    /* height: 40%; */
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
}



.bottomrightinfo {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.bottomrightinfo p {
    text-align: right;
    font-family: Poppins, sans-serif;
}

.bottomrightinfo a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


a {
    text-decoration: none;
}

a:visited {
    color: black;
}


.bottomleftinfo {
    text-align: justify;
    height: 100%;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.leftCase h3 {
    font-size: 2rem;
    color: #4f54eb;
    background-color: #fffcf1;
}

.leftCase p {
    padding: 5px;
    font-family: 'Poppins', sans-serif;
    border-bottom: 1.5px solid black;
    border-top: 1.5px solid black;
}

.rightinfo h3 {
    font-size: 1.3rem;
    color: #4f54eb;
}



.rightinfo {
    height: 100%;
    text-align: right;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    /* background-color: rgba(140, 233, 240, 0.541); */
}

.rightinfo p {
    font-family: 'Poppins', sans-serif;
}

.skillUsed {
    min-height: 60%;
    width: 90%;
    border-radius: 5px;
    background-color: #f5f2e6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.leftCase a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    text-decoration: none;
}

.CenterSee {
    width: 100%;
    display: flex;
    flex-direction: column;

}

.leftCase .Cnproject {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    text-decoration: none;
}

.Seeproject {
    font-size: 100%;
    padding: 10px;
    border-radius: 5px;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    background-color: #4f54eb;
    transition: 0.5s ease-in-out;
}

.Noproject {
    font-size: 100%;
    color: white;
    padding: 1.5%;
    border-radius: 5px;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #cccac3;
}

.Seeproject:hover {
    background-color: #D1D6FF;
    color: #4f54eb;
    transition: 0.5s ease-in-out;

}

.Seeproject a {
    text-decoration: none;
}

.GalerieProjects {
    min-height: 100vh;
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.GalerieProjects p:visited {
    color: black;
}

.GalerieProjects h1 {
    padding: 1%;
    background-color: #D1D6FF;
    color: #4f54eb;
}

.GalerieProjects p {
    font-family: Poppins, sans-serif;
}


#Lign {
    position: absolute;
}

.Firstskill {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.skillUsed img {
    width: 60%;
}

.skillUsed p {
    font-size: 0.8rem;
}

.Secondskill {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Thirdskill {
    grid-area: 1 / 3 / 2 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Fourthskill {
    grid-area: 2 / 1 / 3 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Fifthskill {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Sixthskill {
    grid-area: 2 / 3 / 3 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Seventhskill {
    grid-area: 3 / 1 / 4 / 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Eighthskill {
    grid-area: 3 / 2 / 4 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.Ninthskill {
    grid-area: 3 / 3 / 4 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 10%;
}

.roletype {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* border-bottom: 1.5px solid black; */
}



h1 span {
    color: #D1D6FF;
    -webkit-text-stroke: 2px #4f54eb;
    font-size: 2.5rem;

}

.roletype span {
    background-color: #D1D6FF;
    color: #4f54eb;
}

/* IMAGES MOTION */

.img-projet {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2%;
    margin-bottom: 2%;
    min-height: 500px;
    width: 55%;
    height: 80%;
    border: 1px solid black;
    border-radius: 5px;
}

/* Fonds motion */

.Mi01 {
    background-image: url(/medias/img-projets/Motion/motion-1.jpg);

}

.Mi02 {
    background-image: url(/medias/img-projets/Motion/motion-2.jpg);
}

.Mi03 {
    background-image: url(/medias/img-projets/Motion/motion-3.jpg);
}

.Mi04 {
    background-image: url(/medias/img-projets/Motion/motion-4.jpg);
}

.Mi05 {
    background-image: url(/medias/img-projets/Motion/motion-5.jpg);
}

/* Fonds HexaWord */

.Hi01 {
    background-image: url(/medias/img-projets/HexaWord/hexaword-01.jpg);
}

.Hi02 {
    background-image: url(/medias/img-projets/HexaWord/hexaword-02.png);

}

.Hi03 {
    background-image: url(/medias/img-projets/HexaWord/hexaword-03.png);
}

.Hi04 {
    background-image: url(/medias/img-projets/HexaWord/hexaword-04.png);
}

.Hi05 {
    background-image: url(/medias/img-projets/HexaWord/hexaword-05.png);
}

/* Fonds Moosy */

.Mo01 {
    background-image: url(/medias/img-projets/Moosy/1-min.png);
}

.Mo02 {
    background-image: url(/medias/img-projets/Moosy/2-min.png);
}

.Mo03 {
    background-image: url(/medias/img-projets/Moosy/3-min.png);
}

.Mo04 {
    background-image: url(/medias/img-projets/Moosy/4-min.png);
}

.Mo05 {
    background-image: url(/medias/img-projets/Moosy/5-min.png);
}

/* Fonds MMI AIRLINES */

.Ma01 {
    background-image: url(/medias/img-projets/MMIairline/1-min.png);
}

.Ma02 {
    background-image: url(/medias/img-projets/MMIairline/2-min.png);
}

.Ma03 {
    background-image: url(/medias/img-projets/MMIairline/3-min.png);
}

.Ma04 {
    background-image: url(/medias/img-projets/MMIairline/4-min.png);
}

.Ma05 {
    background-image: url(/medias/img-projets/MMIairline/5-min.png);
}

/* Fonds PROJET LYRICS */

.Ly01 {
    background-image: url(/medias/img-projets/Lyrics-project/1-min.png);
}


.Ly02 {
    background-image: url(/medias/img-projets/Lyrics-project/2-min.png);
}


.Ly03 {
    background-image: url(/medias/img-projets/Lyrics-project/3-min.png);
}


.Ly04 {
    background-image: url(/medias/img-projets/Lyrics-project/4-min.png);
}


.Ly05 {
    background-image: url(/medias/img-projets/Lyrics-project/5-min.png);
}

/* Fonds PROJET LYRICS */


.Ci01 {
    background-image: url(/medias/img-projets/CVinteractif/1-min.png);
}


.Ci02 {
    background-image: url(/medias/img-projets/CVinteractif/2-min.png);
}


.Ci03 {
    background-image: url(/medias/img-projets/CVinteractif/3-min.png);
    ;
}


.Ci04 {
    background-image: url(/medias/img-projets/CVinteractif/4-min.png);
}


.Ci05 {
    background-image: url(/medias/img-projets/CVinteractif/5-min.png);
}

/* Fonds Boosta */

.Bo01 {
    background-image: url(/medias/img-projets/BOOSTA/Boosta-1.png);
}

.Bo02 {
    background-image: url(/medias/img-projets/BOOSTA/Boosta-2.png);
}

.Bo03 {
    background-image: url(/medias/img-projets/BOOSTA/Boosta-3.png);
}

.Bo04 {
    background-image: url(/medias/img-projets/BOOSTA/Boosta-4.png);
}

.Bo05 {
    background-image: url(/medias/img-projets/BOOSTA/Boosta-5.png);
}

/* Fonds Youtubes */

.Y01 {
    background-image: url(/medias/img-projets/Youtube/1-min.png);
}

.Y02 {
    background-image: url(/medias/img-projets/Youtube/2-min.png);
}

.Y03 {
    background-image: url(/medias/img-projets/Youtube/3-min.png);
}

.Y04 {
    background-image: url(/medias/img-projets/Youtube/4-min.png);
}

.Y05 {
    background-image: url(/medias/img-projets/Youtube/5-min.png);
}

.BackNext {
    height: 20vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;

}

.centerBN {
    width: 40%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Back {
    height: 40%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1%;
    border-radius: 8px;
    z-index: 8000;
    background-color: #4f54eb;
    transition: 0.5s ease-in-out;
    color: white;
}

.Back:hover {
    background-color: #D1D6FF;
    color: #4f54eb;
    transition: 0.5s ease-in-out;
}

.Next:hover {
    background-color: #D1D6FF;
    color: #4f54eb;
    transition: 0.5s ease-in-out;
}

.Next {
    height: 40%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1%;
    border-radius: 8px;
    z-index: 8000;
    background-color: #4f54eb;
    color: white;
    transition: 0.5s ease-in-out;
}

.Seeproject:visited {
    color: white;
}

.Back:visited {
    color: white;
}

.Next:visited {
    color: white;
}


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




/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {


    .CenterSee {
        width: 100%;
        flex-direction: column;
    }

    .TitlePage h1 {
        font-size: 2rem;

    }

    h1 span {
        color: #D1D6FF;
        -webkit-text-stroke: 2px #4f54eb;
        font-size: 1.5rem;
    }

    .roletype {
        width: 100%;
        flex-direction: column;
        font-size: 1.1rem;
    }

    .PageProject {
        min-height: 100vh;
        height: auto;
        margin-top: 20%;
    }

    .ProjectsCenter {
        height: 80%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* background-color: gainsboro; */
    }

    .banniere {
        width: 100%;
        min-height: 100vh;
    }

    .CouvImg {
        align-items: center;
        width: 100%;
    }

    .topInfo {
        flex-direction: column;
        height: 70%;
        align-items: center;
        /* background: pink; */
    }

    .leftCase a {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .leftCase .Cnproject {
        align-items: center;
    }


    .TitlePage {
        font-size: 1.7rem;
        width: 100%;
        align-items: center;
    }

    .TitlePage h1 {
        -webkit-text-stroke: 0px;
        color: #4f54eb;
    }

    #scrollproject {
        display: none;
    }

    .bottomInfo {
        justify-content: center;
        height: 40%;
    }

    .bottomleftinfo {
        width: 90%;
        /* background-color: goldenrod; */
        height: 100%;
    }

    .bottomrightinfo {
        display: none;
    }

    .img-projet {
        width: 80%;
        height: 100%;
        min-height: 250px;
        max-height: 300px;
        max-width: 400px;
    }

    .GalerieProjects {
        min-height: 100vh;
        height: auto;
        width: 100vw;
        /* background-color: brown; */
    }

    .rightinfo {
        width: 90%;
        height: 60%;
        justify-content: center;
        align-items: center;
        /* background-color: cadetblue; */
    }

    .skillUsed {
        width: 80%;
        min-height: 30vh;
    }

    .Seeproject {
        width: 80%;
        padding: 2%;
    }

    .Noproject {
        width: 45%;
        padding: 1%;
    }

    .centerBN {
        width: 80%;
    }

    .Banimg {
        height: 85%;
        width: 80%;
        display: flex;
        justify-content: center;

    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 992px) {

    .roletype {
        width: 100%;
        flex-direction: column;
        font-size: 1.1rem;
    }

    .centerBN {
        width: 60%;
    }

    #scrollproject {
        display: none;
    }

    .bottomleftinfo {
        width: 90%;
    }

    .bottomrightinfo {
        width: 10%;
    }

    .img-projet {
        width: 65%;
    }

    .topInfo {
        height: 50%;
    }

    .skillUsed {
        height: 70%;
        width: 100%;
    }

    .Banimg {
        height: 70%;
    }

    .TitlePage {
        font-size: 2.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width:1199px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width:1399px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}