/* Mise en place des fonts */

@font-face {font-family: 'Monument Extended Regular'; src: url('../fonts/MonumentExtended-Regular.otf') format('opentype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'Monument Extended Ultrabold'; src: url('../fonts/MonumentExtended-Ultrabold.otf') format('opentype'); font-weight: bold; font-style: normal;}
@font-face {font-family: 'Stretch Pro'; src: url('../fonts/StretchPro.otf') format('opentype');font-weight: bold; font-style: normal}
@font-face {font-family: 'Calcio'; src: url('../fonts/Calcio-Demo.ttf') format('truetype'); font-style: normal}
@font-face {font-family: 'Nohemi'; src: url('../fonts/Nohemi-ExtraBold.ttf') format('truetype'); font-style: normal}
@font-face {font-family: 'RedSky'; src: url('../fonts/RedSky.otf') format('truetype'); font-style: normal}
@font-face {font-family: 'Montserrat Bold'; src: url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-style: normal}
@font-face {font-family: 'Montserrat Regular'; src: url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-style: normal}
@font-face {font-family: 'Blackhawk'; src: url('../fonts/BLACKHAWK.ttf') format('truetype'); font-style: normal}
@font-face {font-family: 'CrackOver'; src: url('../fonts/CrackOver.otf') format('truetype'); font-style: normal}
@font-face {font-family: 'Humane'; src: url('../fonts/Humane-Bold.ttf') format('truetype'); font-style: normal}


html {
  scroll-behavior: smooth;
}


h1 {font-family: 'Stretch Pro'}
h2 {font-family: 'Monument Extended Regular';}
h3 {font-family: 'Nohemi'; }
nav {
    .head_menu {display: flex; gap: 20px; justify-content: center; padding: 20px;}
    a:hover{color: rgb(255, 0, 76);}
}

a {text-decoration: none; color: white; font-family: 'Monument Extended Ultrabold'; font-size: 3vh;}

body {
    background-color: rgb(0, 11, 27); 
    margin-left: 0%;
    margin-right: 0%;
}

header {
    background-image: url(../source/portfolio_banner_2.jpg);
    background-size: cover;
    background-position: top;
    position: relative;
    height: 100vh;
    width: 100%;
    p {color: white; margin: 0; font-family: 'Monument Extended Regular'; font-style: italic; font-size: 25px;}
    .banner {display: flex; flex-direction: column; justify-content: center; gap: 200px; align-items: center;}
    .title{display: flex; flex-direction: column; justify-content: center; position: relative; top: 25vh; text-align: center;}
}


.skills_band {
    background-color: rgb(0, 11, 27); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin: 20px;
}
.global-section{
    background-image: url(../source/wide-bg-banner.jpg);
    background-size: cover;
    background-position: top;
    width: 100%;
}

.intro_section{
    display: flex;
    display: inline-block;
    position: relative;
    margin-top: 20vh;
    background-color: rgb(0, 6, 22);
    border-radius: 5vh;
    flex-direction: row;
    align-items: center;
    margin: auto;
    gap: 5vh;
    padding: 5vh;
    margin: 10vh;
    p {color: rgb(116, 116, 116); font-family: 'Montserrat Regular'; font-size: 2vh; margin: 0%}
    h2 {color: white; margin: 0; font-family: 'Humane'; font-size: 100px}
    .intro_image {img{border-radius: 100vh; height: 25vh;}}
    button{background-color: white; border-radius: 100px; font-family: 'Monument Extended Ultrabold'; border: none; padding: 1vh; width: fit-content; cursor: pointer;}
}

.intro_text{display: flex; flex-direction: column; gap: 2vh;}
.summary{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2vh;
    padding: 10vh;
    p {color: rgb(255, 0, 247); font-family: 'Blackhawk'; font-size: 7vh; margin: 0%; text-align: center; font-style: italic; position: relative; z-index: 1; top: -200px}
    h2 {color: white; margin: 0; font-family: 'Humane'; font-size: 300px; text-align: center; z-index: 0; position: relative; margin-top: auto; margin-bottom: auto;}
}

.summary-elements {
    display: flex;
    a{color: rgb(211, 165, 255); font-family: 'Monument Extended Regular';}
    a:hover{color: white; cursor: pointer;}
    flex-direction: column;
    gap: 4vh;
}

.summary-title {
    align-items: center;
    padding-top: 120px;
}




.front_projects {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10vh;
    width: 100%;
    border-radius: 50px 50px 0px 0px;
    .title {display: flex; flex-direction: column; align-items: center;}
    p {color: rgb(0, 174, 255); font-family: 'CrackOver'; font-size: 60px; margin: 0; z-index: 1;}
    h2 {color: white; margin: 0; font-family: 'Nohemi'; font-size: 60px; position: relative; top: 50px;}
}    
    .projects {
        display: flex; justify-content: center; gap: 5vh;
        .file_box1 {
            background-image: url(../source/project_bg_resume.png);
            background-size: cover;
            background-position: center;
            border: 4px rgb(0, 11, 27) solid;
            border-radius: 25px;
            height: 300px;
            width: 300px;
            transition: transform 0.2s;
        }
        .file_box1:hover{transform: scale(1.1)}
        .file_box2:hover{transform: scale(1.1)}

        .project_name {
            font-family: 'Montserrat Bold';
            color: white;
            position: relative;
            z-index: 1;
            margin: 5px;
            bottom: 110px;
            left: 5px;
            font-size: 14px;
        }
        .language_name {
            font-family: 'Montserrat Regular';
            color: rgb(170, 170, 170);
            position: relative;
            z-index: 1;
            margin: 5px;
            bottom: 110px;
            left: 5px;
            font-size: 14px;
        }
        .description {
            font-family: 'Montserrat Regular';
            color: rgb(170, 170, 170);
            position: relative;
            z-index: 1;
            padding-top: 20px;
            padding-right: 10px;
            bottom: 110px;
            left: 15px;
            font-size: 12px;
        }
        .github_button {
            align-items: center;
            margin-left: 20px;
            position: relative;
            z-index: 1;
            display: flex;
            padding: 0.2vh;
            height: 20px;
            width: fit-content;
            border-radius: 20px;
            gap: 8px;
            bottom: 90px;
            background-color: rgb(0, 52, 83);
            .discover_project {color: white; font-family: 'Monument Extended Regular'; font-size: 10px; padding-right: 10px; margin: 0px;}
            .github_icon {height: 14px; padding-left: 10px;  vertical-align: middle;}

        }
        .github_button:hover {
            background-color: white;
            .discover_project{color: black;}
            cursor: pointer;
            .github_icon{content: url(../icons/github-icon-black.png); cursor: pointer;}
        }
        .file_box2 {
        background-image: url(../source/humatch-site.png);
        background-size: cover;
        background-position: center;
        border: 4px rgb(0, 11, 27) solid;
        border-radius: 25px;
        height: 300px;
        width: 300px;
        transition: transform 0.2s;
        }
        
}

.file_box2 {background-image: url(/source/design-card-01.jpg);}

.file_box3 {background-image: url(/source/design-card-02.jpg);}

.back_projects {
    margin-top: 15vh;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10vh;
    width: 100%;
    border-radius: 50px 50px 0px 0px;
    .title {display: flex; flex-direction: column; align-items: center;}
    p {color: rgb(0, 218, 207); font-family: 'CrackOver'; font-size: 60px; margin: 0; z-index: 1;}
    h2 {color: white; margin: 0; font-family: 'Nohemi'; font-size: 60px; position: relative; top: 50px;}
}    

.terminal-window {
    height: 250px;
    width: 300px;
    padding: 2vh;
    background-color: rgb(0, 11, 27);
    border: 4px rgb(0, 11, 27) solid;
    border-radius: 25px;
    transition: transform 0.2s;
    p{color: white; font-family: 'Monument Extended Regular'; font-size: 1.3vh; margin-left: 5vh;}
    .terminal-head{display: flex; flex-direction: row; gap: 0.5vh; margin: 0.5vh; a{font-size: 1.5vh; margin-left: 2vh;}}
    .code{p{font-family: 'Courier New', Courier, monospace; margin-left: 0.5vh; margin-top: 5vh;}}
}

.terminal-window:hover{transform: scale(1.05); cursor: pointer;}

.back_projects_windows{display: flex; flex-direction: row; gap: 5vh; justify-content: center;}



.graphic_design {margin: 20vh 40vh 0vh 40vh;}
.graphic_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: vh;
    p {color: rgb(0, 21, 39); font-family: 'Monument Extended Regular'; font-size: 2vh; margin: 0}
    h2 {color: white; margin: 0; font-family: 'Nohemi'; font-size: 60px;}
    
}
.gallery {
        display: flex; justify-content: center; gap: 5vh; margin-top: 5vh; padding: 0% 10% 0% 10%; flex-wrap: wrap;
        img {height: 300px; width: 230px; border-radius: 2vh; transition: transform 0.2s;}
        img:hover {transform: scale(1.05); cursor: pointer;}
    }



.gallery-img {
  width: calc(33.333% - 10px);
  height: 200px;
  object-fit: cover;
  cursor: pointer; /* Curseur "main" au survol */
  transition: transform 0.3s; /* Animation au clic */
}

.gallery-img:hover {
  transform: scale(1.02); /* Légère mise en avant au survol */
}

/* Style de la modal */
.modal {
  display: none; /* Cachée par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fond noir transparent */
  z-index: 1000; /* Au-dessus de tout */
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* Conserve les proportions */
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

.logos_design {
    margin-top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: vh;
    p {color: rgb(0, 26, 45); font-family: 'Monument Extended Regular'; font-size: 2vh; margin: 0; text-align: center;}
    h2 {color: rgb(0, 21, 39); margin: 0; font-family: 'Stretch Pro'; font-size: 60px; font-style: italic;}
    
}

.logos_images {
    display: flex; justify-content: center; gap: 5vh; margin-top: 10vh; padding: 0% 10% 0% 10%; flex-wrap: wrap;
    img {height: 100px; width: auto; border-radius: 2vh; transition: transform 0.2s;}
    img:hover {transform: scale(1.05)}
}

.websites-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vh;
    margin-top: 30vh;
    p {color: rgb(0, 26, 45); font-family: 'Monument Extended Regular'; font-size: 2vh; margin: 0; text-align: center;}
    h2 {color: rgb(0, 26, 45); margin: 0; font-family: 'Stretch Pro'; font-size: 60px; font-style: italic;}
    a{height: 200px; width: 300px; background-color: blue; position: relative; bottom: 0;}
}

.screens{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 1200px;
    gap: 2vh;
    margin-top: 100vh;
    padding-left: 5vh;
    padding-right: 5vh;
    a{background-color: red; opacity: 0%;}
}
.mobile-buttons{
    display: none;
}
/* Tablette */
@media (max-width: 768px) {

    header{
        height: 40vh;
    }
    .intro_section {
        flex-direction: row;
        h2 {font-size: 80px}
        margin: 2vh;
        align-items: center;
        padding: 3vh;
        border-radius: 2vh;
    }

    .summary {
        flex-direction: column;
        text-align: center;
        justify-content: space-between;
        h2 {font-size: 150px}
        p {font-size: 30px;}
        a{font-size: 25px !important;}
        gap: 2vh;
        padding: 2vh;
    }

    .projects {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .back_projects_windows {
        flex-direction: column;
        gap: 3vh;
        align-items: center;
        transform: scale(0.5);
        position: relative;
        top: -450px;
    }

    .terminal-window {
        width: 450px;
        height: 500px;
    }
    .graphic_design{position: relative; top: -700px; margin: 0; h2{color: black; font-size: 40px; text-align: center}; p{text-align: center; font-size: 15px;}}
    .gallery img {
        height: 200px;
        width: 150px;
    }
    .gallery {
        padding: 2vh;
    }
    .logos_design {position: relative; top: -500px;}
    .logos_title h2 {
        font-size: 40px;
        text-align: center;
    }
    .logos_images img {
        height: 100px;
    }

    .screens {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }

    .websites-title{
        position: relative; top: -300px;
        h2 {font-size: 40px; text-align: center;}
        p{font-size: 15px;}
        gap: 1vh;
    }
    .mobile-buttons{
        display: flex;
        flex-direction: column;
        gap: 10vh;
        position: relative;
        top: -80vh;
        align-items: center;
        a{
            background-color: white; 
            border-radius: 100px; 
            font-family: 'Monument Extended Ultrabold'; 
            border: none; 
            padding: 1vh; 
            width: fit-content; 
            cursor: pointer;
            font-size: 16px;
            color: black;
        }
    }
}