* {
    margin: 0;
    padding: 0;
}

:root {
    --background: #222328;
    --active: linear-gradient(#D9D9D905, #73737305);
    --font-size-title: 2vw;
    --font-size-base: 1.5vw;
    --font-size-detail: 1vw;
}

html {
    scroll-behavior: smooth;

    background: var(--background);
}


/* Navbar */

#navbar {
    position: absolute;
        bottom: 0;

    display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

    width: 100%;
    overflow: hidden;
}

#navbar a {
    color: white;
    font-size: 2vw;
        font-family: Jura;
        font-weight: 900;
        text-decoration: none;
}

.navbtn {
    padding: 2vh 4vw;
        border-radius: 0px;

    background: #00000001;

    transition: all 250ms;
}

.navbtnActive {
    padding: 1% 6vw;
    background: #D9D9D90F;
    border-radius: 20px;
}


/* Pages */

#pages {
    display: block;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;

    width: 100%;
        height: 100vh;
}

.page {
    display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
        /* transform: translate(-50%, -50%); */

    width: 100%;
        height: 100%;


    color: white;
    font-size: var(--font-size-base);
        font-family: Jura;
    background: var(--background);
}


/* Home */
#home {
    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}

#home h1 {
    font-size: 6vw;
        font-weight: 900;
}

#home div {
    display: flex;

    font-size: 3vw;
        letter-spacing: 5px;
        font-weight: 100;
}

#home div span:nth-child(2) {
    margin-left: 10px;
    letter-spacing: 0;
}

#home div span:last-child {
    font-size: 1vw;
        letter-spacing: 0;
    justify-self: flex-start;
}

@media only screen and (max-width: 900px) {
    #home h1 {
        font-size: 1.5em;
    }
    #home div {
        font-size: 1em;
    }
    #home div span:last-child {
        font-size: .5em;
    }
}

/* Presentation */

#presentation {
    /* display: flex;
        flex-wrap: wrap;
        flex-flow: column column wrap;
        justify-content: space-around; */

        display: grid;
        grid-template-columns: 30vw 30vw 30vw;
        grid-template-areas:
          ". . ."
          ". . .";
        max-height: 90vh;
}

#presentation #information {
    display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
}

#presentation .title {
    font-size: var(--font-size-title);
        font-weight: 900;
    letter-spacing: 1px;
}

#presentation #information div {
    display: flex;
        flex-direction: column;
}

#presentation #information .info {
    font-size: var(--font-size-base);
    font-weight: 900;
    letter-spacing: 2px;
}

#presentation #information .status {
    font-size: var(--font-size-detail);
}

#presentation .InfoList {
    display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
}

#presentation #DiplomeCertif .title {
    display: flex;
        flex-direction: column;
        align-items: flex-start;
}

#presentation #formation li div  {
    display: flex;
    flex-direction: column;
}


#presentation #DiplomeCertif #diplome div {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#presentation #DiplomeCertif #diplome span .detail {
    justify-self: flex-end;
    align-self: flex-end;
}

#presentation #formation {
    display: flex;
        flex-direction: column;
        gap: 10px;
}

#presentation .detail {
    font-size: var(--font-size-detail);
        font-style: italic;
}

#presentation .lieux {
        font-weight: 900;
}

@media only screen and (max-width: 900px) {
    :root {
        --font-size-title: 6vw;
        --font-size-base: 5vw;
        --font-size-detail: 4vw;
    }
    #presentation {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 10vw;
        gap: 20px;
        overflow: hidden;
    }
    #presentation .InfoList {
            gap: 0px;
    }
    #presentation #information {
            gap: 0px;
    }
    #presentation #formation li div  {
        max-width: 80vw;
    }
}

/* Compétance Experiencer */

#CEcontainer {
    display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
}

#CEcontainer .CEchild {
    padding: 2vh 1vw;
    background-color: #3a3b8a2a;
    border-radius: 45px;

    display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
}

#CEcontainer .CEchild div {
    display: flex;
        flex-direction: column;
        gap: 10px;
}

#CEcontainer .CEchild .title {
    font-size: var(--font-size-title);
    font-weight: 900;
}

#CEcontainer .CEchild div .title {
    font-size: var(--font-size-base);
    font-weight: 900;
    color: #a5afde;
}

@media only screen and (max-width: 900px) {
    #CEcontainer {
        display: flex;
            flex-direction: column;
            gap: 0px;
    }
    #CEcontainer .CEchild {
            gap: 0px;
            border-radius: 20px;
    }
    #CEcontainer .CEchild div {
            gap: 0px;
    }
    #CEcontainer .CEchild .title {
        font-size: 5vw;
    }
    #CEcontainer .CEchild div .title {
        font-size: 4vw;
    }
    #CEcontainer .CEchild div {
        font-size: 3vw;
    }
}

/* Projet */

#Pcontainer {
    width: 70vw;
    height: 70vh;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #3a3b8a2b;
    border-radius: 45px;
}

#Pcontainer .eleList {
    border-radius: 45px;
    width: 80%;
    float: none;
    height: 85%;
    margin: 2%;
    padding: 2%;
    display: inline-block;
    background-color: #3a3b8a37;
    zoom: 1;
    text-align: center;
}

.ListChild {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eleList .title {
    font-size: var(--font-size-title);
        font-weight: 900;
    letter-spacing: 1px;
}

#Imagecontainer {
    display: inline-block;
    width: 70%;
    height: 70%;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    background-color: #3a3b8a2b;
    border-radius: 45px;
}

#Imagecontainer img {
    border-radius: 15px;
    float: none;
    height: 90%;
    margin: 2%;
    padding: 1%;
    display: inline-block;
    background-color: #3a3b8a37;
    zoom: 1;
    object-fit: cover;
}

@media only screen and (max-width: 900px) {
    #Pcontainer {
        width: 100vw;
        height: 70vh;
        font-size: var(--font-size-detail);
    }
}

/* Contrat */

#Cformulaire {
    background-color: #3a3b8a32;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 20px;
    border-radius: 15px;
}

#Cformulaire .FormInput {
    background-color: #2A2B3D;
    border: black 2px solid;
    padding: 10px;
    color: white;
    font-family: Roboto;
    border-radius: 5px;
}



#Cformulaire .FormInput::placeholder {
    letter-spacing: 1px;
    color: white;
}