@font-face
{
    font-family : "Panthera" ;
    src : url("polices/PantheraRegular-MVZ9J.ttf") ;
}

@font-face
{
    font-family : "Beyno" ;
    src : url("polices/BEYNO.otf") format("otf") , url("polices/BEYNO.ttf") format("truetype") ;
}

@font-face
{
    font-family : "Wakanda forever" ;
    src : url("polices/WakandaForever-Regular.ttf") ;
}

@font-face
{
    font-family : "Cantarell" ;
    src : url("polices/Cantarell-Regular.ttf") ;
}

html
{
    scroll-behavior : smooth ;
}

h1
{
    font-family : "Panthera" ;
    font-size : 68px ;
    font-weight : 400 ;
    color : #9E91B7 ;
}

h2
{
    font-family : "Beyno" ;
    font-size : 32px ;
    font-weight : 400 ;
    color : #9E91B7 ;
}

*
{
    margin : 0 ;
    padding : 0 ;
}

body
{
    background: url("Illustrations_Logo/All_pages/arrière_plan.png") no-repeat ;
    color : white ;
    font-family : Cantarell ;
    font-weight : 400 ;
    font-size : 16px ;
}





/* ************************************************ HEADER ************************************************ */


header
{
    /* border : 1px solid orange ; */
    display : flex ;
    justify-content : space-between ;
    align-items : center ;
    width : 85% ;
    margin : 1% auto ;
}

nav
{
    /* border : 1px solid red ; */
    width : 35% ;
}

nav ul
{
    /* border : 1px solid green ; */
    display : flex ;
    justify-content : space-between ;
    flex-wrap : wrap ;
}

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

nav ul li a
{
    color : white ; 
    text-decoration : none ;
    font-family : "Beyno" ;
}


/* ****************************************** HERO HEADER ********************************************** */


#hero_header
{
    height : 90vh ;
    background-image : url("Illustrations_Logo/Wakanda/Pantherwakanda1.png") ;
    background-size : cover ;
    background-repeat : no-repeat ;
    background-position : 100px ;
    border : 1px solid transparent ;
}

.h2_hero_header
{
    font-family : "Wakanda forever" ;
    letter-spacing : 0.3em ;
}

.h1_hero_header
{
    font-family : Beyno ;
}

#intro
{
    margin-left : 5% ;
    margin-top : 13% ;
}

#intro p
{
    width : 35% ;
    text-align : justify ;
}


/* *************************************************** MAIN ********************************************** */

#div_principale
{
    /* border : 1px solid red ; */
    width : 88% ;
    margin : auto ;
    background-image : url("Illustrations_Logo/Wakanda/Pantherwakanda2.png") ;
    background-repeat : no-repeat ;
    background-size : contain ;
    background-position : top center ;
    display : flex ;
    justify-content : space-between ;
}

#div_principale p
{
    text-align : justify ;
}

#div1
{
    width : 45% ;
}

#div2
{
    width : 45% ;
}

#liens_videos
{
    height : 180px ;
    background-color : #3D2DA6 ;
    padding-top : 70px ;
}

#liens_videos p
{
    padding-left : 10% ;
}

#liens_videos a
{
    color : white ;
    text-decoration : none ;
}

.image_div2 img
{
    width : 100% ;
}


/* ************************************************ FOOTER ********************************************** */


footer
{
    background-image : url("Illustrations_Logo/All_pages/back_footer.png") ;
    background-repeat : no-repeat ;
    display : flex ;
    justify-content : space-evenly ; 
    align-items : center ;
    height : 600px ;
}

footer #div_texte
{
    /* border : 1px solid red ; */
    /* margin-top : -13% ; */
    display : flex ;
    flex-direction : column ;
    /* align-items : center ; */
}

footer #logo_texte
{
    /* border : 1px solid palegoldenrod ; */
    display : flex ;
    justify-content : space-between ;
}

footer #logo_footer
{
    position : absolute ;
    /* bottom : 5% ; */
    left : 18% ;
    margin-top : 11% ;
}

#logo_texte
{
    display : flex ;
    flex-direction : column ;
    justify-content : space-between ;
    align-items : center ;
    height : 120px ;
    width : 600px ;
    /* border : 1px solid saddlebrown ; */
}

#div_title
{
    display : flex ;
    justify-content : space-between ;
    text-transform : uppercase ;
    width : 100% ;
    font-size : 22px ;
    /* border : 1px solid green ; */
}

#div_title h3
{
    letter-spacing : 1.2px ;
} 

#reseaux_sociaux_2
{
    display : flex ;
    justify-content : space-between ;
    align-items : center ;
    width : 100% ;
}

.liens
{
    display : flex ;
    flex-direction : column ;
}

.image_reseaux_sociaux_2
{
    display : flex ;
    justify-content : space-between ;
    width : 45% ;
}

#copyright
{
    margin-top : 20% ;
    font-size : 10px ;
}

footer a
{
    text-decoration : none ;
}

.liens a
{
    color : white ;
}


/* ************************************************ ANIMATIONS ***************************************** */

.wakanda
{
    text-decoration : underline ;
    color : #9E91B7 ;
}

.enigme:hover , .accueil:hover
{
    text-decoration : underline ;
}

#logo_header:hover
{
    filter : brightness(0) saturate(100%) invert(64%) sepia(4%) saturate(2115%) hue-rotate(219deg) brightness(92%) contrast(94%) ;
}

#cercles:hover + a , #cercles:hover
{
    -webkit-transition : transform 1s ease-in-out ;
    -moz-transition : transform 1s ease-in-out ;
    -o-transition : transform 1s ease-in-out ;
    transition : transform 1s ease-in-out ;
}

#cercles:hover + a , #cercles:hover 
{
    transform : scale(1.1) ;
} 

.image_reseaux_sociaux_2 a:hover
{
    transform : scale(1.1) ;
}

*
{
    animation : fadein 2s ;
}

@keyframes fadein
{
    0%{
        opacity : 0 ;
        transform : translateX(-20px) ;
    }

    100%{
        opacity : 1 ;
    }
}

.liens a:hover
{
    text-decoration : underline ;
}