:root{
  --whiteColor:#ffffff;
  --primaryColor:#f2cef2;
  --secondarycolor:#9e91b7;
  --thirdColor:#df99f2;
  --forthColor:#3d2da6;
  --fifthColor:#07338c;
  --sixthColor:#021740;
  --primaryColor_low:#f2cef244;
  --thirdColor_low:#df99f256;
  --fifthColor_low:#07338c63;
}

@font-face {
  font-family: wakanda;
  src: url('../Fonts/Wakanda4Ever-gxg5p.ttf');
}
@font-face {
  font-family: panthera;
  src: url('../Fonts/PantheraRegular-MVZ9J.ttf');
}
@font-face {
  font-family: cantarell;
  src: url('../Fonts/Cantarell-Regular.ttf');
}
@font-face {
  font-family: beyno;
  src: url('../Fonts/FontsFree-Net-BEYNO.ttf');
}
@font-face {
  font-family: wakandaforever;
  src: url('../Fonts/wakandaforever-regular.ttf');
}
body {
  font-family: "Cantarell";
  background-image: url('../Assets/All/arrière_plan.png');
  background-size: cover;
}

header .header_icons {
  margin: 20px 40px;
  display: flex;
  align-items: center;
}
header .header_icons:hover{
  filter: sepia(2000%) invert(100%) brightness(7000%) contrast(50%);
  cursor: pointer;
}
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header nav ul {
  display: flex;
  justify-content: space-evenly;
  float: right;
  width: 35%;
}

header nav ul li {
  list-style: none;
}
header nav ul li a {
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  font-family: "beyno";
}
header nav ul li a:hover{
  text-decoration: underline;
  font-weight: bold;
}
header nav ul li a:focus-within{
  text-decoration: underline;
  font-weight: bold;
}
h1{
  font-family: 'panthera';
  font-size: 68px;
  color: var(--secondarycolor);
}
div, video, span,h1, h2, p, img,a{
  animation :title 2s ease-in;
}
@keyframes title{
  0%{
    margin-left: -10%;
    opacity: 0;
  }100%{
    opacity: 1;
  }
}
h2:not(footer .social_side h2){
  font-family: 'beyno';
  font-size: 32px;
  color: var(--secondarycolor);
}
.barre{
  margin-top: -150px;
  position: absolute;
  display: flex;
}
.barre .vertical_full{
  width: 4px;
  height: 370px;
  background-color:var(--secondarycolor);
}
.barre .vertical_min{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  align-items: center;
}
.barre .vertical_min .barre_min{
  width: 4px;
  height: 200px;
  background-color:var(--secondarycolor);

}
.barre .vertical_min .social_media{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* margin-left: -10px */
}
.barre .vertical_min .social_media img{
  margin-top: 21px;
  cursor: pointer;
}
.barre .vertical_min .social_media img:hover{
  filter: sepia(100%) invert(100%) brightness(1000%);
}

/* Debut de la première section les propos de Black Panther */
main .panther_section{
  width: 100%;
  height: 90vh;
  background-image: url("../Assets/Accueil/Pantherhome1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 500px 0px;

}
.panther_section .black_panther{
  width: 45%;
  margin-top: 2%;
  margin-left: 6%;
}
.panther_section .black_panther .black_panther_text{
  width: 90%;
  text-align: justify;
}
.panther_section .black_panther .black_panther_text p{
  width: 70%;
  font-size: 12px;
  color: var(--whiteColor);
  font-family: 'cantarell';
}

.panther_section .personnage .card{
  margin-left:100px ;
  margin-top: 300px;
  display: flex;
  background-color: var(--sixthColor);
  height: 40vh;
  align-items: center;
  padding-left: 20px;
}
.fit_image{
  height: 100%;
}
.killmonger_image{
  width: 300px;
}
.panther_section .personnage .card #text{
  padding: 0px 10px;
}
.panther_section .card .personnage_text{
  /* margin-top: -30px; */
  font-family: 'cantarell';
  text-align: justify;
  font-size: 12px;
  font-weight: normal;
  color: var(--whiteColor);

}
.tchala_section{
  margin: 0 auto;
}
.container{
  display: flex;
  margin-top: 30%;
  margin-left: 15%;
  justify-content: space-between;
}
.container .tchala_text{
  width: 50%;
  display: flex;
  flex-direction: column;
}
.container .tchala_text p{
  text-align: justify;
  color: var(--whiteColor);
  font-family: 'cantarell';
  font-size: 12px;
  font-weight: normal;
}
.container .tchala_bio{
  width:50% ;
  margin-left: 10px;
}
.container .tchala_bio .back_ground{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--sixthColor);
  height: 22%;
}
.container .tchala_bio .back_ground img{
  display: block;
  margin: 0 auto;
  width: 70%;
  margin-top: -10px;
  z-index: 0;
}
.container .tchala_bio .front_face{
  margin-top: -250px;
  width: 70%;
  padding-top: 250px;
  padding-bottom: 40px;
  padding-left: 50px;
  background-color: var(--whiteColor);
  border-radius: 2%;
}
.container .tchala_bio h3{
  text-align: center;
  font-size: 26px;
}
.container .tchala_bio .front_face .buttons{
  width: 90%;
  margin: 0 auto;

}
.container .tchala_bio .front_face .buttons button{
  background-color: var(--forthColor);
  color: var(--whiteColor);
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
.container .tchala_bio .front_face .biographie p{
  font-family: 'cantarell';
  font-size: 16px;
}
/* Mise en Bold des elemements biographiques de Black Panther */
.container .tchala_bio .front_face .biographie p .bold{
  font-weight: bold;
}
.container .tchala_bio .front_face .biographie em{
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
}
/* Positionnement du poster arrondi de black panther */
.container .tchala_bio .tchala_poster{ 
  display: block;
  text-align: center;
  margin-top: 110%;
}
main .form_section{
  background-image: url('../Assets/Accueil/Pantherhome7.png');
  margin-top: -40%;
  background-size: contain;
  width: 100%;
  height: 100vh;
}
main .form_section .displayForm{
  padding: 40px 10px;
  border-radius: 30%;
  margin: 0 auto;
  width: 60%;
  background:linear-gradient(to bottom, var(--whiteColor)1%,  var(--primaryColor_low));
}
main .form_section .displayForm .formLogin{
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 0 auto;
}
main .form_section .displayForm .formLogin h3{
  margin: 0;
  font-family: 'cantarell';
  font-weight: bold;
  font-size: 36px;
}
main .form_section .displayForm .formLogin p{
  margin: 0;
  font-family: 'cantarell';
}
main .form_section .displayForm .formLogin .input{
  margin: 10px 0 ;
  padding: 20px 10px;
  border: 1px solid var(--sixthColor);
  border-radius: 38px;
  width: 80%;
  background-color: transparent;
}
main .form_section .displayForm .formLogin textarea{
  padding: 20px 10px;
  width: 80%;
  border: 1px solid var(--sixthColor);
  border-radius: 30px;
  margin-bottom: 20px;
  background-color: transparent;
}
main .form_section .displayForm .formLogin .btn{
  width: 174px;
  height: 54px;
  margin: 0 auto;
  padding: 10px 10px;
  border: none;
  border-radius: 38px;
  background-color: var(--thirdColor);
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'cantarell';
}
main .form_section .displayForm .formLogin .btn:hover{
  box-shadow: 0 0 20px var(--sixthColor);
}
footer{
  background-image: url("../Assets/All/back_footer.png");
  background-size: cover;
}
.footer{
  display: flex;
}
footer .marvel_side{
  padding: 20px 100px;
}
.footer_icons{
  position: relative;
  top: -25%;
  left: 10%;
}
footer .social_side{
  justify-content: space-between;
  display: flex;
}
footer .social_side div{
  margin: 0 30px;
}
footer .social_side .icon_container{
  display: flex;
  padding: 0;
  margin-top: -20px;
}

footer .social_side h2{

  color: var(--whiteColor);
  font-size: 22px;
  text-align: center;
  letter-spacing: 12px;

}
footer .social_side .icon_container img{
  cursor: pointer;
  margin: 15px;
}
footer .social_side .icon_container img:hover,
footer .marvel_side:hover{
  cursor: pointer;
  transition: .5s;
  transform: scale(110%);
}
footer .sayna_footer{
  position: relative;
  left:-55%;
  top: -50%;
}
footer .policy{
  position: relative;
  color: var(--whiteColor);
  margin-left: 50%;
  top: -200px;
}