@font-face {
	font-family: 'Cinzel';
	src: url(fonts/cinzel/Cinzel-Regular.otf);
}
@font-face {
  font-family: "pixelmix";
	src: url(fonts/pixelmix/pixelmix.ttf);
}

*{
    margin: 0;
    padding: 0;
}
header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

}
.vivi-gif{
width: 10%;
}
.bloc-presentation{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
  background-color: #000;
}
.text-presentation{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5%;
  padding: 1%;
  width: 100%;
  padding-bottom: 30px;
}
.text-presentation::before{
  content: "";
  position: absolute;
  background: linear-gradient(50deg , #fff, #553d00 , #fff, #553d00 ,#fff, #553d00);
  background-size: 400%;
  width: 100%;
  height: 3px;
  bottom: 0;
  animation: animate 50s linear infinite;
}
@keyframes animate {
  0%{
    background-position: 0 0;
  }
  50%{
    background-position: 500% 0;
  }
  100%{
    background-position: 0 0;
  }
}
.text-presentation p{
  font-size: 1.2em;
  font-family: 'Cinzel';
  padding: 0 5% 0 5%;
  text-align: justify;
  color: #fff;
}
.logo-square-enix{
  width: 9%;
}
.logo-accueil{
    margin-top: 30px;
    width: 75%;
}
.bloc-accueil{
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url(images/background-ff-accueil.webp);
    background-size: cover;
    background-position: center;

}
.bloc-accueil span{
    color: #fff;
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    bottom: 0;
    font-size: 1.1em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: bold;
    animation: descend 2s ease-in-out infinite alternate;
}
.bloc-accueil span::after{
    content: "";
    display: block;
    width: 2px;
    height: 70px;
    background-color: #ffff;

}
@keyframes descend {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
.bloc-developement::before{
  content: "";
  display: block;
  position: absolute;
  background-color: #000000b0;
  width: 100%;
  height: 100%;
  
}
.bloc-developement{
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(images/midgar-city.webp);
  background-size: cover;
}
.developement-title{
  position: relative;
  color: #fff;
  padding: 30px 0 0 30px;
  font-family: 'Didact Gothic', sans-serif;
}
.graphic-developpement{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90%;
}
.canvas{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 80%;
} 
  .logos-consoles{
    position: absolute;
    display: flex;
    justify-content: space-between;
    padding-top: 3%;
    align-items: center;
    width: 100%;
    top: 0;
  }
    .logo-nintendo{
      width: 6%;
      height: 6%;
    }
    .logo-super-nintendo{
      margin-left: -10%;
      width: 2%;
      height: 4%;
    }
    .logo-ps1{
      margin-left: -6%;
      width: 2.5%;
      height: 2%;
    }
    .logo-ps2{
      margin-left: -10%;
      width: 5%;
      height: 2%;
    }
    .logo-ps3{
      margin-left: -10%;
      width: 7%;
      height: 2%;
    }
    .logo-ps4{
      margin-left: -10%;
      width: 7%;
      height: 2%;
    }
    .logo-ps5{
      margin-right: 2%;
      width: 6.5%;
      height: 2%;
    }
  .bloc-column{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 80%;
  }
  .bloc-column label{
    position: absolute;
    left: -17px;
    color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 1.1vw;
  }
  .bloc-column label:nth-child(1){
    position: absolute;
    top: 10%;
  }
  .bloc-column label:nth-child(2){
    position: absolute;
    bottom: 10%;
  }
  .column-graph{
    position: relative;
    width: 80%;
    height: 65%;
    background-color: transparent;
    border-left: 2px solid #fff;
  }
  
  .jauge-ff1{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    src: url(fonts/Didact_Gothic/DidactGothic-Regular.ttf);
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 120%;
    height: 8%;
  }
  .jauge-ff2{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 110%;
    height: 8%;
  }
  .jauge-ff3{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 130%;
    height: 8%;
  }
  .jauge-ff4{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 150%;
    height: 8%;
  }
  .jauge-ff5{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 145%;
    height: 8%;
  }
  .jauge-ff6{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 115%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 190%;
    height: 8%;
  }
  .jauge-ff7{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 175%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 360%;
    height: 8%;
  }
  .jauge-ff8{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 410%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 260%;
    height: 8%;
  }
  .jauge-ff9{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 450%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 270%;
    height: 8%;
  }
  .jauge-ff10{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 460%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 260%;
    height: 8%;
  }
  .jauge-ff10-2{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 630%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 180%;
    height: 8%;
  }
  .jauge-ff11{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 240%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 320%;
    height: 8%;
  }
  .jauge-ff12{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 40%;
    left: 250%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 690%;
    height: 8%;
  }
  .jauge-ff13{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 540%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 760%;
    height: 8%;
  }
  .jauge-ff13-2{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 1205%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 230%;
    height: 8%;
  }
  .jauge-ff13-lr{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 1360%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 190%;
    height: 8%;
  }
  
  .jauge-ff14{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 60%;
    left: 330%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 670%;
    height: 8%;
  }
  .jauge-ff14-arr{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 60%;
    left: 950%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 300%;
    height: 8%;
  }
  .jauge-ff14-h{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 60%;
    left: 1135%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 300%;
    height: 8%;
  }
  .jauge-ff15{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 30%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 1380%;
    height: 8%;
  }
  .jauge-ff16{
    color: #000;
    z-index: 1;
    position: absolute;
    top: 20%;
    left: 1050%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2vw;
    font-family: 'Didact Gothic', sans-serif;
    background: linear-gradient(to bottom, #eac873, #755b19f6);
    width: 1050%;
    height: 8%;
  }
.personnages .title{
    padding: 30px 0 0 30px;
}
.personnages::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, 0.584);
  width: 100%;
  height: 100vh;
}
.personnages{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    background-image: url(images/castle1.webp);
    background-size: cover;
    background-position: center;
}
.personnages-title{
  position: relative;
  padding: 30px 0 0 30px;
}
.personnages-title h2{
    z-index: 1;
    color: #fff;
    font-size: 1.5em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: bold;
}
.personnages-title span{
    z-index: 1;
    color: #ffff;
    margin-top: 30px;
    font-size: 1em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: lighter;
}
.group-characters{
    position: relative;
    color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
    flex-wrap: wrap;
    width: 100%;
}
.character-ff1,
.character-ff2,
.character-ff3,
.character-ff4,
.character-ff5,
.character-ff6,
.character-ff7,
.character-ff8,
.character-ff9,
.character-ff10,
.character-ff10-2,
.character-ff11,
.character-ff12,
.character-ff13,
.character-ff13-2,
.character-ff15,
.character-ff16{
    display: flex;
    flex-direction: column;
    justify-content:end;
    align-items: center;
}
.character-ff1 img{
  width: 60px;
}
.character-ff2 img{
  width: 60px;
}
.character-ff3 img{
  width: 60px;
}
.character-ff4 img{
  width: 50px;
}
.character-ff5 img{
  width: 75px;
}
.character-ff6 img{
  width: 70px;
}
.character-ff7 img{
  width: 50px;
}
.character-ff8 img{
  width: 90px;
}
.character-ff9 img{
  width: 40px;
}
.character-ff10 img{
  width: 50px;
}
.character-ff10-2 img{
  width: 75px;
}
.character-ff11 img{
  width: 65px;
}
.character-ff13 img{
  width: 43px;
}
.character-ff13-2 img{
  width: 85px;
}
.character-ff15 img{
  width: 45px;
}
.character-ff16 img{
  width: 180px;
}
.chocobo-run{
  position: relative;
  display: flex;
  align-items: last baseline;
  justify-content: right;
  z-index: 1;
  animation: run 5s linear infinite;
  width: 100%;
}
.chocobo-red{
  width: 2%;
}
.chocobo-yellow{
  width: 2%;
}
.chocobo-noctis{
  width: 10%;
  margin: 0 10px 0 0;
}
@keyframes run {
  100%{
    transform: translateX(-110%);
  }
}
.bloc-personnage::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.584);
    width: 100%;
    height: 100vh;
}
.bloc-personnage{
    position: relative;
    display: flex;
    flex-direction: column;
    background: url(images/FF16-walpaper1.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  .swiper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .swiper-wrapper{
    width: 100%;
    height: 35em;
    display: flex;
    align-items: center;
  }
  .characters-title{
    position: relative;
    padding: 30px 0 0 70px;
  }
  .crystal-title{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
  }
  .characters-title h2{
    color: #fff;
    font-size: 1.5em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: bold;
}
  .characters-title span{
    color: #ffff;
    margin-top: 30px;
    font-size: 1em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: lighter;
}
  
  .card{
    position: relative;
    width: 20em;
    height: 90%;
    background: #fff;
    border-radius: 1.5em;
    box-shadow: 0 0 2em rgba(0, 0, 0, .2);
    padding: 2em 1em;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 2em;
  }
  .card::before{
    content: "";
    top: 20px;
    position: absolute;
    display: block;
    width: 19.5em;
    height: 420px;
    border: 2px solid #ffffff62;
    border-top-left-radius: 1.4em;
    border-top-right-radius: 1.4em;
  }
  
  .card.is-flipped {
    transform: rotateY(180deg);
  }
  .swiper-slide:nth-child(1){
    background: url(images/warrior-of-light1.webp);
    background-position: 65%;
    background-size: cover;
  }
  .swiper-slide:nth-child(2){
    background: url(images/firion1.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(3){
    background: url(images/onion-knight1.webp);
    background-position: 25%;
    background-size: cover;
  }
  .swiper-slide:nth-child(4){
    background: url(images/cecil-harvey.webp);
    background-position: 50%;
    background-size: cover;
  }
  .swiper-slide:nth-child(5){
    background: url(images/bartz-klauser1.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(6){
    background: url(images/terra-branford.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(7){
    background: url(images/cloud1.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(8){
    background: url(images/squall-leonhart.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(9){
    background: url(images/zidane-tribal1.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(10){
    background: url(images/Tidus.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(11){
    background: url(images/yuna1.webp);
    background-position: 65%;
    background-size: cover;
  }
  .swiper-slide:nth-child(12){
    background: url(images/vaan1.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(13){
    background: url(images/lightning1.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(14){
    background: url(images/serah-farron.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(15){
    background: url(images/noctis.webp);
    background-position: center;
    background-size: cover;
  }
  .swiper-slide:nth-child(16){
    background: url(images/clive1.webp);
    background-position: center;
    background-size: cover;
  }
  
  
  .swiper-slide:not(.swiper-slide-active){
    filter: blur(1px);
  }
  
  .card__content{
    position: absolute;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.79);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .card__number{
    position: absolute;
  	font-family: 'final_fantasy';
    font-size: 1.2em;
    top: 10px;
    left: 20px;
    font-weight: 500;
  }
  
  .card__name{
    margin: 10px 0 0 0;
    font-family: 'Cinzel';
    font-size: 1.5rem;
    font-weight: 500;
    color: #6c4d00c3;
    /* color: #8e8e8a; */
  }

  .logo-ff1{
    width: 35%;
  }
  .logo-ff2{
    width: 35%;
    height: 50%;
  }
  .logo-ff3{
    width: 35%;
    height: 55%;
  }
  .logo-ff4{
    width: 35%;
    height: 55%;
  }
  .logo-ff5{
    width: 35%;
    height: 40%;
  }
  .logo-ff6{
    width: 35%;
    height: 45%;
  }
  .logo-ff7{
    width: 35%;
    height: 50%;
  }
  .logo-ff8{
    width: 35%;
    height: 100%;
  }
  .logo-ff9{
    width: 35%;
    height: 40%;
  }
  .logo-ff10{
    width: 40%;
    height: 60%;
  }
  .logo-ff10-2{
    width: 35%;
    height: 65%;
  }
  .logo-ff12{
    width: 40%;
    height: 90%;
  }
  .logo-ff13{
    width: 40%;
    height: 90%;
  }
  .logo-ff13-2{
    width: 40%;
    height: 90%;
  }
  .logo-ff15{
    width: 40%;
    height: 90%;
  }
  .logo-ff16{
    width: 40%;
    height: 90%;
  }
  .gif-perso{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
  }
  .gif-perso img{
    width: 50px;
  }
  .block-sales::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.721);;
    width: 100%;
    height: 100%;
  }
  .block-sales{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(images/duel-ff71.webp);
    background-size: cover;
    background-position: center;
  }
  .sales-title{
    display: flex;
    flex-direction: column;
    position: relative;
   padding: 30px 0 0 30px;
  }
  .sales-title h2{
    color: #fff;
    font-size: 1.5em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: bold;
}
.titre-infos{
  color: #bcbcbc;
  font-weight: 200;
  font-style: italic;
  font-size: 0.7em;
}
  .sales-title span{
    color: #ffff;
    font-size: 1em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: lighter;
}
.sales-tout{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
  .bloc-grid{
    display: grid;
    grid-template-columns: 20% 22% 20%;
    grid-template-rows: 1fr;
    justify-content: center;
    width: 90%;
    gap: 10%;
  }
  .block-card-ff10{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-column: 2/3;
    grid-row: 1/2;
    width: 100%;
  }
  .block-card-ff7{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-row: 1/2;
    width: 100%;
  }
  .block-card-ff8{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-row: 1/2;
    width: 100%;
  }
  
  .tidus-dessin{
    transform: rotate(-3deg);
    width: 35%;
  }
  .cloud-dessin{
    transform: rotate(-3deg);
    width: 35%;
  }
  .squall-dessin{
    transform: rotate(-3deg);
    width: 50%;
  }
  /* Card-games */
  .card-game-ff10{
    position: relative;
    display: flex;
    padding: 10px 10px 10px 0;
    background: linear-gradient(to bottom, #eac873da, #84671ddc);
    box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.683);
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }
  .card-game-ff8{
    position: relative;
    display: flex;
    padding: 10px 10px 10px 0;
    background: linear-gradient(to bottom, #D3A88A, #392C23);
    box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.683);
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
  .card-game-ff7{
    position: relative;
    display: flex;
    padding: 10px 10px 10px 0;
    background: linear-gradient(to bottom, #E1D7D7, #3E3E3E);
    box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.683);
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
    .card-game-ff7 .game-cover{
      width: 100%;
    }
    .card-game-ff8 .game-cover{
      width: 100%;
    }
    .card-game-ff10 .game-cover{
      width: 100%;
    }
    .entete:nth-child(1){
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 15%;
    }
    .entete span{
      position: absolute;
      display: flex;
      justify-content: center;
      width: 150px;
      color: white;
      font-size: 1.2vw;
      transform: rotate(-90deg);
    }
    .entete img{
      position: absolute;
      top: 0;
      left: 0;
      margin: 10% 0 0 30% ;
      width: 40%;
      opacity: 0.7;
   }
  
  .game-cover{
    border-radius: 5px;
  }
  
  .card-game-ff8:hover .details-ff8{
    transition: 0.5s;
    right: 0;
  }
  .card-game-ff7:hover .details-ff7{
    transition: 0.5s;
    right: 0;
  }
  .card-game-ff10:hover .details-ff10{
    transition: 0.5s;
    right: 0;
  }
  .details-ff7 h3{
    color: #fff;
    font-size: 1.2vw;
    font-family: 'Retro Gaming';
    font-weight: 500;
    margin: 1% 0 0 0;
  }
  .details-ff8 h3{
    color: #fff;
    font-size: 1.1vw;
    font-family: "pixelmix";
    font-weight: 500;
    margin: 2% 0 0 0;
  }
  .details-ff10 h3{
    color: #fff;
    font-size: 1.3vw;
    font-family: 'Consola Mono';
    font-weight: 500;
    text-shadow: 3px 3px 2px rgb(0, 0, 0);
    margin: 2% 0 0 0;
  }
  .details-ff7 ul,
  .details-ff8 ul,
  .details-ff10 ul{
    color: #fff;
    font-size: 0.9vw;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    margin: 3% 0 0 0;
    list-style: none;
  }
  .details-ff7 li,
  .details-ff8 li,
  .details-ff10 li{
    line-height: 140%;
  }
  .details-ff7 label{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5% 0 0 0;
    width: 100%;
    font-size: 0.9vw;
    font-family: 'Retro Gaming';
    color: #fff;
  }
  .details-ff10 label{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px 0;
    width: 100%;
    font-family: 'Consola Mono';
    font-weight: 700;
    text-shadow: 3px 3px 2px rgb(0, 0, 0);
    color: #fff;
  }
  .details-ff7 li img{
    padding:  0 10px 0  ;
  }
  .details-ff8 li img{
    padding:  0 10px 0  ;
  }
  .details-ff10 li img{
    padding:  0 10px 0  ;
  }
  .details-ff10{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: -120%;
    background: linear-gradient(to right, #ca7530, #DBBF40);
    transition: 0.3s;
  }
  .total-hd-remaster::before{
    content: "(Total)";
    font-weight: 800;
    font-size: 0.7vw;
    display: block;
    color: #fff;
    padding: 0 10px 0 0 ;
  }
  .total-hd-remaster{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px 0;
  }
  .details-ff7{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: -120%;
    background: linear-gradient(to bottom, #00029B, #00003B);
    border-radius: 5px;
    transition: 0.3s;
  }
  .details-ff8{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: -120%;
    background: linear-gradient(to bottom, #6F1917, #1d0202);
    border-radius: 5px;
    transition: 0.3s;
  }
  .logo-ps1-details{
    width: 6%;
  }
  .logo-ps2-details{
    width: 10%;
  }
  .logo-ps3-details{
    width: 15%;
  }
  .logo-ps4-details{
    width: 15%;
  }
  .logo-steam-details{
    width: 6%;
  }
  .logo-android-details{
    width: 6%;
  }
  .logo-switch-details{
    width: 6%;
  }
  .logo-xbox-details{
    width: 6%;
  }
  .logo-psp-details{
    width: 10%;
  }

  
  .score-ff10{
    color: #EAC873;
    font-family: "Poppins", sans-serif;
    font-size: 3vw;
    font-weight: 800;
  }
  .score-ff8{
    color: #D3A88A;
    font-family: "Poppins", sans-serif;
    font-size: 2vw;
    font-weight: 800;
  }
  .score-ff7{
    color: #E1D7D7;
    font-family: "Poppins", sans-serif;
    font-size: 2.5vw;
    font-weight: 800;
  }
  .games-revenues::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.632);
    width: 100%;
    height: 100%;
  }
  .games-revenues{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: url(images/ff-gold-saucer1.webp);
    background-size: cover;
  }
  .games-revenues .revenues-title{
    position: relative;
    margin: 30px 0 0 30px;
    color: #fff;
  }
  .games-revenues h2{
    color: #fff;
    font-size: 1.5em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: bold;
  }
  .games-revenues span{
    margin-top: 30px;
    color: #ffff;
    font-size: 1em;
    font-family: 'Didact Gothic', sans-serif;
    font-weight: lighter;
  }
  .graphics-revenues{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 110vh;
  }
  
  .graphic{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-top: 50px;
  }
  .graphic .dio-canvas{
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    bottom: 30px;
    right: 30px;
  }
  .graphic .dio-canvas::before{
    position: absolute;
    bottom: 30px;
    right: 30px;
  }
    .dio-canvas .character-canvas{
      width: 60px;
    }
    .dio-canvas .message-canvas{
      display: none;
      width: 50%;
      padding: 5px 0 10px 5px;
      background: linear-gradient(to bottom, #00029B, #00003B);
      border: 2px solid #979797;
      border-radius: 2px;
    }
    .dio-canvas .message-canvas span{
      font-family: "pixelmix";
      font-weight: 500;
    }
    .dio-canvas .message-canvas p{
      font-size: 0.8em;
      font-family: "pixelmix";
      margin-top: 5%;
      color: #fff;
    }
    .dio-canvas:hover .message-canvas{
      display: block;
      transition: 0.5s;
    }
  .graphic-informations{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 80px 0 50px 0;
  }
  @keyframes animate{
    0%{
      background-position: 0 0;
    }
    50%{
      background-position: 500% 0;
    }
    100%{
      background-position: 0 0;
    }
  }
  .glow::before{
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    border: 4px solid #d11cb3;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    filter: blur(3px);
  }
  .record-text{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3%;
    width: 100%;
    height: 100%;
    background-color: #df28ca4d;
    z-index: 1;
  }
  .record-text p{
    text-align: justify;
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
  }
  .glow::after{
    content: url(images/mage-noir.gif);
    position: absolute;
    top: -80px;
    left: 0;
  }
  .turnover-franchise{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-size: 2.5em;
    font-style: italic;
    font-weight: 800;
    color: #ffffff;
    -webkit-text-stroke: 2px rgba(132, 0, 255, 0.662);
  }
  @media screen and (min-width:800px) {
    .games-revenues{
      width: 100%;
     height: 100vh;
    }
    .graphics-revenues{
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 80%;
    }
    .graphic{
      width: 70%;
      height: 100%;
      padding: 0;
    }
    .graphic-informations{
      width: 50%;
      margin: 0;
    }
    .record-text{
      width: 75%;
    }
    .record-text p{
      font-size: 1.4vw;
    }
    .turnover-franchise{
      font-size: 3vw;
    }
  }
  @media screen and (max-width:800px){

    .text-presentation p{
      font-size: 1em;
    }
    .vivi-gif{
      width: 20%;
      }
    .logo-square-enix{
      width: 15%;
    }
    .bloc-developement{
      height: 200vh;
    }
    .graphic-developpement{
      overflow: hidden;
      width: 100%;
    }
    .logos-consoles{
      width: 1000px;
      top: 3%;
      padding: 0;
    }
    .logo-nintendo{
      width: 100px;
    }
    .logo-super-nintendo{
      width: 4%;
    }
    .logo-ps1{
      width: 4%;
    }
    .logo-ps2{
      width: 8%;
    }
    .logo-ps3{
      width: 10%;
    }
    .logo-ps4{
      width: 10%;
    }
    .logo-ps5{
      width: 10%;
    }
    .canvas{
      transform: rotate(-90deg);
      height: 35%;
      margin: 0 0 0 10%;
    } 
    
    .bloc-column{
      width: 100%;
    }

    .bloc-column label{
      font-size: 1em;
    }
    .column-graph span{
      font-size: 0.9em;
    }
    .bloc-column label:nth-child(1){
      position: absolute;
      top: 10%;
    }
    .bloc-column label:nth-child(2){
      position: absolute;
      bottom: 10%;
    }
    .column-graph{
      width: 100%;
    }
    .column-graph{
      position: relative;
      width: 4vh;
      height: 70%;
      background-color: transparent;
      border-left: 2px solid #fff;
    }
    .jauge-ff1{
      font-size: 1em;
      top: 50%;
      width: 85%;
      height: 8%;
    }
    .jauge-ff2{
      font-size: 1em;
      top: 40%;
      width: 90%;
      height: 8%;
    }
    .jauge-ff3{
      font-size: 1em;
      top: 40%;
      left: 30%;
      width: 110%;
      height: 8%;
    }
    .jauge-ff4{
      font-size: 1em;
      top: 50%;
      left: 40%;
      width: 110%;
      height: 8%;
    }
    .jauge-ff5{
      font-size: 1em;
      top: 40%;
      left: 80%;
      width: 125%;
      height: 8%;
    }
    .jauge-ff6{
      font-size: 1em;
      top: 30%;
      left: 100%;
      width: 150%;
      height: 8%;
    }
    .jauge-ff7{
      font-size: 1em;
      top: 40%;
      left: 130%;
      width: 310%;
      height: 8%;
    }
    .jauge-ff8{
      font-size: 1em;
      top: 30%;
      left: 330%;
      width: 217%;
      height: 8%;
    }
    .jauge-ff9{
      font-size: 1em;
      top: 40%;
      left: 360%;
      width: 230%;
      height: 8%;
    }
    .jauge-ff10{
      font-size: 1em;
      top: 30%;
      left: 370%;
      width: 220%;
      height: 8%;
    }
    .jauge-ff10-2{
      font-size: 1em;
      top: 30%;
      left: 510%;
      width: 145%;
      height: 8%;
    }
    .jauge-ff11{
      font-size: 1em;
      top: 50%;
      left: 185%;
      width: 270%;
      height: 8%;
    }
    .jauge-ff12{
      font-size: 1em;
      top: 40%;
      left: 200%;
      width: 565%;
      height: 8%;
    }
    .jauge-ff13{
      font-size: 1em;
      top: 50%;
      left: 435%;
      width: 610%;
      height: 8%;
    }
    .jauge-ff13-2{
      font-size: 1em;
      top: 50%;
      left: 980%;
      width: 175%;
      height: 8%;
    }
    .jauge-ff13-lr{
      font-size: 1em;
      top: 50%;
      left: 1100%;
      width: 150%;
      height: 8%;
    }
    
    .jauge-ff14{
      font-size: 1em;
      top: 60%;
      left: 250%;
      width: 560%;
      height: 8%;
    }
    .jauge-ff14-arr{
      font-size: 1em;
      top: 60%;
      left: 780%;
      width: 230%;
      height: 8%;
    }
    .jauge-ff14-h{
      font-size: 1em;
      top: 60%;
      left: 920%;
      width: 190%;
      height: 8%;
    }
    .jauge-ff15{
      font-size: 1em;
      top: 30%;
      left: 50%;
      width: 1110%;
      height: 8%;
    }
    .jauge-ff16{
      font-size: 1em;
      top: 20%;
      left: 850%;
      width: 850%;
      height: 8%;
    }

    .chocobo-red{
      width: 10%;
    }
    .chocobo-yellow{
      width: 10%;
    }
    .chocobo-noctis{
      width: 30%;
    }
    .block-sales::before{
      background-color: rgba(0, 0, 0, 0.749);
    }
    .tidus-dessin{
      width: 70%;
    }
    .cloud-dessin{
      width: 65%;
    }
    .squall-dessin{
      width: 75%;
    }
    .block-sales{
      background-position: 70%;
      height: 100%;
    }
    .bloc-grid{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      margin: 100px 0 0 0;
    }
    .block-card-ff10{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      margin: 0 0 50px 0;
    }
    .block-card-ff7{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      margin: 0 0 50px 0;
    }
    .block-card-ff8{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;
      margin: 0 0 50px 0;
    }
    .details-ff7 ul,
    .details-ff8 ul,
    .details-ff10 ul{
    font-size: 2.5vw;
  }
    .details-ff7 h3,
    .details-ff8 h3,
    .details-ff10 h3{
    font-size: 3vw;
  }
  .details-ff7 label,
  .details-ff8 label,
  .details-ff10 label{
  font-size: 2vw;
}
  .total-hd-remaster::before{
    font-size: 0.9em;
  }
    .entete span{
      width: 200px;
      font-size: 3.2vw;
    }
    .score-ff10{
      color: #EAC873;
      font-family: "Poppins", sans-serif;
      font-size: 9vw;
      font-weight: 800;
    }
    .score-ff8{
      color: #D3A88A;
      font-family: "Poppins", sans-serif;
      font-size: 7vw;
      font-weight: 800;
    }
    .score-ff7{
      color: #E1D7D7;
      font-family: "Poppins", sans-serif;
      font-size: 8vw;
      font-weight: 800;
    }
    .record-text{
      width: 80%;
    }
    .glow::before , .glow::after{
      width: 100%;
      height: 100%;
    }
    .card::before{
      content: "";
      top: 20px;
      position: absolute;
      display: block;
      width: 15.5em;
      height: 320px;
      border: 2px solid #ffffff62;
      border-top-left-radius: 1.4em;
      border-top-right-radius: 1.4em;
    }
    .card{
      width: 15.5em;
      height: 70%;
    }
  }