body {
  background: linear-gradient(#1C2630, #202A33, #61686E);
  /* z-index: 19 */
}

/*-----------------------------------Part 1-----------------------------------*/

.content-produit {
  /* max-width: 1570px; */
  width: 100%;
  margin: 0 auto;
}
/* Icones panier et loupe */
.background {
  display: flex;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  top: 3%;
  right: 4.5%;
  height: 100px;
}

.backgroundcontent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  margin-left: 30px;
  border-radius: 7px;
  cursor: pointer;
  stroke: #EAEAEA;
  transition: 0.2s ease-in-out;
}
/* Animation icones */
.backgroundcontent:hover {
  background-color: rgba(234, 234, 234, 0.8);
  border: 0px rgba(234, 234, 234, 0.8) solid;
  stroke: rgba(10, 65, 89, 0.9);
}

.panier {
  max-width: 38.49px;
  max-height: 36.77px;
  padding-right: 5px;
}

.loupe {
  max-width: 33.8px;
  max-height: 33.92px;
}
/* Blur Full Screen */
.widthhundred {
  display: flex;
  justify-content: center;
  width: 100%;
}

.animblur {
  position: fixed;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*max-width: 1570px;*/
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0px);

}
/* Quand loupe est cliqué, animation */
.modifinput {
  display: flex;
  z-index: 9;
  backdrop-filter: blur(10px);
}
/* Style input */
input {
  width: 47%;
  height: 7%;
  padding-left: 2%;
  padding-right: 2%;
  margin-bottom: 35%;
  border-radius: 15px;
  background: rgba(28, 38, 48, 0);
  font-family: "lato", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #EAEAEA;
  outline: none;
  transition: 0.3s ease-in-out;
}

input::placeholder {
  color: rgba(234, 234, 234, 0.7);
}

/* Quand loupe est cliqué, animation du input */
.modifcolor {
  background: rgba(28, 38, 48, 0.5);
  border: 0.4px rgba(234, 234, 234, 0.6) solid;
  transition: 0.3s ease-in-out;
  transition-delay: 0.2s;
}
/* Croix de fermeture du input search */
.contentremove {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5.4%;
  right: 12.3%;
  width: 55px;
  height: 55px;
  stroke: rgba(234, 234, 234, 0);
  border: 0px ;
  border-radius: 7px;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
/* animation hover croix */
.contentremove:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  background-color: rgba(234, 234, 234, 0.8);
  border: 0px rgba(234, 234, 234, 0.8) solid;
  stroke: rgba(10, 65, 89, 0.9);
}

.contentremove2 {
  display: flex;
  stroke: rgba(234, 234, 234, 1);
}

.part1 {
  position: relative;
  padding-bottom: 80px;
}

.part1 img {
  width: 100%;
}

#imgpart1 {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
/*--------------------------Title, Tags & Description-------------------------*/

.flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 40px 10% 0;
}

/*-----------Title-----------*/

.title h1 {
  font-family: "saira", sans-serif;
  font-weight: 600;
  font-size: 28px;
  margin-bottom: 0;
  margin-top: 0;
  color: #EAEAEA;
}

/*-----------Tags-----------*/

.flexboxtag {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.flexboxtag p {
  width: 78px;
  height: 23px;
  margin-top: 15px;
  margin-right: 30px;
  font-family: "lato", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 23px;
  text-align: center;
  text-transform: capitalize;
  color: #EAEAEA;
  background-color: #0A4159;
  border: 0px #0A4159 solid;
  border-radius: 7px;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.flexboxtag p:hover {
  color: rgba(234, 234, 234, 0.7);
  background-color: rgba(10, 65, 89, 0.4);
}

/*-----------Description-----------*/

.description {
  width: 530px;
  margin-top: 5px;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #EAEAEA;
}

/*-----------------------Price, Cart, Reviews & Wishlist----------------------*/

.flexboxpay {
  display: flex;
  flex-flow: row wrap;
  max-width: 340px;
  height: 150px;
  margin-top: 2px;
}

/*-----------Price-----------*/

.price {
  height: 59px !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.price p {
  width: 170px;
  height: 59px !important;
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 59px;
  text-align: center;
  color: #EAEAEA;
  background-color: #171A21;
  border: 0px #171A21 solid;
  border-radius: 4px 0 0 4px;
}

/*-----------Cart-----------*/

.cart {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 59px;
  margin: 0;
  background-color: #FCAB26;
  border: 0px #FCAB26 solid;
  border-radius: 0 4px 4px 0;
  transition: 0.2s;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.cart p {
  margin-right: 10px;
  font-family: "lato", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 60px;
  text-align: center;
  color: rgba(234, 234, 234, 1);
  transition: 0.2s;
}

.cart:hover {
  background-color: rgba(252, 171, 38, 0.72);
  border: 0px #EAEAEA solid;
}

/* .cart p:hover {
  color: #1C2630;
} */

.cart svg {
  width: 25px;
  height: 26px;
  stroke: rgba(234, 234, 234, 1);
  margin-top: auto;
  margin-bottom: auto;
  transition: 0.2s;
}

/*-----------Reviews-----------*/

.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.reviews p {
  margin: 0;
  padding-bottom: 10px;
  font-family: "lato", sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #EAEAEA;
}

.reviews span {
  font-weight: 500;
}

.reviews img {
  width: 170px;
  height: 14.33px;
}

/*-----------Wishlist-----------*/

.wishlist {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 33px;
  margin-left: 20px;
  border: 2.5px #EAEAEA solid;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.wishlist p {
  margin-right: 4px;
  margin-left: 7px;
  font-family: "lato", sans-serif;
  font-size: 14.5px;
  color: #EAEAEA;
}

.wishlist svg {
  width: 19.4px;
  height: 16.54px;
  padding-right: 5px;
  stroke: #EAEAEA;
  transition: 0.2s ease-in-out;
  fill: none;
}

.wishlist:hover {
  background-color: rgba(234, 234, 234, 1);
  border: 2.5px rgba(234, 234, 234, 0.8) solid;
}

.wishlist:hover p {
  color: rgba(23, 26, 33, 1);
}

.wishlist:hover svg {
    stroke: #FF5B5B;
}

.wishlist svg:hover {
  fill: #FF5B5B !important;
}
/*-----------------------------------Part 2-----------------------------------*/

.part2 {
  /* max-width: 1570px; */
  background-image: url("../img/arbre.gif");
  background-size: cover;
  background-position: center;
  padding: 83px 12%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

/*-----------Blur-----------*/

.blur {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(200, 200, 200, 0.15);
  backdrop-filter: blur(5px);
  border: 0px #171A21 solid;
  border-radius: 7px;
}

/*------------------About (title, paragraph & subtitle) & Tags----------------*/

.about {
  display: flex;
  flex-direction: column;
  max-width: 500px;
}

/*-----------Title-----------*/

.about h2 {
  margin: 50px 0px 13px 0;
  font-family: "saira", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #EAEAEA;

}

/*-----------Paragraph-----------*/

.about p {
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #EAEAEA;
}

/*-----------Subtitle-----------*/

.about h3 {
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #EAEAEA;
}

/*-----------Tags-----------*/

.flexboxtagabout {
  display: flex;
  flex-flow: row wrap;
}

.flexboxtagabout p {
  width: 78px;
  height: 23px;
  margin-right: 30px;
  margin-bottom: 50px;
  font-family: "lato", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 23px;
  text-align: center;
  text-transform: capitalize;
  color: #EAEAEA;
  background-color: rgba(10, 65, 89, 0.5);
  border: 0px rgba(10, 65, 89, 0.5) solid;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.flexboxtagabout p:hover {
  color: rgba(234, 234, 234, 0.7);
  background-color: rgba(10, 65, 89, 0.4);
}
/*---------------------------Additional infos & Languages---------------------*/

.relanguage {
  display: flex;
  flex-direction: row;
}

.firstin {
  padding-top: 94px;
}

.release {
  margin-right: 100px;
}

.release h2 {
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #EAEAEA;
}

.release p {
  margin: 0;
  margin-bottom: 20px;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #EAEAEA;
}

/*-----------Languages-----------*/

.languages h2 {
  margin: 0;
  margin-bottom: 20px;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 900;
  text-transform: capitalize;
  color: #EAEAEA;
}

.languages p {
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #EAEAEA;
}

/*-----------------------------------Part 3-----------------------------------*/

.part3 {
  margin-top: 80px;
  margin-bottom: 115px;
}

.gamecontent {
  display: flex;
  flex-direction: column;
  margin: 30px 12% 0;
  color: #EAEAEA;
}

.gamecontent h2 {
  padding-left: 30px;
  font-family: "saira", sans-serif;
  font-size: 28px;
  font-weight: 500;
}

.contentlineup {
  display: flex;
  flex-direction: column;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 400;
}

.soundtrack1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #0A4159;
  border: 0px #0A4159 solid;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.soundtrack1 p {
  margin: 10px 0 10px 0;
}
.soundtrack2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-left: 30px;
  padding-right: 30px;
}

.soundtrack2 p {
  margin: 10px 0 10px 0;
}

#gamecontentprice1 {
  padding-left: 33%;
}

#gamecontentprice2 {
  padding-left: 33%;
  padding-right: 20px;
}

.buy {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 150px;
  cursor: pointer;
  transition: 0.2s;
  stroke: #FCAB26;
}

.buy p {
  color: #FCAB26;
}
.buy svg {
  width: 25px;
  height: 26px;
  margin-top: auto;
  margin-bottom: auto;
  padding-left: 10px;
}

.buy:hover {
  background-color: rgba(234, 234, 234, 0.1);
  border: 0px rgba(234, 234, 234, 0.1) solid;
  border-radius: 6px;
  stroke: rgba(252, 171, 38, 0.8);
}

.buy:hover p {
  color: rgba(252, 171, 38, 0.8);
}
/*-----------------------------------Part 4-----------------------------------*/

.part4 {
  margin-left: 18%;
  margin-right: 18%;
  padding-bottom: 30px;
  color: #EAEAEA;
  background: linear-gradient(rgba(35, 43, 50, 0), rgba(23, 26, 33, 0.4));
  border: 0px rgba(23, 26, 33, 0.5) solid;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.part4 h2 {
  padding-top: 29px;
  font-family: "saira", sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

.config {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-family: "lato", sans-serif;
  font-size: 17px;
}

.config h3 {
  font-weight: 900;
  text-transform: uppercase;
}

.config h4 {
  margin-bottom: 0;
  font-weight: 300;
}

.config p {
  margin-top: 0;
  font-weight: 400;
}

.configmini {
  width: 40%;
  padding-right: 100px;
  text-align: right;
}

.configreco {
  width: 40%;
}
/*-----------------------------------Part 5-----------------------------------*/

.part5 {
  margin-top: 90px;
  color: #EAEAEA;
  margin-left: 8.9%;
  margin-right: 8.9%;
  margin-bottom: 50px;
}

.part5 h2 {
  margin-left: 10%;
  font-family: "saira", sans-serif;
  font-size: 28px;
  font-weight: 500;
  text-transform: capitalize;
}

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

.clumsy {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 10%;
  margin-right: 10%;
  padding-bottom: 30px;
}

.part1profil {
  display: flex;
  flex-direction: row;
  max-width: 500px;
}

.profil {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 60px;
  min-width: 120px;

}

.pouce {
  display: flex;
  flex-direction: row;
}

.pouce svg {
  width: 16.97px;
  height: 17.25px;
  margin-right: 18px;
  fill: none;
  cursor: pointer
}

.pouce svg:hover {
  fill: #EAEAEA;
}

hr {
  height: 0px;
  border: 0.3px #707070 solid;
  justify-content: center;
  width: 80%;
}

.helicamel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 10%;
  margin-right: 10%;
}

.pseudo {
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: capitalize;
}

.date {
  margin: 0;
  padding-bottom: 10px;
  font-family: "Lato", sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;

}

.comm {
  margin: 0;
  font-family: "lato", sans-serif;
  font-size: 14.5px;
  max-width: 600px;
}

.profilepic {
  width: 67px;
  height: 67px;
  margin-right: 13px;
}