:root {
    --main-black: #1E1E1E;
    --main-white : #FFFFFF;
    --main-grey : rgba(189, 195, 199,0.5);
    --main-red : #F4737D;
    --main-orange : #E99469;
    --second-orange:#DF763D;
    --main-blue : #9FCEFF;
    --project-width : 500px;
    --project-height : 300px;
}

body {
    margin: 0;
    color: var(--main-black);
    background-color: var(--main-white);
    overflow-x: hidden;
    font-family: "Montserrat", serif;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .skip:focus {
    z-index: 100;
    position: static;
    width: auto;
    height: auto;
  }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.reveal {
    opacity: 0;
}


.reveal-loaded .reveal [class*="reveal-"] {
    opacity: 0;
}

.reveal-loaded [class*="reveal"]{
    opacity: 1;
    transition: .3s ease-in-out;
    transform: translateY(0);
}

.reveal .left-transition {
    transform: translateX(-100px);
  }
.reveal .right-transition {
    transform: translateX(100px);
  }

/* On ajoute du délai */
.reveal-loaded .reveal-2 {
    transition-delay: .1s;
}

.reveal-loaded .reveal-3 {
    transition-delay: .2s;
}

.reveal-loaded .reveal-4 {
    transition-delay: .3s;
}

nav {
    z-index: 100;
    position: fixed;
    display: flex;
    justify-content: space-around;
    width: fit-content;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%,-50%);
    backdrop-filter: blur(10px) ;
    padding: 5px 10px;
    border-radius: 40px;
    border: var(--main-black) solid 1px;
    gap: 10px;
    flex-wrap: nowrap;
}
nav a {
    padding: 15px 25px;
    color: #1E1E1E;
    text-decoration: none;
    transition: background-color 0.5s ease;
    border-radius: 40px;
    font-weight: bold;
    text-wrap: nowrap;
}
nav a:hover {
    background-color: var(--main-grey);
   
}
header {
    height: 100vh;
}
.header-img{
    position: absolute;
    right: -60%;
    top: 50%;
    width: 80%;
    transform: translate(-50%,-50%);
}
.header-img img {
    width: 100%;
    transform: rotateY(3.142rad);
}

.header-title {
    font-size: 3rem;
    position: absolute;
    left: 35%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.header-title p {
    margin-top: 0px;
}
.header-title h1 {
    margin-bottom: 0px;
}

/* Les différentes Taches */

.tache {
    position: absolute;
    transform: translate(-50%,-50%);
    width: 50%;
}

/* Bleu */
.bleu {
    top: 0%;
    left: 0%;
}

/* .bleu2 {
    top: 150%;
} */

/* Jaune */
.jaune {
    top: 10%;
    left: 100%;
}

/* .jaune2 {
    top: 150%;
} */

/* Orange */
/* .orange {
    top: 150%;
} */

.orange2 {
    top: 90%;
    left: 5%;
}

/* Rouge */
.rouge {
    top: 90%;
    left: 90%;
}

/* .rouge2 {
    top: 150%;
} */

/* Vert */
.vert {
    top: 20%;
    left: 50%;
}

/* .vert2 {
    top: 150%;
} */


.who-i-am-bloc {
    min-height: 100vh;
    display: flex;
    align-items: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.link-tache {
    color: #1E1E1E;
    border: solid 2px #1E1E1E;
    border-radius: 16px;
    padding: 5px 15px;
    text-decoration: none;
}

.border {
        height: 300px;
        width: 100%;
        margin-top: 200px;
        
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center;
}

.rotate-180 {
    rotate: 180deg;
    margin: 0;
}

.border-red {
    background-image: url('images/border-red.png');
}
.border-orange {
    background-image: url('images/border-orange.png');
    height: 450px;
    margin: 0px;
}

.border-blue {
    background-image: url("images/border-blue.png");
}

.who-i-am-title {
    font-weight: bold;
    font-size: 5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 75vh;
    background-color:var(--main-red) ;
}
.who-i-am {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
   


}

.bulle {
    position: absolute;
    border-radius: 100%;

    border: solid white 8px;
    z-index: 100;
   
}


.image-of-me {
    max-width: 400px;
    max-height: 400px;
    overflow: hidden;

}
.image-of-me img {
    width: 100%;
}
.text-of-me {
    width: 50%;
    font-size: 1.5rem;
}

.skills {
    background-color: var(--main-orange);
    flex-direction: column;
}
.skills div {
    display: flex;
    gap: 16px;
}

.background-button a {
    display: block;
    border-radius: 16px;
    font-size: 1.5rem;
    padding: 15px 25px;
    border: none;
    background-color: var(--second-orange);
    color: var(--main-black);
    text-decoration: none;
    font-weight: 900;
    transition: 0.1s ease-in-out all;
    width: fit-content;
    height: fit-content;
}

.background-button a:hover {
    rotate: -5deg;

}

.background-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    width: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.creative-part {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
}

.tache-orange-3 {
    position: absolute;
    max-width: 300px;
    right: -10%;
    bottom: -15%;
    z-index: 100;
}

.tache-vert {
    position: absolute;
    width: 500px;
    top: -50%;
    right: 90%;
    z-index: -1;
}

.tache-rouge {
    position: absolute;
    right: -20%;
    bottom: -40%;
    z-index: -1;
    width: 800px;
}

.creative-bloc {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.creative-bloc-left {
    flex-direction: row-reverse;
}

.creative-bloc div:first-child {
    font-size: 1.5rem;
    width: 40%;
    margin-top: auto;
    margin-bottom: auto;
}

.creative-bloc div:last-child {
    width: 50%;
    height: 600px;
}

.creative-bloc a {
    color: var(--main-black);
    text-decoration: none;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 16px;
    background-color: var(--main-orange);
    transition: all 0.3s;
}

.creative-bloc a:hover {
    background-color: var(--second-orange);
}

.photoshop-tools {
    height: 500px;
    position: absolute;
    left: -8%;
    top: -5%;
    border-radius: 16px;
}

.photoshop-image {
    position: relative;
    height: fit-content;
    transform: translateY(-50%);
    top: 50%;
    max-width: 600px;
    border-radius: 16px;
    box-shadow: 1px 1px 30px #424242;
    z-index: -1;
    
    
}

.photoshop {
    position: relative;
    background-color: #1E1E1E;
    background-image: url(images/Affiche-Final-FIN.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    background-position: center ;
    box-shadow: 1px 1px 30px #1E1E1E; 
}

.photoshop-color {
    max-width: 250px;
    height: fit-content;
    position: absolute;
    right: -20%;
    top: -10%;
}

.photoshop-tache {
    position: absolute;
    top: 70%;
    right: 45%;
    max-width: 400px;
    height: fit-content;
}

.premiere-timeline {
    transform: translateY(70%);
    position: absolute;
    left: -20px;
    bottom: 0;
    max-width: 600px;
    width: 100%;
    border-radius: 16px;

}

.premiere-effect {
    position: absolute;
    max-width: 200px;
    left: -70px;
    top: -5%;
    border-radius: 16px;
}

.premiere-tool {
    position: absolute;
    height: 300px;
    right: -5%;
    top: 5%;
    border-radius: 16px;
}

.premiere .tache-bleu {
    position: absolute;
    height: 300px;
    bottom: -50%;
    right: -60%;
    transform: translate(-50%,-50%);
    z-index: -1;

}

.premiere {
    position: relative;
    background-color: #1E1E1E;
    background-image: url(images/premiere-image.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 16px;
    background-position: center ;
    box-shadow: 1px 1px 30px #1E1E1E; 
}

.ue5-image {
    width: 100%;
    border-radius: 16px;
}

.ue5-tool {
    max-width: 500px;
    position: absolute;
    top: -10px;
    right: 0;
}

.ue5-dock {
    transform: translateY(70%);
    max-width: 600px;
    position: absolute;
    width: 100%;
    right: 5%;
    bottom: 0;
    border-radius: 16px;
}
.ue5-file {
    position: absolute;
    max-width: 200px;
    width: 30%;
    border-radius: 16px;
    bottom: 50%;
    left: -10%;
}

.ue5 {
    position: relative;
    background-color: #1E1E1E;
    background-image: url(images/ue5-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    background-position: center ;
    box-shadow: 1px 1px 30px #1E1E1E;   
}
.background-white {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    background-position: center ; 
}

.background-white .tache-bleu {
    position: absolute;
    height: 300px;
    bottom: -50%;
    right: 60%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.background-white .tache-jaune {
    position: absolute;
    bottom: -50%;
    left: 120%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.background-white .tache-orange-3 {
    position: absolute;
    bottom: -50%;
    left: 200%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.Javascript {
    position: absolute;
    max-width: 250px;
    width: 40%;
    top: -5%;
    left: 0%;
}
.HTML5 {
    position: absolute;
    max-width: 250px;
    width: 40%;
    bottom: -10%;
    left: 30%;
}
.CSS3 {
    position: absolute;
    max-width: 200px;
    width: 40%;
    top: 20%;
    right: 5%;
}

.back-logo {
    position: absolute;
}

.phpmyadmin {
    bottom: 0%;
    left: 20%;
    max-width: 500px;
    width: 80%;
}

.php {
    top: 30%;
    left: 0%;
    max-width: 300px;
    width: 80%;
}

.mysql {
    top: 5%;
    right: 0%;
    max-width: 300px;
    width: 80%;
}

.tache-jaune {
    position: absolute;
    height: 500px;
    right: 70%;
    bottom: -20%;
    z-index: -1;
}

.my-project {
    background-color: var(--main-blue);
}



.resaweb {
    background-image: url(images/resaweb.png);
}

.berck {
    background-image: url(images/Affiche-Final-FIN.jpg);
}

.spotify {
    background-image: url(images/Spotify.png);
    
}

.dataviz {
    background-image: url(images/gameviz-award.png);
}

.me-part {
    position: relative;
    font-size: 1.125rem;
}

.tacheRouge2 {
    position: absolute;
    max-width: 800px;
    width: 40%;
    bottom: 25%;
    right: 50%;
    z-index: -1;
}

.tacheRouge {
    position: absolute;
    max-width: 500px;
    width: 40%;
    left: 0%;
    z-index: -1;
}
  .profil-list-card {
    margin-top: 100px;
    display: flex;
    justify-content: space-around;
  
  }
  
  .profil-card {
    width: 30%;
    background-color: #FBFBFB;
    border: #1E1E1E solid 5px;
    color: black;
    padding: 25px 25px;
    border-radius: 32px;
    height: fit-content;
  }
  
  .profil-card h3 {
    width: fit-content;
    padding: 5px 10px;
  }
  
  .profil-card img {
    border-radius: 8px;
    width: 100%;
    filter: grayscale(100%);
    transition: 0.5s ease-in-out;
  }
  
  .profil-card:hover img {
    filter: grayscale(0%);
  }

  /* FAQ */
.profil-presentation {
    width: 40%;
}

details {
    font-size: 1.125rem;
    width: 100%;
    border-bottom: var(--main-red) 3px solid;
    width: 180%;
  }
  summary {
    font-size: 1.5rem;
    padding: 15px 0;
    width: 100%;
  }
  
  summary::marker {
    content: none;
  }
  summary:after {
    content: "+";
    float: right;
    font-size: 1.5em;
    font-weight: bold;
    margin:-7px 0 0 15px;
    padding: 0;
    color: var(--main-red);
    text-align: center;
    width: 20px;
  }
  details[open] summary:after {
    content: "-";
  }
  details[open]{
    width: 100%;
    padding: 15px 0px;
  }
  details{
    width: 100%;
  }

.project-bloc:nth-child(odd) {
    flex-direction: row-reverse;
    .project-image {
        left: 40%;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    .project-text{

    }

  }

.project-bloc:nth-child(odd):hover {
    .project-image {
        left: 0%;
    }
}

  .project-bloc {
    margin-bottom: 200px;
    height: 70vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .project-bloc:hover {
    .project-image {
        right: 0%;
    }
  }

  .project-image {
    position: relative;
    right: 40%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    margin: 10px 0;
    transition: 0.5s all ease-in-out;
  }
  
  .project-image-link {
    display: block;
    height: 100%;
    width: 70%;
    position: relative;
}

.project-image-link:hover .project-image {
    right: 0%;
}

.project-text {
    font-size: 1.5rem;
width: 30%;
margin: 50px;
}

.project-text a {
    color: var(--main-black);
}

footer {
    margin-top: 0;
    background-color: var(--main-red);
    height: 40vh;
}
footer h2 {
    font-size: 3rem;
    margin-top: 0;
}
.footer {
    font-size: 1.5rem;
    padding: 20px;
    text-align: center;
    color: var(--main-black);
}
footer a {
    color: var(--main-black);
}

.list-footer {
    display: flex;
    justify-content: space-around;
    margin-top: -100px;
}
@media screen and (width <= 1000px) {
    .header-title{
        font-size: 2rem;
    }
    .tache-vert {
        top: -50%;
    }
    .tache-jaune {
        right: 80%;
    }

    .CSS3 {
        top: 50%;
        right: 40%;
    }
    .HTML5 {
        top: 100%;
        right: 40%;
    }
    .Javascript {
        top: 0%;
        left: 30%;
    }
    .who-i-am-title {
        font-size: 3rem;
    }
    .php {
        top: 50%;
    }
    .phpmyadmin {
        bottom: -20%;
    }
    .mysql {
        top: 0%;
    }
    .ue5-tool {
        width: 100%;
    }
}

@media screen and (width <=800px){
    .creative-bloc {
        flex-direction: column;
    }
    .profil-list-card {
        flex-direction: column;
    }

    .profil-card {
        width: 80%;
    }
    .profil-presentation {
        width: 100%;
    }
    .creative-bloc div:first-child {
        width: 100%;
    }
    .photoshop,
    .premiere,
    .ue5, .background-white{
        display: none;
    }
    .remove {
        display: none;
    }

    .skills div {
        flex-direction: column;

    }
    .project-header {
        flex-direction: column;
        justify-content: center;
    }
    .project-header .project-text {
        width: 90%;
        margin: 0;
    }
    .project-header .project-background {
        width: 90%;
        margin: 0;
    }
}