body
{
    display: flex;
    cursor: crosshair;
    color: white;
    overflow-x: hidden;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;

    contenu
    {

        border: 15px solid white;
        border-radius: 50px;
        display: block;
        width: 100vw;
        height: calc(100vh - 30px);
        overflow-y: scroll;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        padding: 0 16px 0 16px;
        div
        {
            scroll-snap-align: center;
        }
    }

    h1
    {
        color: white;
        text-align: center;
    }

    h2 a
    {
        color: white;
        cursor: default;
    }

    .titre
    {
        display: flex;

        justify-content: center;
        align-items: center;
        color: white;
        position: sticky;
        text-align: center;
        z-index: 10;
        top: 30px;
        height: 30px;
        animation: entree ease-out 3s 1;
        text-shadow: 0 0 10px black;
        height: fit-content;
        width: fit-content;
        margin: auto;

        /*
        animation: reduire linear both;
        animation-timeline: scroll(nearest);
        animation-range: contain 50% contain 100%;
        */
    }

    carrousel
    {
        display: flex;
        animation: defilement 25s linear infinite;
        animation-delay: 2s;
        scroll-snap-align: center;
        max-width: 100vh;
        a, images
        {
            display: block;
            margin: 25px;
            color: white;
        }
        a:hover
        {
            cursor: default;

        }
        img
        {
            object-fit: cover;
            border-radius: 16px;
            height: 400px;
            box-shadow: 0 0 10px black;
        }
    }

    liens
    {

        display: flex;
        
        position: sticky;
        top: 0;
        z-index: 5;
        justify-content: space-between;
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 30px;
        margin: 30px -16px;
        a
        {
            display: flex;
            flex-direction: column;

            transition: 250ms;
            color: gray;
            text-decoration: none;
            width: 150px;
            margin: 0 50px;
            img
            {
                padding: 5px 0;
                transition: 250ms;
                width:40px;
                filter: invert(1) brightness(0.5);
            }
            h4
            {
                transition: 250ms;
                margin: 5px 0;
                color: gray;
            }
        }
        a:hover
        {
            transition: 250ms;
            color: white;
            cursor: default;
            text-decoration: underline;
            img
            {
                padding: 0 0 10px 0;
                filter: invert(1)
            }
            h4
            {
                transition: 250ms;
                color: white;
            }
            .detail
            {
                height: fit-content !important;
            }
            
        }
    }
    .detail
    {
        margin: 0;
        text-align: left;
        text-decoration:none;
        font-size: small;
        overflow: hidden;
        animation: miniaturisation linear forwards;
        animation-delay: 1s;
        animation-timeline: view();
    }

    colonnes
    {
        display: flex;
        justify-content: space-between;
        colonne
        {
            width: calc(50% - 5px);
            img
            {
                width: 100%;
                border-radius: 16px;
            }
            a img
            {
                width: 20px;
                border-radius: unset;
            }
            langages img
            {
                width: unset;
                border-radius: unset;
            }
            logo img
            {
                width: unset;
                height: 100px;
                aspect-ratio: contain;
                border-radius: unset;
            }
        }
    }

    sep
    {
        display: block;
        border-bottom: solid 1px white;
    }

    spacer
    {
        display: block;
        height: 200px;
    }

    sommaire
    {
        display: block;
        scroll-snap-align: center;
        text-align: center;
        color: white;
        border: white 1px solid;
        border-radius: 16px;
        width: 85%;
        padding: 15px 0;
        margin: auto;
        a
        {
            display: block;
            text-align: center;
            color: white;
            width: fit-content;
            margin: auto;
        }
        a:hover
        {
            cursor: default;
        }
    }

    projet
    {
        display: block;
        margin: 50px 7.5% 25px 7.5%;
        height: fit-contentxx;
        max-height: 78vh;
        border-bottom: 3px rgba(255, 255, 255) solid;
        color: white;
        
        overflow-x: hidden;
        scroll-snap-align: center;
        titre
        {
            padding: 35px 0 0 0;

            display: block;
            font-size: 2.5rem;
            font-weight: bolder;
            text-decoration: underline;
            text-shadow: 0 0 5px black;
            top: 0;
            z-index:1;
            position: sticky;
            margin: 20px 0;
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
            color: white;
        }
        description
        {
            display: block;
            font-size: 1.5rem;
            font-style: italic;
        }
        a
        {
            display: block;
            color: white;
        }
        a:hover
        {
            cursor: default;
        }
        infos
        {
            display: flex;
            flex-direction: column;
        }
        langages
        {
            margin: 10px 0;
            display: flex;
            align-items: center;
            img
            {
                z-index: 0;
                height: 45px;
                padding: 0 5px;
                filter: drop-shadow(0 0 5px black);
            }
        }
        ul
        {
            display: flex;
            padding: 0;
            li
            {
                width: fit-content;
                margin:0 20px;
            }
        }

        carrousel
        {
            images
            {
                display: flex;
                flex-direction: column;
                margin: 25px;
            }
        }

        logo img
        {
            width: unset;
            height: 100px;
            aspect-ratio: contain;
            border-radius: unset;
        }

        date
        {
            color: rgb(64, 64, 64);
            font-style: italic;
        }

    }
    conteneur::-webkit-scrollbar , projet::-webkit-scrollbar
    {
        display: none;
    }

    form
    {
        display: flex;
        justify-content: end;
        margin: 30px 10%;


    }

    grille
    {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        margin: 0 10%;
        a
        {
            width: 440px;
            display: block;
            margin: auto;
            text-decoration: none;
            scroll-snap-align: center;
            img
            {
                width: 440px;
                height: 250px;
                object-fit: cover;
                border-radius: 15px;
            }
            titre
            {
                display: block;
                padding: 10px;
                border-radius: 0 0 15px 15px;
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
                margin-top: -50px;
                margin-bottom: 30px;
                color: white;
                text-shadow: 0 0 10px black;
                height: 30px;
                overflow: hidden;
                
            }
        }
    }

    contact
    {
        color: white;
        text-align: center;
        display: block;
        width: 100%;
        padding: 30px 30px 0 0;
        margin: 0 -16px;
        background-color: rgba(0, 0, 0, 0.7);
        
        h2
        {
            margin: 0;
        }
        form
        {
            display: flex;
            flex-direction: column;
            align-items: center;
            ligne
            {
                display: grid;
                grid-template-columns: repeat(1,1fr);
                justify-items: center;
                label
                {
                    margin: 5px;
                    margin-left: auto;
                }
                input
                {
                    margin: 5px;
                    padding: 5px;
                    width: 300px;
                    color: black;
                    margin-right: auto;
                    background: rgb(175, 175, 175);
                    border: 1px white solid;
                }
                input::placeholder
                {
                    color: rgb(58, 58, 58);
                }
            }
            input
            {
                margin: 10px;
                padding: 5px;
                width: 300px;
                border-radius: 5px;
                color: black;
                width: 300px;
                border: none;
                color: white;
            }
        }
        a
        {
            color: gray;
            cursor: default;
        }
    }

    pied
    {
        text-align: center;
        color: white;
        background-color: rgb(0, 0, 0,0.7);
        display: block;
        width: 100%;
        padding: 30px 30px 30px 0;
        margin: 0 -16px;
        scroll-snap-align: center;
        h3
        {
            margin-top: 0;
        }
        img
        {
            height: 40px;
        }
        reseaux
        {
            margin: 0 30%;
            display: flex;
            justify-content: space-evenly;
            img:not(:hover)
            {
                filter: grayscale() contrast(0.3);
                transition: 250ms;
            }
            img:hover, img::selection
            {
                filter: contrast(1);
                scale: 1.05;
                transition: 250ms;
                cursor: default;
            }
        }
    }
}

.bouton
{
    background: royalblue;
    border:none;
    color: white;
    transition: 500ms;
}
.bouton:hover
{
    background: darkblue;
    scale: 1.05;
    transition: 500ms;
}

.fond::-webkit-scrollbar
{
    display: none;
}
contenu::-webkit-scrollbar, carrousel::-webkit-scrollbar
{
    display: none;
}


@keyframes defilement {
    to
    {
        transform: translateX(-100%);
    }    
}

@keyframes miniaturisation {
    0%
    {
        height: fit-content;
    }
    60%
    {
        height: fit-content;
    }
    100%
    {
        height: 0;
    }
}
/*
@keyframes entree {
    0%
    {
        font-size: 6em;
        height: 100vh;
    }
    100%
    {
        font-size: 2em;
        height: 30px;
    }
}
*/
.titre-haut
{
    margin-left: 5%;
    font-size: 2rem;
    width: fit-content;
    background: var(--degradeRougeRose);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bolder;
}



@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.fond
{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border: 15px solid white;
    border-radius: 20px;
    overflow: hidden;
}

.couleur
{
    background: #00004a;
    top: 0;
    left: 0;
    position: fixed ;
    z-index: -3;
    width: 100%;
    height: 100%;
}

.coins
{

    position: fixed;
    display: block;
    width: calc(100vw - 30px);
    height: calc(100vh - 30px);
    border: 15px solid white;
    top: 0;
    left: 0;
    position: fixed ;
    z-index: -1;

}

.fond span {
    width: 35vmin;
    height: 35vmin;
    border-radius: 40vmin;
    backface-visibility: hidden;
    position:fixed;
    animation: move;
    animation-duration: 35;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: -2;
    filter: blur(200px) saturate(2);
}


.fond span:nth-child(0) {
    color: #fff76b;
    top: 56%;
    left: 52%;
    animation-duration: 102s;
    animation-delay: -74s;
    transform-origin: -1vw 7vh;
    box-shadow: 80vmin 0 10.796230716028068vmin currentColor;
}
.fond span:nth-child(1) {
    color: #96d35f;
    top: 9%;
    left: 97%;
    animation-duration: 60s;
    animation-delay: -47s;
    transform-origin: -20vw -11vh;
    box-shadow: -80vmin 0 10.509796846144816vmin currentColor;
}
.fond span:nth-child(2) {
    color: #77bb41;
    top: 83%;
    left: 91%;
    animation-duration: 143s;
    animation-delay: -87s;
    transform-origin: 22vw 7vh;
    box-shadow: -80vmin 0 10.697446356076993vmin currentColor;
}
.fond span:nth-child(3) {
    color: #96d35f;
    top: 26%;
    left: 49%;
    animation-duration: 61s;
    animation-delay: -107s;
    transform-origin: 23vw -17vh;
    box-shadow: -80vmin 0 10.735144617937202vmin currentColor;
}
.fond span:nth-child(4) {
    color: #96d35f;
    top: 20%;
    left: 82%;
    animation-duration: 52s;
    animation-delay: -88s;
    transform-origin: -6vw -1vh;
    box-shadow: -80vmin 0 10.631162351111671vmin currentColor;
}
.fond span:nth-child(5) {
    color: #fffc41;
    top: 65%;
    left: 22%;
    animation-duration: 103s;
    animation-delay: -11s;
    transform-origin: -14vw -22vh;
    box-shadow: 80vmin 0 10.206091096158199vmin currentColor;
}
.fond span:nth-child(6) {
    color: #77bb41;
    top: 34%;
    left: 50%;
    animation-duration: 144s;
    animation-delay: -125s;
    transform-origin: -9vw -19vh;
    box-shadow: 80vmin 0 10.956382909393714vmin currentColor;
}
.fond span:nth-child(7) {
    color: #96d35f;
    top: 100%;
    left: 80%;
    animation-duration: 126s;
    animation-delay: -128s;
    transform-origin: -18vw -3vh;
    box-shadow: -80vmin 0 10.004043648842286vmin currentColor;
}
.fond span:nth-child(8) {
    color: #77bb41;
    top: 52%;
    left: 82%;
    animation-duration: 64s;
    animation-delay: -58s;
    transform-origin: 22vw 4vh;
    box-shadow: -80vmin 0 10.759836823158004vmin currentColor;
}
.fond span:nth-child(9) {
    color: #77bb41;
    top: 9%;
    left: 48%;
    animation-duration: 77s;
    animation-delay: -46s;
    transform-origin: 25vw 8vh;
    box-shadow: -80vmin 0 10.83663007691441vmin currentColor;
}
.fond span:nth-child(10) {
    color: #fff76b;
    top: 31%;
    left: 47%;
    animation-duration: 24s;
    animation-delay: -78s;
    transform-origin: 5vw -17vh;
    box-shadow: -80vmin 0 10.83599573807968vmin currentColor;
}
.fond span:nth-child(11) {
    color: #77bb41;
    top: 61%;
    left: 54%;
    animation-duration: 99s;
    animation-delay: -13s;
    transform-origin: -21vw -5vh;
    box-shadow: 80vmin 0 10.573539350804218vmin currentColor;
}
.fond span:nth-child(12) {
    color: #96d35f;
    top: 11%;
    left: 69%;
    animation-duration: 32s;
    animation-delay: -51s;
    transform-origin: 21vw -10vh;
    box-shadow: -80vmin 0 10.26716898159155vmin currentColor;
}
.fond span:nth-child(13) {
    color: #fff76b;
    top: 85%;
    left: 3%;
    animation-duration: 24s;
    animation-delay: -9s;
    transform-origin: 18vw -15vh;
    box-shadow: 80vmin 0 10.973211415324416vmin currentColor;
}
.fond span:nth-child(14) {
    color: #96d35f;
    top: 61%;
    left: 5%;
    animation-duration: 141s;
    animation-delay: -37s;
    transform-origin: -1vw 19vh;
    box-shadow: -80vmin 0 10.332121860679568vmin currentColor;
}
.fond span:nth-child(15) {
    color: #fffc41;
    top: 28%;
    left: 43%;
    animation-duration: 35s;
    animation-delay: -108s;
    transform-origin: 23vw -7vh;
    box-shadow: 80vmin 0 10.868681274147155vmin currentColor;
}
.fond span:nth-child(16) {
    color: #77bb41;
    top: 23%;
    left: 29%;
    animation-duration: 92s;
    animation-delay: -56s;
    transform-origin: -17vw 5vh;
    box-shadow: 80vmin 0 10.847554123763535vmin currentColor;
}
.fond span:nth-child(17) {
    color: #96d35f;
    top: 74%;
    left: 71%;
    animation-duration: 64s;
    animation-delay: -144s;
    transform-origin: -6vw 25vh;
    box-shadow: 80vmin 0 10.44831393023893vmin currentColor;
}
.fond span:nth-child(18) {
    color: #77bb41;
    top: 96%;
    left: 91%;
    animation-duration: 143s;
    animation-delay: -118s;
    transform-origin: 5vw 9vh;
    box-shadow: 80vmin 0 10.860576952013037vmin currentColor;
}
.fond span:nth-child(19) {
    color: #96d35f;
    top: 95%;
    left: 10%;
    animation-duration: 65s;
    animation-delay: -63s;
    transform-origin: 1vw -17vh;
    box-shadow: 80vmin 0 10.754237323394223vmin currentColor;
}