/**
les quatres couleurs de mon projet
noir #030303
vert du moins clair au plus clair: 
#204d19
#299c22
#1df321
**/

/* Animation de la disparition */
@keyframes disparition {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes apparition {
    0% {
        transform: translateX(-100%);
        /* Glissement depuis la gauche */
        opacity: 0;
    }

    60% {
        transform: translateX(20px);
        /* Légère avancée vers la droite */

    }

    80% {
        transform: translateX(-10px);
        /* Rebond vers la gauche */

    }

    100% {
        transform: translateX(0);
        /* Position finale */
        opacity: 1;
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes reactRotation {
    0% {
        transform: rotate(0turn);
    }

    20% {
        transform: rotate(0.2turn);
    }

    40% {
        transform: rotate(0.4turn);
    }

    60% {
        transform: rotate(0.6turn);
    }

    80% {
        transform: rotate(0.8turn);
    }

    100% {
        transform: rotate(1turn);
    }
}

/*class pour les animations d'apparitions et disparitions*/
.disparition {

    animation: disparition 0.5s forwards;

}

.apparition {
    animation: apparition 0.5s forwards;
}

/*code générique*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SUSE', sans-serif;
    line-height: 1.6;
    background: linear-gradient(135deg, #ffffff, #e6f2e6, #cce6cc, #99cc99, #66b266, #299c22);
    background-size: 400% 400%;
    animation: gradientAnimation 20s ease infinite;
    color: #6A0DAD;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {

    padding: 40px 0;
    display: flex;
    justify-content: center;
    width: 100%;

    margin-bottom: 15px;
    height: 150px;
}

nav {
    background: #299c221A;
    backdrop-filter: blur(10px);
    color: white;
    padding: 10px 20px;
    border: none;
    font-size: 1.2em;
    border-radius: 40px;
    /* opacity: 0.5; */
    position: fixed;
    display: flex;
    width: 700px;
    justify-content: center;
    z-index: 7;
}

.all {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* gap: 65px; */
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin: 0 15px;
    padding: 10px;
}

nav ul li:hover {
    transition: 0.5s;
    background: white;
    border-radius: 20px;
    padding: 5px;
}

nav ul li a {
    text-decoration: none;
    transition: 1.5s;
    color: #6A0DAD
}



main {
    text-align: center;
    margin-bottom: 25px;
    border-radius: 20px;
    background: #ffffff66;
    backdrop-filter: blur(10px);
    width: 90%;
}

#hero {
    padding: 60px 20px;
    display: flex;
    justify-content: space-around;
}

.info-perso {
    display: flex;
    flex-direction: column;
    /* justify-content: start; */
    max-width: 60%;
}

.info-perso div {
    display: flex;
    justify-content: left;
    flex-direction: column;
}

.info-perso div p {
    margin-bottom: 10px;
}

/* liens intêressants*/
#liens-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15%;
}

.telecharger-cv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.telecharger-cv a {
    text-decoration: none;
    color: #266e1e;
    display: flex;
    align-items: center;
    gap: 3px;
}

.icone-telechargement {
    width: 20px;
    height: 20px;
}

#a-mon-propos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#a-mon-propos a {
    text-decoration: none;
    color: #266e1e;
    display: flex;
    align-items: center;
    gap: 3px;
}

#hero h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

/*section technologie*/
.technologie {
    margin-top: 4.5%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.technologie h1 {
    font-size: 3em;
}

#logo {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    border-radius: 20px;
    background: #ffffff66;
    backdrop-filter: blur(10px);
    width: 90%;
}

.logo-haut {
    gap: 12%;
    display: flex;
    padding-left: 30px;
    flex-wrap: wrap;
}

.logo-haut div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.react {
    animation: reactRotation 10s linear infinite;

}

.logo-bas {
    display: flex;
    gap: 7%;
    align-items: center;
    justify-content: center;
    margin-top: 3%;
}

.logo-bas div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#logo img {
    width: 70px;
    height: 70px;
}

/*ma photo*/
.photo {
    background: linear-gradient(135deg, #299c22, #288420, #266e1e, #22581b, #1e4318, #182f14, #121c0e, #030303);
    border-radius: 100px 15px;
    display: flex;
    transform: rotateY(0deg);
    transition: 2.5s;
    height: 250px;
    width: 250px;
}

.photo.easterEgg:hover {
    border-radius: 100px 100px;
    transform: rotateY(180deg);
    transition: 1s;
    background-image: url("../assets/as.jpg");
    background-size: cover;
}

.photo img {
    border-radius: 100px;
    height: 250px;
    width: 250px;
    opacity: 1;
    transition: opacity 1s;
}

.photo.easterEgg:hover img {
    opacity: 0;
    /* L'image disparaît au survol */
    transition: opacity 1.5s;
    /* Douce transition pour la disparition */
}

/*a propos*/
#a-propos {
    width: 90%;
    margin-top: 80px;
    display: none;
    flex-direction: column;
    align-items: center;
    opacity: 0;
}

#a-propos h1 {
    font-size: 3em;
}

.a-propos-de-moi {
    border-radius: 20px;
    background: #ffffff66;
    backdrop-filter: blur(10px);
    width: 100%;
    /* height: 350px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.description {
    background-color: white;
    border-radius: 60px;
    display: flex;
    flex-direction: column;
    width: 95%;
    margin-top: 25px;
    margin-bottom: 25px;
}

.description div {
    margin: 25px;
}

/*travaux*/
#travaux {
    width: 90%;
    margin-top: 80px;
    display: none;
    flex-direction: column;
    align-items: center;
    opacity: 0;
}

#travaux h1 {
    font-size: 3em;
}

.ensemble-de-travaux {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.travaux-block {
    border-radius: 20px;
    background: #ffffff66;
    backdrop-filter: blur(10px);
    width: 90%;
    height: 350px;
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
}

.travaux-liste {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    width: 90%;
}

.projet {
    width: 250px;
    height: 260px;
    border-radius: 80px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.5;
}

.projet strong {
    font-size: 2em;
}


.centre-décoration {
    opacity: 1;
    z-index: 2;
    width: 500px;
    /*transition: 0.5s ease;*/
}

.centre-décoration.booki:hover {
    transform: rotateY(180deg);
    background: url("../assets/booki2.png");
    background-repeat: no-repeat;
    background-position: center;
}

.centre-décoration.booki:hover strong {
    opacity: 0;
}

.centre-décoration.bluel:hover {
    transform: rotateY(180deg);
    background: url("../assets/sophie-bluel.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.centre-décoration.bluel:hover strong {
    opacity: 0;
}

.centre-décoration.wereadbook:hover {
    transform: rotateY(180deg);
    background: url("../assets/wereadbookBlack2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.centre-décoration.wereadbook:hover strong {
    opacity: 0;
}

/*a propos*/
#mes-reseaux {
    display: none;
    width: 90%;
    margin-top: 80px;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    opacity: 0;
}

#mes-reseaux h1 {
    font-size: 3em;
    margin-bottom: 30px;
}

.reseaux {
    width: 100%;
    height: 350px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-around;
}

.github,
.linkdin,
.twitter,
.upwork {
    width: 100%;
    height: 70%;
    background: #a680b5;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100px;
    background-position-x: center;
    background-position-y: center;
}

.github {
    background-image: url("../assets/icons8-github-100.png");
}

.linkdin {
    background-image: url("../assets/icons8-linkedin-144.png");
}

.twitter {
    background-image: url("../assets/icons8-twitter-100.png");
}

.upwork {
    background-image: url("../assets/icons8-upwork-a-global-freelancing-platform-where-professionals-connect-and-collaborate-remotely-96.png");
}

.twitter:hover,
.linkdin:hover,
.github:hover,
.upwork:hover {
    background: #a680b5;
    backdrop-filter: blur(10px);
    border: none;
    position: relative;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: 100px;
    background-position-x: center;
    background-position-y: center;
}

.github:hover {
    background-image: url("../assets/icons8-github-100.png");
}

.linkdin:hover {
    background-image: url("../assets/icons8-linkedin-144.png");
}

.twitter:hover {
    background-image: url("../assets/icons8-twitter-100.png");
}

.upwork:hover {
    background-image: url("../assets/icons8-upwork-a-global-freelancing-platform-where-professionals-connect-and-collaborate-remotely-96.png");
}

.twitter:hover a,
.linkdin:hover a,
.github:hover a,
.upwork:hover a {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #299c221A;
    backdrop-filter: blur(5px);
    border-radius: 20px;
}

.github a,
.linkdin a,
.twitter a,
.upwork a {
    display: none;
}


.github a div,
.linkdin a div,
.twitter a div,
.upwork a div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.github a div strong,
.linkdin a div strong,
.twitter a div strong,
.upwork a div strong {
    position: absolute;
    display: flex;
    transition: 1s;
    top: 45%;
    font-size: 2em;
    z-index: 1;
    font-size: 2em;
}

/*contact*/

#contact {
    width: 100%;
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* height: 550px; */
    margin-top: 55px;
    opacity: 0;
}

#contact h1 {
    font-size: 3em;
}

#contact form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 75%;
}

#contact form div {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
}

#contact form div label {
    font-size: 1.5em;
}

.input-email,
.input-objet {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 20px;
    width: 75%;
    min-width: 177.87px;
    height: 75px;
}

.input-message {
    padding: 10px 20px;
    border: none;
    font-size: 1.2em;
    border-radius: 20px;
    width: 100%;
    height: 300px;
    min-width: 177.87px;
}


#button-envoyer {
    background-color: #299c22;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 20px;
    width: 25%;
    min-width: 177.87px;
}

/*footer*/
footer {
    text-align: center;
    padding: 10px 0;
    margin-top: 50px;
}

footer a {
    color: #007BFF;
    text-decoration: none;
    margin: 0 5px;
}

/** pour les écrans de moins de 1024 px **/
@media (max-width : 1024px) and (min-width:769px) {

    /*section technologies*/
    .technologie {
        margin-top: 30px;
    }

    #logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .logo-haut {
        gap: 75px;
        display: flex;
        padding-left: 0px;
        flex-wrap: wrap;
    }

    /*section à propos de moi*/
    .a-propos-de-moi {
        width: 100%;
    }

    /*section travaux*/
    #travaux {
        margin-top: 50px;
    }

    .centre-décoration {
        width: 250px;
    }

    /*mes reseaux*/

    .reseau {
        gap: 50px;
    }

    /*contact*/
    #contact {
        margin-top: 0px;
    }
}

@media (max-width : 768px) and (min-width: 426px) {

    /*hero*/
    .photo {
        margin-left: 25px;
    }

    /*section technologie*/
    .logo-haut {
        gap: 40px;
    }

    .logo-bas {
        gap: 10%;
    }

    /*section travaux*/
    .projet {
        width: 150px;
    }

    .projet strong {
        font-size: 20px;
    }

    .centre-décoration {
        width: 150px;
    }

    /* section reseau*/
    .reseaux {
        gap: 15px;
    }
}

@media (max-width : 426px) and (min-width : 0px) {

    /*body*/
    body {
        background-color: #299c22;
    }

    /*barre de navigation*/
    nav {
        background: #299c221A;
        backdrop-filter: blur(10px);
        color: white;
        padding: 10px 20px;
        border-radius: 40px;
        position: fixed;
        z-index: 7;
        width: 90%;
    }

    .all {
        width: 90%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 15%;
    }

    .all div {
        display: flex;
        flex-direction: column;
    }

    nav ul li {
        display: inline;
        margin: 0px;
        padding: 5px;
    }

    nav ul li a {
        text-decoration: none;
        transition: 1.5s;
        font-size: 20px;
    }

    /*hero*/
    #hero {
        padding: 60px 20px;
        display: flex;
        justify-content: space-around;
        flex-direction: column-reverse;
        align-items: center;
    }

    #hero h2 {
        font-size: 2em;
    }

    #hero h1 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    #liens-info {

        flex-direction: column-reverse;
        gap: 30px;
        width: 200px;
        margin-top: 15px;
    }

    /*technologies*/
    .logo-haut {
        gap: 12%;
        padding-left: 45px;
    }

    .logo-bas {
        display: flex;
        gap: 10%;
        flex-wrap: wrap;
    }

    /*travaux*/
    .ensemble-de-travaux {
        flex-direction: column;
    }

    #right-button {
        transform: rotate(90deg);
    }

    #left-button {
        transform: rotate(90deg);
    }

    .travaux-block {
        height: 550px;
        align-items: center;
    }

    .travaux-liste {
        flex-direction: column;
        height: 90%;
    }

    .centre-décoration {
        width: 100%;
    }

    /*mes reseaux*/
    #mes-reseaux {
        height: 610px;
    }

    .reseaux {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 376px) {

    /*body*/
    body {
        background-color: #299c22;
    }

    /*nav barre*/

    .all {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 65px;
    }

    /*technologies*/
    .logo-haut {
        padding-left: 27px;
    }

    .logo-bas {
        gap: 12%;
    }
}


@media (max-width :320px) and (min-width:1px) {

    /*body*/
    body {
        background-color: #299c22;
    }

    /*nav barre*/

    .all {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 45px;
    }

    /*hero*/
    #liens-info {
        width: auto;
    }

    /*technologies*/

    #logo {
        align-items: center;

    }

    .logo-haut {
        padding-left: 55px;
    }

    .logo-bas {
        max-width: 250px;
    }


    /*à propos*/
    #qui-suis-je {
        font-size: 2em !important;
    }
}