/* POUR TOUS */
*{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif; /* le font */
    user-select: none;
}


/* BODY */

body {
    background-color: rgb(9, 6, 59);
    animation: body-couleur 55s infinite;
}
@keyframes body-couleur {
    0% {
        background-color: rgba(9, 6, 59, 1);
    }
    25% {
        background-color: rgba(15, 5, 107, 1);
    }
    50% {
        background-color: rgba(61, 13, 175, 1);
    }
    75% {
        background-color: rgba(15, 5, 107, 1);
    }
    100% {
        background-color: rgba(9, 6, 59, 1);
    }
}


/* LA BARRE DE NAVIGATION */

nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* background-color: white; /* temporaire */
    font-size: 18px;
    width: 100%;
    height: 100px;
}
nav a{
    margin: 0 10px;
    color: white;
    text-decoration: none; /* pas souligné */
}
nav a:hover {
    color: rgb(21, 150, 107);
}

/* LE GRAND DIV */

/* LE GROS TEXTE BONJOUR */

.grand_div {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.grand_div .img_bonjour {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.grand_div .img_bonjour .bonjour {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: white;
    font-size: 300px;
}


/* LE GRAND TEXTE BIENVENUE */

.grand_div .img_bonjour .logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 500px;
    height: 950px;
    /*clip-path: rect(0 55% 100% 0); /* coupe l'image en deux */
    opacity: 0.9;
    cursor:url(img/logo_curseur.cur), auto;
}
.grand_div .bienvenue {
    display: flex;
    flex-direction: row;
    justify-content: left;
    color: white;
    font-size: 50px;
}
.grand_div .projets_titre {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
    text-align: center;
    font-size: 75px;
    margin-top: 200px;
}


/* TOUS LES PROJETS AVEC LES IMAGES */

.projets {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.img_koj {
    display: flex;
    justify-content: right;
    margin-top: 50px;
    height: 500px;
}
.projets .ab_koj {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}
.projets .ab_koj .mini_titre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 35px;
    margin-top: 50px;
}
.projets p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
}
.projets a {
    color: beige;
    margin-top: 50px;
}

/* PROJET AVEC CARRES */

.projets1 {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.carre {
    display: flex;
    justify-content: right;
    margin-top: 50px;
    height: 800px;
}
.projets1 .carre_web {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 50%;
}
.projets1 .carre_web .mini_titre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 35px;
    margin-top: 50px;
}
.projets1 p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
}
.projets1 a {
    color: beige;
    margin-top: 50px;
}


/* LE PROJET CRACKEUR DE MOT DE PASSE */

.projets2 {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.image {
    display: flex;
    justify-content: right;
    margin-top: 50px;
    height: 800px;
}
.projets2 .mdp_web {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 50%;
}
.projets2 .mdp_web .mini_titre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 35px;
    margin-top: 50px;
}
.projets2 p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
}
.projets2 a {
    color: beige;
    margin-top: 50px;
}


/* PROJET UNITY */

.Unity {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.image {
    display: flex;
    justify-content: right;
    margin-top: 50px;
    height: 800px;
}
.Unity .unity_description {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 50%;
}
.Unity .unity_description .mini_titre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 35px;
    margin-top: 50px;
}
.Unity p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
}
.Unity a {
    color: beige;
    margin-top: 50px;
}


/* LE A PROPOS DE MOI */

.description {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 75px;
    margin-bottom: 100px;
}
.description .sous_titre {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
    font-size: 75px;
    margin-top: 200px;
}
.description .p_description {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
    font-size: 20px;
}

/* POUR MOBILE PLUS TARD */
#cache {
    display: none;
}

/* RESPONSIVE MOBILE 800PX */

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

    .grand_div .img_bonjour .bonjour {
        font-size: 100px;
    }

    .grand_div .img_bonjour .logo {
        height: 500px;
        width: 250px;
    }

    .projets .img_koj {
        height: 250px;
    }
    
    .projets .ab_koj .mini_titre {
        font-size: 25px;
    }

    .projets a {
        color: beige;
        margin-top: 50px;
    }

    .carre {
        height: 400px;
    }

    .projets1 .carre_web .mini_titre {
        font-size: 25px;
    }

    .projets2 .image {
        height: 400px;
    }

    .projets2 .mdp_web .mini_titre {
        font-size: 25px;
    }

    .image {
        height: 400px;
    }

    .Unity .unity_description .mini_titre {
        font-size: 25px;
    }

    .description .sous_titre {
        font-size: 45px;
    }

    .description .p_description {
        font-size: 15px;
    }
}

/* RESPONSIVE MOBILE 1000 PX

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

    .grand_div .img_bonjour .bonjour {
        font-size: 100px;
    }

    .grand_div .img_bonjour .logo {
        height: 500px;
        width: 250px;
    }

    .projets .img_koj {
        height: 250px;
    }
    
    .projets .ab_koj .mini_titre {
        font-size: 25px;
    }

    .projets a {
        color: beige;
        margin-top: 50px;
    }

    .carre {
        height: 400px;
    }

    .projets1 .carre_web .mini_titre {
        font-size: 25px;
    }

    .projets2 .image {
        height: 400px;
    }

    .projets2 .mdp_web .mini_titre {
        font-size: 25px;
    }

    .image {
        height: 400px;
    }

    .Unity .unity_description .mini_titre {
        font-size: 25px;
    }

    .description .sous_titre {
        font-size: 45px;
    }

    .description .p_description {
        font-size: 15px;
    }
} */