content {
    width: 90vw;
    display: grid;
    grid-template: repeat(4, auto) / repeat(12, 1fr);
    column-gap: 1vw;
    row-gap: 10vh;
    padding-bottom: 5vh;
}

content p, content h2, content h3, content h4, content h5{
    animation: textReveal linear;
    animation-timeline: view();
    animation-range-start: over 0%;
    animation-range-end: contain 30%;
}

#Titre {
    width: auto;
    height: auto;
    grid-row: 1;
    grid-column: 8 / span 4;
}

#Bio {
    width: auto;
    height: auto;
    grid-row: 2;
    grid-column: 2 / span 4;

    display: flex;
    flex-direction: column;
    gap: 5vh;
}

#Bio>div {
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

#CV {
    width: auto;
    height: auto;
    grid-row: 2;
    grid-column: 8 / span 4;

    display: flex;
    flex-direction: column;
    gap: 5vh;
}

#CV > div {
    width: auto;
    height: auto;

    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.Formations,
.Experiences {
    width: auto;
    height: auto;

    display: flex;
    flex-direction: column;
    gap: 0.5vh;
}

#CV span {
    width: auto;
    height: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#Competence > div{
    display: flex;
    flex-direction: row;

    justify-content: space-between;
    flex-wrap: wrap;
    gap:1vh;
}

#CV .Competences {
    width: auto;
    height: auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    column-gap: 1.6vh;
}

.Competences img {
    object-fit: contain;
    width: 2vw;
    height: 2vw;
}

#CV .Competences span {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 0.2vw;
}

#CV .gellule {
    width: 1.4vw;
    height: 1vw;

    border-radius: 1vw;
    border: #0C0C0C 2px solid;

}

#CV .fill {
    background-color: #0C0C0C;
}

.FooterDiv{
    border-top:Black 2px solid;
    padding-top: 1vh;
    display: flex;
    flex-direction: column;
    gap:1vh
}

.FooterDiv > ul{
    display: flex;
    flex-direction: column;
    gap:0.25vh;
}

#Qualité {
    width: auto;
    height: auto;
    grid-row: 3;
    grid-column:1/span 4 ;
}

#Langue {
    width: auto;
    height: auto;
    grid-row: 3;
    grid-column:5/span 4 ;
}
#Hobbie{
    width: auto;
    height: auto;
    grid-row: 3;
    grid-column:9/span 4 ;
}
#fond
{
    width: 90vw;
    height: 45vh;
    grid-row: 4;
    grid-column:1/span 12;
}

@media (min-width: 321px) and (max-width: 799px) {
    #Titre {
        width: auto;
        height: auto;
        grid-row: 1;
        grid-column: 1 / span 12;
    }

    content {
        display: flex;
        flex-direction: column;
        gap: 10vh;
    }

    .Competences img {
        width: 4vh;
        height: 4vh;
    }
    
    #CV .Competences span {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        gap: 0.5vw;
    }
    
    #CV .gellule {
        width: 4vw;
        height: 3vw;
    
        border-radius: 1vh;    
    }
}

@keyframes textReveal {
    from {
        padding-top: 20px;
        opacity: 0;
    }
    
    to{
        padding-top: 0;
        opacity: 1;
    }
}