@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins/Poppins-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}   
@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}   
@font-face {
    font-family: 'Poppins';
    src: url('Fonts/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}   

:root {
    --White: #FFFFFF;
    --GreenBackground: #9DA189;
    --LightGreen: #AAA48F;
    --DarkGreen: #626956;
    --Brown: #82503E;
    --DarBrown: #3B2A27;
}

/* html {
    scroll-behavior: smooth;
} */


body {
    background-color: var(--GreenBackground);
    color: var(--White);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500; 
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top: 0;
    font-size: 16px;
}

/** -------------------------- Header -------------------------- **/
#header {
    /*background-image: url("Art/Background.png");
    /*background-size: cover; /* Remplit le conteneur sans déformer */
    /*background-repeat: no-repeat; /* Empêche la répétition */
    /*background-position: center; /* Centre l'image */
    width: 100%; /* Prend toute la largeur */
    height: 100vh; /* Hauteur égale à la taille de la fenêtre */
    margin: 0;
    color: white; /* Texte blanc pour contraste */
}

#header #picture #forest {
    position: absolute;
    height: 80vh;
    margin-top: 50px;
    z-index: -30;
}

#header #picture #access {
    position: absolute;
    width: 70px;
    margin-top: 50px;
    margin-right: 50px;
    right: 0;
}

#navbar .hidden {
    display: none;
    opacity: 0;;
}


#header #title {
    width: fit-content;
    margin: 0 auto; 
}


@media screen and (min-width: 1081px) {
    
    #header #title h1 {
        width: fit-content;
        font-size: 80px;
        font-family: 'Poppins', sans-serif;
        font-weight: 700; /* Bold */
        margin-top: 0;
        margin-bottom: 0;
        
    }


    #header #title p {
        font-size: 42px;
        margin: 0;
    }




    #header #title #top_title {
        width: fit-content;
        padding-top: 30vh;
    }

    #header #title #bottom_title_capsule {
        text-align: end;
    }    
}

@media screen and (max-width: 1080px) {
    
    #header #title h1 {
        width: fit-content;
        font-size: 45px;
        font-family: 'Poppins', sans-serif;
        font-weight: 700; /* Bold */
        margin-top: 0;
        margin-bottom: 0;
    }


    #header #title p {
        font-size: 22px;
        margin: 0;
    }

    #header #title #top_title {
        width: fit-content;
        padding-top: 30vh;
    }

    #header #title #bottom_title_capsule {
        text-align: end;
    }    
}

#back {
    position: absolute;
    width: 1903px;
    right: 0;
    z-index: -10;
}



@media screen and (min-width: 1081px)  {
    
header #icons {
    display: flex; /* Active Flexbox */
    justify-content: flex-end; /* Aligne les éléments à droite */
    flex-direction: column;
    align-items: end; /* Centre verticalement */
    position:absolute;
    bottom: 0;
    right: 0;
}


header #icons a {
    margin-right: 35px;
    
}

header #icons a img{
    width: 100px;
} 

header #icons #github{
    margin-bottom: 60px;
}
header #icons #linkedin{
    margin-bottom: 150px;
}

}
@media screen and (max-width: 1080px)  {
    
    header #icons {
        position:absolute;
        top: 0;
        display: flex;
        right: 0;
    }
    
    
    header #icons a {
        margin-right: 20px;
        margin-top: 20px;
    }
    
    header #icons a img{
        width: 60px;
    } 
    
    }

header #icons a:hover  {
    transition-duration: 0.2s;
    filter: invert(45%) sepia(15%) saturate(500%) hue-rotate(30deg);
}

/** ------------------------------------------------ NAVBAR ------------------------------------------------ **/

#navbar {
    background-color: var(--Brown);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin-top: -110px;
}


@media screen and (min-width: 1081px) {
    #navbar {
        padding-left: 10vw;
        height: 110px;
    }
    
    #navbar ul {
        font-size: 32px;
    }

    #navbar .nav_numbers {
        font-size: 18px;
        text-align: right;
        margin-bottom: -10px;
        margin-right: -6px;
    }
}

@media screen and (max-width: 1080px) {
    #navbar {
        height: 80px;
        
    }
    
    #navbar .nav_numbers {
        font-size: 10px;
        text-align: right;
        margin-bottom: -6px;
        margin-right: -6px;
    }

    #navbar ul {
    font-size: 16px;
    height: 100%;
    }

    #navbar ul div {
        margin-top: -10px;
    }

}

@media screen and (max-width: 520px) {
    #navbar {
        height: 80px;
        
    }
    
    #navbar .nav_numbers {
        font-size: 8px;
        text-align: right;
        margin-bottom: -6px;
        margin-right: -6px;
    }

    #navbar ul {
    font-size: 12px;
    height: 100%;
    }

    #navbar ul div {
        margin-top: -10px;
    }

    

}

#navbar ul {
    display: flex;
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    align-items: center;
}



#nav_element_2, #nav_element_3 {
    margin-left: 40px;
}

#navbar ul div li a {
    color: var(--White);
    text-decoration: none;
}
#navbar ul div li a:hover {
    transition-duration: 0.2s;
    color: var(--LightGreen);
}

.sticky {
    position: fixed;
    top: 110;
    left: 0;
    width: 100vw;
    background: rgba(51, 51, 51, 0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/** ------------------------------------------------ About me ------------------------------------------------ **/

#about_me {
    margin-top: 100px;
}



#about_me #section_1 #photo img{
    margin-top: 30px;
}

@media screen and (min-width: 1301px) {
    #about_me h2 {
        font-size: 42px;
        max-width: fit-content;
        margin-top: 160px;
        text-align: center;
    }

    #about_me #section_1 {
        display: flex;
        align-items: center;

    }

    #about_me #section_1 #photo{
        width: 40vw;
    }
    
    
    #about_me {
        width: 60vw; 
        margin-left: 20vw;
    }
}

@media screen and (max-width: 1300px) {

    #about_me h2 {
        font-size: 42px;
        margin-top: 160px;
        text-align: center;
    }
    #about_me #section_1 {
        margin-left: 5vw;
        text-align: center;
    }
    #about_me #section_1 #photo img{
        width: 350px;
    }
}

/* Competence */

@media screen and (min-width: 1301px) {
    #about_me #competences h3 {
        font-size: 38px;
        margin-left: 3vw;
        font-weight: 500;
    }
    
    #about_me #competences #competences_list .comp {
        background-color: var(--DarkGreen);
        font-size: 26px;
        width: fit-content;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 30px;
        margin: 0; 
    }

    #about_me #competences #competences_list {
        display: flex;
        flex-flow: row wrap;
        gap: 28px 34px;
    }




    #about_me #section_1 #competences{
        width: 40vw;
    }

}

@media screen and (max-width: 1300px) {
    #about_me #competences h3 {
        font-size: 38px;
        text-align: center;
        font-weight: 500;
    }

    #about_me #competences #competences_list .comp {
        background-color: var(--DarkGreen);
        font-size: 26px;
        width: fit-content;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 30px;
        margin: 0; 
    }

    #about_me #competences #competences_list {
        display: flex;
        flex-flow: row wrap;
        gap: 28px 34px;
    }

}




/**/


@media screen and (min-width: 1301px) {
    #about_me #section_2 {
        margin-top: 50px;
        display: flex;
        align-items: center;
    }

    #about_me #section_2 #presentation {
        width: 31vw;
    }
    
    
    
    #about_me #section_2 #button {
        width: 29vw;
        display: flex;
        justify-content: center;
    }

}

@media screen and (max-width: 1300px) {
    #about_me #section_2 {
        margin-top: 80px;
        width: 90vw;
        margin-left:5vw;
    }

    #about_me #section_2 #button {
        margin-top: 80px;
        display: flex;
        justify-content: center;
    }
}




#about_me #section_2 p {
    text-align: justify;
}

#about_me #section_2 button {
    border-style: none;
    background-color: var(--Brown);
    border-radius: 30px;
    border-style: none;

    margin-left: auto;
    margin-right: auto;
    
    font-size: 26px;
    color: var(--White);
    padding-top: 26px;
    padding-bottom: 26px;

    padding-left: 24px;
    padding-right: 24px;
}

#about_me #section_2 button:hover {
    background-color: var(--DarkGreen);
    transition-duration: 0.2s;
    cursor: pointer;
}






/** ----------------------------------- PROJECTS ------------------------------------- **/


#projects h2 {
    font-size: 42px;
    max-width: fit-content;
    margin-top: 160px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
}

#projects #nav_projects .nav_element .active {
    color: var(--Brown);
}


#projects #nav_projects .nav_element button:hover {
    transition-duration: 0.2s;
    color: var(--Brown);
    cursor: pointer;
}

@media screen and (min-width: 1081px) {
    #projects {
        width: 60vw;
        margin-left: 20vw;
    }
    
    #projects #nav_projects .nav_element button {
        margin-top: 0;
        margin-bottom: 0;
        border-style: none;
        background-color: transparent;
        color: var(--White);
        font-family: 'Poppins', Arial, sans-serif;
        font-size: 30px;
        
    }

    #projects #nav_projects #filter {
        margin-left: 3vw;
        margin-right: 18px;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 30px;
    }

    #projects #nav_projects .nav_element{
        display: flex;
        font-size: 30px;
    }


    #projects #nav_projects div{
        margin-top: -6px;
    }



    #projects #nav_projects .nav_element .separation {
        margin-top: auto;
        margin-bottom: auto;
        text-align: right;
        margin-right: 18px;
        margin-left: 18px;
    }

    #projects #nav_projects .nav_numbers {
        font-size: 16px;
        margin-top: auto;
        margin-bottom: auto;
        margin-bottom: 0;
        margin-right: 0;
        text-align: right;
        margin-bottom: -10px;
        margin-right: 48px;
    }

    #projects #nav_projects div {
        margin-top: -12px;
    }

}

@media screen and (max-width: 1080px) {
    #projects #nav_projects .nav_element button {
        margin-top: 0;
        margin-bottom: 0;
        border-style: none;
        background-color: transparent;
        color: var(--White);
        font-family: 'Poppins', Arial, sans-serif;
        font-size: 16px;
        width: auto; /* Ajuste la taille au texte */
        min-width: unset; /* Empêche une taille minimale imposée */
        padding: 5px 10px; /* Garde un peu d'espace autour du texte */
        display: inline-block; /* Assure un bon dimensionnement */
        text-align: center; /* Centre le texte à l’intérieur */
        white-space: nowrap; /* Empêche le texte de se casser */
    }

    #projects #nav_projects #filter {
        margin-left: 3vw;
        margin-right: 18px;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 16px;
        width: auto; /* Ajuste la taille au texte */
        min-width: unset; /* Empêche une taille minimale imposée */
        padding: 5px 10px; /* Garde un peu d'espace autour du texte */
        display: inline-block; /* Assure un bon dimensionnement */
        text-align: center; /* Centre le texte à l’intérieur */
        white-space: nowrap; /* Empêche le texte de se casser */
    }



    #projects #nav_projects .nav_element{
        display: flex;
        font-size: 16px;
        width: fit-content;

    }

    #projects #nav_projects .nav_element .separation {
        margin-top: auto;
        margin-bottom: auto;
        text-align: right;
        margin-right: 8px;
        margin-left: 8px;
    }

    #projects #nav_projects .nav_numbers {
        font-size: 10px;
        margin-top: auto;
        margin-bottom: auto;
        margin-bottom: 0;
        margin-right: 0;
        text-align: right;
        margin-bottom: -6px;
        margin-right: 48px;
    }
    #projects #nav_projects div {
        margin-top: -8px;
    }
}




#projects #nav_projects {
    display: flex;
    justify-content: center;
}


@media screen and (min-width: 1080px) {
    #projects #items-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #projects #items-container .item{
        width: 28vw;
        height: 28vw;
    }
}

@media screen and (max-width: 1080px) {
    
    #projects #items-container .item{
        width: 90vw;
        height: 90vw;
        margin-left: 5vw;
    }
}

#projects #items-container .item{
    background-color: var(--DarkGreen);
    border-radius: 50px;
    margin-top: 50px;
}

#projects #items-container .item.hidden {
    display: none;
  }

#projects #items-container .item img{
    width: 100%;
    border-radius: 45px 45px 0 0;
    height: 70%;
    object-fit: cover
}

#projects #items-container .item p {
    margin: 0;
}


#projects #items-container .item .title{
    margin-left: 8%;
    margin-top: 6%;
    font-size: 28px;
    font-weight: 600;
}

#projects #items-container .item .desc{
    margin-left: 8%;
    font-size: 18px;
    margin-top: 3%;
}

#projects #items-container .item:hover {
    transition-duration: 0.2s;
    background-color: var(--Brown);
    cursor: pointer;
}

#projects #items-container a {
    
text-decoration: none;
}

#projects #items-container .item {
    color: var(--White);
    text-decoration: none;
}



#projects #nav_projects .hidden {
    position: absolute;
    left: -5000;
}

/** ------------------------------------ FOOTER  ------------------------------------ **/

footer {
    background-color: var(--Brown);
    height: auto;
    margin-top: 100px;
    padding-top: 50px;
}


@media screen and (min-width: 1080px) {
    footer #container {
        display: flex;
    }

    
    footer #container #notes p{
        margin-top: -50px;
    }
    
    footer #container div {
        width: 34vw;
    }

    footer h3 {
        font-size: 42px;
        margin-left: 13vw;
    }

}

@media screen and (max-width: 1081px) {
    footer #container #contact a, footer #container #contact p{
        font-size: 20px;
    }
    footer #container #notes p{
        margin-top: 50px;
    }

    footer #container #notes p{
        font-size: 16px;
    }

    footer h3 {
        font-size: 36px;
        text-align: center;
    }
}





footer #container {
    width: 80vw;
    margin-left: 10vw;

}

footer #container div {
    margin-left: 2vw;
    margin-right: 2vw;
    font-size: 24px;
}

footer #container #contact a {
    color: var(--White);
    text-decoration: none;
}

footer #container #contact a:hover {
    color: var(--LightGreen);
    transition-duration: 0.2s;
}

footer #copyright {
    margin-top: 50px;
    text-align: center;
    color: var(--DarBrown);
}

footer #copyright a{
    text-decoration: none;
    color: var(--LightGreen);
}