/*BASICS*/
@font-face {
  font-family: 'Expose';
  src: url('../fonts/Expose-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'p5hatty'; 
  src: url('../fonts/p5hatty.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
} 

p {
    color: white;
    font-weight: bold;
    margin-left: 1em;
    font-family: 'p5hatty'; 
}

h1 {
    color: white;
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    */
    font-family: 'Expose'; /*p5hatty   Expose-Regular*/
    margin-left: 1em;
    font-size: 6em;
}

body {
    background-color: #000000;
    /*
    cursor: none;
    */
    }

::selection {
    background-color: #cf0000;
}


/*BOUTONS*/

.button {
    color: white;
    background-color: #000000;
    width: 100px;
    height: 50px;
    transform: rotate(5deg);
    
    box-shadow: 5px 20px 0px 10px rgb(255, 255, 255);
}

.button span {

    display: inline-block;
    transform: rotate(-30deg);
}


/*Center*/

.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Scroll Dependant*/

.parrallax_div {
    /*
    height: 300;
    background-color: aquamarine;
    */
    position: relative;
}

.div {
    height: 300;
    background-color: blue;
}

.progressionBar {
    width: 10px;
    height: 20px;
    background-color: black;
    position: fixed;
    z-index: 997;
    top: 0;
    left: 0;
    
}

/*HEADER*/
@media screen and (min-width: 900px)  {
    .header {
    
        width: 1720px;
        height: 352px;
        background-color: rgb(255, 0, 0);
        position: fixed;
        z-index: 998;
        top: -170;
        left: 0;
        transform: rotate(5deg);
        box-shadow: 5px 20px 1px 10px black;

    }

    .header:hover {
        animation: movedown_header 0.8s forwards ease;
    }

    .header:not(:hover) {
        animation: movedown_header_reverse 0.8s forwards ease;
    }
}




 /* Animation de descente */
@keyframes movedown_header {
    0% {
        transform: rotate(5deg) translateY(0px);
    }
    100% {
        transform: rotate(5deg) translateY(30px);
    }
}

/* Animation de remontée */
@keyframes movedown_header_reverse {
    0% {
        transform: rotate(5deg) translateY(30px);
    }
    100% {
        transform: rotate(5deg) translateY(0px);
    }
}

.bodySTart {
    background-color: #000000;
    height: 400px;
    width: 120vw;
    top:-220px;
    left: 0;
    margin-left: 0;
    
    box-shadow: 0px -20px 0px 10px rgb(255, 255, 255);
}

.hamburger {
    background-color:rgb(18, 96, 87);
    height: 400px;
    width: 400px;
    z-index: 1;

}



.attachedToHeader {

}

.attachedToHeader_WillHide {

}

/*MISE EN PAGE*/

.container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes de taille égale */
    gap: 10px; /* Espace entre les colonnes */
  }

/*ANIMATIONS*/

@keyframes headerShow {
    0% {
        transform: translateY(-202px);
    }
    100% {
        transform: translateY(0);
    }
}

.animate_headerShow {
    animation: headerShow 0.2s ease-in-out;
  }



  @keyframes headerHide {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-202px);
        
    }
}

.animate_headerHide {
    animation: headerHide 0.2s ease-in-out;
    display: none;
  }

/*animation: slide 2s ease-in-out infinite;*/



/* CURSOR */

.cursor {
    width: 20px;
    height: 20px;
    border: 2px solid rgb(255, 243, 243);
    border-radius: 20px;
    position: absolute;
    z-index: 1000;
    /*animation: customCursor_hover .2s infinite;*/
}


p:hover {
    /*animation: customCursor_hover .2s ease-in-out;*/

}

@keyframes customCursor_hover {
    from {
        transform:scale(1, 1);
        border: 2px solid white;
    }
    to {
        transform:scale(1.3, 1.3);
        border: 5px solid white;
    }
}

@keyframes customCursor_onClick {
    0% {
        transform:scale(1);
        
    }
    50% {
        transform:scale(0.5);
        opacity: 100;
    }
    100% {
        transform:scale(3);
        opacity: 0;
    }
}

.onClick {
    animation: customCursor_onClick .2s forwards;
}




/******* RESPONSIVE *******/

.parent_FLEX {
    display: flex;
    justify-content: center;

}

.child_FLEX_center {
    display: flex;
    justify-content: center;
}