html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'raleway';
    cursor: none;
}

body {
    height: fit-content;
    cursor: none;
    background-color: #03000b;
    animation: 3s linear 1s infinite alternate coloring;
}

p {
    position: absolute;
    left: 25px;
    z-index: 12;
    color: white;
    font-size: 8vw;
}
a{    
    text-decoration: none;
    color: unset;
    cursor: none!important;
    transition: all 250ms;
    }
    
    a:hover{
        padding-left:35px
    }
    
    a::before{
        content:'▸';
        color:white;
        position:absolute;
        opacity:0;
        transition:all .2s ease-in-out;
        transform: translateX(-40px);
    }
    
    a:hover::before{
    opacity:1;
    }


::-webkit-scrollbar {
    display: none;
}

.testtt {
    height: 100%;
    width: 90px;
}

.sectionA {
    z-index: 5;
    /*    margin-right: 80px;*/
    padding-right: 40px;
    align-items: center;
    font-family: "Raleway";
    color: white;
    font-weight: 500;
    font-size: 18px;
    transition: 100ms ease-out;
}

.sectionA:hover {
    color: rgb(255, 228, 228);

}

.sectionB {
    z-index: 5;
    /*    margin-right: 80px;*/
    padding-right: 40px;
    align-items: center;
    font-family: "Raleway";
    color: white;
    font-weight: 500;
    font-size: 18px;
    transition: 200ms ease-out;
    padding-left: 20%;
}

.sectionB:hover {
    font-weight: 700;
    padding-left: 80px;
    color: pink;
}


.sectionC {
    z-index: 5;
    /*    margin-right: 80px;*/
    padding-right: 40px;
    align-items: center;
    font-family: "Raleway";
    color: white;
    font-weight: 700;
    font-size: 18px;
    transition: 200ms ease-out;
    padding-left: 20%;
}

.sectionC:hover {
    font-weight: 700;
    padding-left: 80px;
    color: rgb(248, 192, 255);
}

.sectionD {
    z-index: 5;
    /*    margin-right: 80px;*/
    padding-right: 40px;
    align-items: center;
    font-family: "Raleway";
    color: white;
    font-weight: 500;
    font-size: 18px;
    transition: 200ms ease-out;
    padding-left: 20%;
}

.sectionD:hover {
    font-weight: 700;
    padding-left: 80px;
    color: rgb(192, 193, 255);

}

.EndButton {
    transition: all 100ms;
    position: absolute;
    bottom: 5%;
    z-index: 14;
    font-size: 8vw;
    color: white;
}

.EndButton:hover {
    padding: 0px 15px;
    color: rgb(192, 193, 255);
}

.goche {
    display: flex;
    flex-direction: row;
    width: 60%;
    align-items: center;
}

.logo {
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    cursor: none
}

.droite {
    position: relative;
}

.square {
    border-radius: 3px;
    height: 36px;
    width: 36px;
    position: absolute;

}

.cellule {
    transition: all 0.5s;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.cache {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 0.4s;
    overflow: hidden;
    filter: brightness(0.6);
}

video {
    transition: all 0.5s;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img {
    transition: all 0.5s;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    object-position: center;
    top: -150px;
    object-fit: cover;
}

.PhotoDeDanny {
    height: 70%;
    width: 70%;
    margin: auto;
    z-index: 10;
    border-radius: 500px;
    mix-blend-mode: luminosity !important;
}

.Resume {
    position: absolute;
    z-index: 500;
    color: white;
    font-weight: bold;
    top: 86%;
    left: 5%;
    padding-left: 0px;
    transition: all 100ms;
}

.Resume:hover {
    transition: all 100ms;
    padding-left: 20px;
    color: rgb(255, 192, 240) !important
}

.box1 {
    background: linear-gradient(123.88deg, #F857A6 0%, #FF5858 100%);
}

.box2 {
    background: linear-gradient(123.88deg, #24C6DC 0%, #514A9D 100%);
}

.box3 {
    background: linear-gradient(123.88deg, #f8e857 0%, #ca9115 100%);
}

/*.grid3 {
    grid-row: 1/3;
    grid-column: 3/4;
}
.grid5 {
    grid-row: 2/3;
    grid-column: 1/3;
}
*/
.box4 {
    background: linear-gradient(123.88deg, rgba(151, 150, 240, 1), rgba(251, 199, 212, 1));
}

.box5 {
    background: linear-gradient(123.88deg, rgba(18, 23, 52, 0.99) 0%, #1846AC 100%);
}


.box6 {
    background: linear-gradient(123deg, rgba(194, 21, 0, 1), rgba(255, 197, 0, 1));
}

.box6 p a {
    font-weight: bold;
}

p a:hover {
    transition: all 100ms;
    padding-left: 20px;
    /*color: rgb(192, 193, 255);*/
}

.behance {
    font-weight: Bold;
}

.instagram {
    font-weight: Bold;
}

.twitter {
    font-weight: Bold;
}

.linkedin {
    font-weight: Bold;
}

.mail {
    font-weight: Bold;
}


.behance:hover {
    color: pink !important;
}

.instagram:hover {
    color: rgb(255, 192, 240) !important
}

.twitter:hover {
    color: rgb(192, 222, 255) !important;
}

.linkedin:hover {
    color: rgb(192, 192, 255) !important;
}

.mail:hover {
    color: rgb(192, 250, 255) !important;
}

.box7 {
    background-color: #5ED194;
}

.box8 {
    background-color: #EBAA2D;
}


.box9 {
    background-color: #F49387;
}

.box10 {
    background: linear-gradient(123.88deg, rgb(187, 133, 71), rgb(166, 189, 65));
}

.box11 {
    background: linear-gradient(123.88deg, rgb(240, 150, 232), rgb(251, 228, 199));
}

.box12 {
    background: linear-gradient(123.88deg, rgb(150, 240, 195), rgb(251, 199, 244));
}

.titre {
    z-index: 5;
    height: 80px;
    width: 40%;
    left: 25px;
    bottom: 50%;
    transform: translate(0, +40px);
    position: absolute;
    transition: all 0.3s;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Raleway";
    pointer-events: none;
}

.cache:hover+div {
    transform: translate(30px, +40px);
    color: rgb(255, 255, 255);
}

.grain {
    z-index: 9;
    pointer-events: none;
    content: "";
    width: 100%;
    position: absolute;
    background-image: url(data:image/png;base64,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);
}

.flexé {
    display: flex;
}

.colomn {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.catégorie {
    font-size: 16px;
    min-width: 190px;
}

.numéro {
    font-size: 56px;
    line-height: 30px;
}

.onglet {
    font-size: 16px;
    font-weight: bold;
}

.name {
    font-size: 16px;
    font-weight: bold;
    min-width: 96px;
    cursor: none;
    transition: 100ms all;
}

.name:hover {
    color: rgb(169, 236, 230);
}

.date {
    font-size: 14px;
}

.cursor {
    z-index: 5000;
    transition: 300ms all ease-out;
    border-radius: 100px;
    position: fixed;
    transform: translate(-50%, -50%);
    height: 45px;
    width: 45px;
    background-color: white;

     mix-blend-mode: difference; 
    pointer-events: none;
}
.cursor-on-link {
    width: 4px;
    height: 4px;
    opacity: 1;
    mix-blend-mode: normal;
    background-color: #fff ;
}

.headercarre {
    height: 80px;
    width: 90%;
    left: 25px;
    bottom: 50%;
    transform: translate(0, 40px);
    position: absolute;
    transition: all 100ms;
}

.miseentexte {
    max-width: 95%
}

.miseentexte img {
    width: 70%;
}

.miseentexte video {
    width: 85%;
}

.grid2 {
    overflow: scroll;
}

.grid2::-webkit-scrollbar-thumb {
    background-color: white;
}

@keyframes coloring {
    from {
        background-color: #03000b;
    }

    to {
        background-color: #0f0000;
    }
}

@font-face {
    font-family: 'Raleway';
    src: url('font/Raleway/Raleway-VariableFont_wght.ttf') format('truetype')
}

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('font/playfair/PlayfairDisplay-VariableFont_wght.ttf') format('truetype')
}

/*MEDIA QUERY XS SIZE*/

@media (max-width:360px) {
    body {
        position: relative;
        width: 100%;
        height: 100%;
        background: black;
        display: grid;
        margin: 0px;
        /*cursor: none;*/
        transition: 400ms all;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 100vw;
        font-family: 'Raleway';
    }

    .grid1 {
        grid-column: 1/-1 !important;
        grid-row: 2/3 !important;
    }

    .grid2 {
        grid-column: 1/-1 !important;
        grid-row: 3/5 !important;

    }

    .grid3 {
        grid-column: 1/-1 !important;
        grid-row: 4/5 !important;

    }

    .grid4 {
        grid-column: 1/-1 !important;
        grid-row: 5/6 !important;

    }

    .grid5 {
        display: none;
    }

    /*
.grid6 {
    grid-column:1/-1!important ;
   grid-row: -1/1!important;
   
}*/
    .grid7 {
        display: none
    }

    .grid8 {
        display: none
    }

    .grid9 {
        display: none
    }

    .grid10 {
        display: none
    }

    .grid11 {
        display: none
    }

    .grid12 {
        display: none
    }

    .grid13 {
        display: none
    }

    .grid14 {
        display: none
    }

    .grid15 {
        display: none;
    }

    .catégorie {
        font-size: 8vw !important;
    }

    .name {
        font-size: 8vw !important;
    }


    .EndButton {
        font-size: 8vw !important
    }

    p {
        font-size: 6vw !important;
    }

    a {
        font-size: 8vw !important;
    }

    .grain {
        height: 500vw;
    }

}

/*MEDIA QUERY S SIZE*/

@media (max-width: 850px) and (min-width:360px) {
    body {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 50vw;
        position: relative;
        width: 100%;
        height: 100%;
        background: black;
        display: grid;
        margin: 0px;
        /*cursor: none;*/
        transition: 400ms all;
        font-family: 'Raleway';
    }

    /* HEADER en S*/
    .headernew {
        opacity: 0;
        pointer-events: none;
        font-family: 'raleway';
        color: white;
        display: flex !important;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        position: absolute;
        height: 100px;
        width: 100%;
        z-index: 1000 !important;
        padding: 0px 0px !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0.38616943359375) 65%, rgba(0, 0, 0, 0.5878501742493873) 100%);
    }

    /*.grid1 {
    grid-column: 1/2!important;
    grid-row: 1/2!important;
   
}*/
    .grid2 {
        grid-column: 1/-1 !important;
        grid-row: 2/4 !important;
    }

    /*
.grid3 {
    grid-column: 2/-1!important;
    grid-row: 3/4!important;
   
}
.grid4 {
    grid-column: 1/2!important;
    grid-row: 4/5!important;
   
}*/
    .grid5 {
        display: none;

    }

    .grid6 {
        grid-column: 1/-1 !important;
        grid-row: 4/5 !important;

    }

    .grid7 {
        display: none
    }

    .grid12 {
        display: none
    }

    .grid8 {
        display: none
    }

    .grid9 {
        display: none
    }

    .grid10 {
        display: none
    }

    .grid11 {
        display: none
    }

    .grid13 {
        display: flex;
        grid-column: 2/-1 !important;
        grid-row: 2/3 !important;
    }

    .grid14 {
        display: flex;
        grid-column: 1/-2 !important;
        grid-row: 3/4 !important;
    }

    .grid15 {
        display: flex;
        grid-column: 2/-1 !important;
        grid-row: 4/5 !important;
    }


    .headercarre {
        bottom: 55%;
    }

    /*.grid2{justify-content: center;}
.grid2 p{left: inherit;}*/
    .catégorie {
        font-size: 4vw !important;
    }

    .name {
        font-size: 4vw !important;
    }

    .EndButton {
        font-size: 4vW !important
    }

    p {
        font-size: 4vw !important;
    }

    a {
        font-size: 4vw !important;
    }

    .grain {
        height: 200vw;
    }
}

/*MEDIA QUERY M SIZE 850-1400*/

@media (max-width:1400px) and (min-width:850px) {
    body {
        position: relative;
        width: 100%;
        height: 100%;
        background: black;
        display: grid;
        margin: 0px;
        /*cursor: none;*/
        transition: 400ms all;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 33vw;
    }

    .headernew {
        display: none;
    }

    .grid1 {
        grid-column: 1/2 !important;
        grid-row: 2/3 !important;
    }

    .grid2 {
        grid-column: 2/-1 !important;
        grid-row: 1/4 !important;
    }

    .grid3 {
        grid-column: 3/-1 !important;
        grid-row: 1/2 !important;
    }

    .grid4 {
        grid-column: 3/-1 !important;
        grid-row: 2/4 !important;
    }

    .grid6 {
        grid-column: 1/2 !important;
        grid-row: 3/4 !important;
    }

    .grid5 {
        display: none
    }

    .grid7 {
        display: none;
    }

    .grid8 {
        display: none
    }

    .grid9 {
        display: none
    }

    .grid9 {
        display: none
    }

    .grid10 {
        display: none
    }

    .grid11 {
        display: none
    }

    .grid12 {
        display: none
    }

    .grid13 {
        grid-column: 1/2 !important;
        grid-row: 4/5 !important;
    }

    .grid14 {
        grid-column: 2/3 !important;
        grid-row: 4/5 !important;
    }

    .grid15 {
        grid-column: 3/-1 !important;
        grid-row: 4/5 !important;
    }

    .headercarre {
        bottom: 61%;
    }

    .catégorie {
        font-size: 3vw !important;
    }

    .name {
        font-size: 3vw !important;
    }

    .EndButton {
        font-size: 3vW !important
    }

    p {
        font-size: 3vw !important;
    }

    a {
        font-size: 3vw !important;
    }

    .grain {
        height: 99vw;
    }
}

/*MEDIA QUERY L SIZE*/

@media (min-width: 1400px) {
    body {
        position: relative;
        width: 100%;
        height: 100%;
        background: black;
        display: grid;
        margin: 0px;
        /*cursor: none;*/
        transition: 400ms all;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-rows: 25vw;
        font-family: 'Raleway';
    }

    .headernew {
        display: none !important;
    }

    .grain {
        height: 75vw;
    }

    .grid1 {
        grid-column: 1/2 !important;
        grid-row: 2/3 !important;
    }

    .grid2 {
        grid-column: 2/-1 !important;
        grid-row: 1/4 !important;
    }

    .grid2 p {
        font-size: 2vw !important;
    }

    .grid3 {
        grid-column: 4/-1 !important;
        grid-row: 1/2 !important;
    }

    .grid4 {
        grid-column: 4/-1 !important;
        grid-row: 2/3 !important;
    }

    .grid7 {
        display: none
    }

    .grid5 {
        display: none
    }

    .grid8 {
        display: none;
    }

    .grid6 {
        grid-column: 1/2 !important;
        grid-row: 3/4 !important;
    }

    .grid9 {
        display: none;
    }

    .grid10 {
        display: none
    }

    .grid11 {
        display: none
    }

    .catégorie {
        font-size: 2vw !important;
    }

    .name {
        font-size: 2vw !important;
    }

    .EndButton {
        font-size: 2vW !important
    }

    p {
        font-size: 2vw !important;
    }

    a {
        font-size: 2vw !important;
    }
}