body {
  background: url("images/bg.jpg");
  background-size: 73% 83%;
  margin: 0;
  background-attachment: fixed;
  font-family: "Times New Roman", Times, serif;
  overflow-x: hidden;
}
#info_debut {
  margin-top: 4%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  transition-property: height, width, transform;
  transition-duration: 1s;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid transparent;
  height: 400px;
  width: 500px;
}

#container {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100%;
  /* margin-left: 7%; */
  margin-right: 7%;
}

.sup {
  cursor: pointer;
  color: rgb(199, 141, 33);
  margin-left: 23px;
  margin-top: 5px;
}

#copyright2 {
  position: relative;
  position: fixed;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  color: grey;
  padding: 5px;
  left: 0;
  text-align: center;
  width: 100%;
}

/* #info_debut {
  transform: translateY(-50%);
  transition-property: height, width;
  transition-duration: 1s;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid transparent;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  height: 400px;
  width: 500px;
} */

#info_debut_top {
  transition-property: height;
  transition-duration: 1s;
  border: 2px solid black;
  height: 100px;
  background: url("images/welcome.png");
  background-size: 100% 220%;
}

#box_j {
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 450px;
}

.butt_j {
  background: #986913;
  float: left;
  margin-left: 20px;
  margin-top: 40px;
  height: 30px;
  width: 100px;
  border: 2px solid rgb(82, 57, 9);
  color: white;
  font-size: 22px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

#magic_j {
  margin-left: auto;
  margin-right: auto;
  margin-top: 125px;
  height: 50px;
  width: 215px;
}

.mini_joueur {
  transition-property: opacity;
  transition-duration: 0.5s;
  opacity: 0;
  width: 50px;
  height: 50px;
}

#box_nom_j {
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 450px;
  height: 70px;
}

.input_j {
  background: rgba(255, 255, 255, 1);
  border: 2px solid black;
  height: 30px;
  width: 220px;
}

#input_j1 {
  float: left;
}

#input_j2 {
  float: right;
}

#input_j3 {
  float: left;
}

#input_j4 {
  float: right;
}

.butt_form {
  background: rgb(152, 105, 19);
  margin-top: 5px;
  height: 30px;
  width: 200px;
  border: 2px solid rgb(82, 57, 9);
  color: white;
  font-size: 22px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

#finish_noms {
  float: right;
  margin-right: 10px;
}

#pas_ltemps {
  float: left;
  margin-left: 10px;
}

.md {
  background: rgb(152, 105, 19);
  float: left;
  margin-left: 20px;
  height: 50px;
  width: 100px;
  border: 2px solid rgb(82, 57, 9);
  color: white;
  font-size: 22px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

#box_md {
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 290px;
  height: 70px;
}

#md_info {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 30px;
  height: 30px;
  width: 400px;
  color: white;
  font-size: 20;
}

#joueurs_setting {
  float: left;
  border: 2px solid transparent;
  width: 200px;
  height: 375px;
}

#plateau {
  background: url("images/plateau.jpg");
  background-size: 107% 106%;
  background-position: -21px -11px;
  float: left;
  border: 2px solid white;
  height: 375px;
  width: 600px;
}

#cmd {
  float: left;
  border: 2px solid white;
  width: 1096px;
  height: 121px;
}

#mess_info {
  float: right;
  border: 2px solid transparent;
  height: 200px;
  width: 288px;
  margin-top: -504px;
}

#appel {
  background: rgb(255, 221, 151);
  float: right;
  border: 2px solid black;
  width: 288px;
  margin-top: -245px;
  height: 115px;
}

.case {
  float: left;
  height: 53px;
  width: 90px;
  border: 5px solid orange;
}

.case:hover {
  border-color: rgb(197, 141, 37);
}

.case:active {
  border-color: white;
}

#box_cmd {
  float: right;
  border: 2px solid white;
  height: 100%;
  width: 285px;
}

#box_de {
  background: rgb(61, 15, 13);
  float: right;
  height: 100%;
  width: 600px;
  border: 2px solid white;
}

.butt_cmd {
  font-size: 30px;
  width: 280px;
  border: 2px solid black;
  padding-top: 16px;
  padding-bottom: 16px;
  background: orange;
  color: white;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
}

.default_de {
  margin-left: 15px;
  margin-top: 20px;
  height: 85px;
  width: 85px;
}

#but_lance {
  padding-top: 39px;
  transition-property: background;
  transition-duration: 0.5s;
  background: rgb(157, 107, 16);
  padding-bottom: 40px;
}

#but_lance:hover {
  background: #bd7e0a;
}

#but_lance:active {
  background: brown;
}

#but_Tlance {
  padding-top: 39px;
  transition-property: background;
  transition-duration: 0.5s;
  background: rgb(157, 107, 16);
  padding-bottom: 40px;
}

#but_Tlance:hover {
  background: #bd7e0a;
}

#but_Tlance:active {
  background: brown;
}

.cont_d {
  border-radius: 10px;
  margin-top: 7px;
  margin-left: 13px;
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid transparent;
  cursor: pointer;
}

.Jbox {
  border: 2px solid white;
  height: 90px;
  width: 100%;
  background: url("https://artdec.ca/media/img/catalog/options/teinte-bois-6.jpg");
}

#OK {
  border-radius: 5px;
  color: white;
  background: green;
  width: 30px;
  height: 20px;
  float: right;
  text-align: center;
  cursor: pointer;
}

.nj {
  background: rgba(192, 123, 16, 0.7);
  padding: 5px;
  color: white;
  font-size: 18px;
}

#tour {
  margin-left: -2px;
  background: rgb(7, 75, 152);
  border: 2px solid white;
  height: 20px;
  color: white;
  padding: 10px;
}

#nlance {
  margin-left: -2px;
  border: 2px solid white;
  height: 20px;
  background: rgb(7, 75, 152);
  color: white;
  padding: 10px;
}

#combi_info {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  color: white;
  text-align: center;
  background: rgba(255, 164, 0, 0.5);
  border: 2px solid white;
  width: 250px;
  margin-top: 17px;
  margin-left: 17px;
}

#portail_appel {
  transition-property: opacity;
  transition-duration: 0.5s;
  z-index: 2;
  background: rgba(37, 107, 13, 0.8);
  position: absolute;
  width: 285px;
  height: 115px;
  border: 2px solid white;
  color: white;
  text-align: center;
  font-size: 25px;
}

.but_appel {
  background: green;
  margin-left: 10px;
  border: 2px solid black;
  width: 80px;
  float: left;
  margin-top: 5px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  color: black;
  cursor: pointer;
  box-shadow: 0px 2px 0px 1px rgb(2, 39, 2);
}

#Ok_appel {
  padding: 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  cursor: pointer;
}

.nbreP {
  background: rgba(16, 114, 210, 0.6);
  padding: 5px;
  color: white;
}

.nbreJet {
  background: rgba(56, 126, 41, 0.6);
  padding: 5px;
  color: white;
}

#effect {
  transition-property: background;
  transition-duration: 0.5s;
  width: 100%;
  height: 100%;
  background: transparent;
}

#effect:hover {
  background: rgba(0, 0, 0, 0.5);
}

#effect:active {
  background: rgba(255, 255, 255, 0.5);
}

#jetJ1 {
  opacity: 0.85;
  width: 100%;
  height: 100%;
  background: url("images/jetons/jetonB.png");
  background-size: 90% 100%;
  background-position: 5.5px;
  background-repeat: no-repeat;
  z-index: 1 !important;
  position: relative;
}

#jetJ2 {
  opacity: 0.85;
  width: 100%;
  height: 100%;
  background: url("images/jetons/jetonR.png");
  background-size: 90% 100%;
  background-position: 5.5px;
  background-repeat: no-repeat;
  z-index: 1 !important;
  position: relative;
}

#jetJ3 {
  opacity: 0.85;
  width: 100%;
  height: 100%;
  background: url("images/jetons/jetonV.png");
  background-size: 90% 100%;
  background-position: 5.5px;
  background-repeat: no-repeat;
  z-index: 1 !important;
  position: relative;
}

#jetJ4 {
  opacity: 0.85;
  width: 100%;
  height: 100%;
  background: url("images/jetons/jetonO.png");
  background-size: 90% 100%;
  background-position: 5.5px;
  background-repeat: no-repeat;
  z-index: 1 !important;
  position: relative;
}

#nomj1 {
  color: rgb(14, 113, 226);
}

#nomj2 {
  color: red;
}

#nomj3 {
  color: green;
}

#nomj4 {
  color: orange;
}

#astuce_erreur {
  transition-property: margin-top, background, height;
  transition-duration: 0.5s;
  color: white;
  text-align: center;
  float: right;
  position: absolute;
  border: 2px solid white;
  margin-top: 185px;
  height: 0px;
  margin-left: 825px;
  z-index: -1;
  width: 254px;
  border-radius: 10px;
  background: rgba(219, 140, 18, 0.7);
}

#facebook {
  margin-bottom: 5px;
  margin-top: 30px;
  margin-left: 5px;
  margin-bottom: 20px;
  float: left;
  text-align: center;
  cursor: pointer;
}
#instagram {
  margin-bottom: 5px;
  margin-top: 30px;
  margin-left: 15px;
  margin-bottom: 20px;
  float: left;
  text-align: center;
  cursor: pointer;
}
#tiktok {
  margin-bottom: 5px;
  margin-top: 30px;
  margin-left: 18px;
  margin-bottom: 20px;
  float: left;
  text-align: center;
  cursor: pointer;
}
#siteMorpyam {
  margin-bottom: 5px;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 5px;
  float: left;
  text-align: center;
  cursor: pointer;
}
#dePlus {
  background: url("images/bg.jpg");
  border: black;
  float: left;
  width: 203px;
  height: 100%;
}

#Copyright {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  font-size: 5px;
  color: white;
  text-align: center;
}

.clign_z {
  display: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 4px solid red;
  -webkit-animation-name: clignote;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes clignote {
  from {
    border: 4px solid red;
  }
  to {
    border: 4px solid transparent;
  }
}

#win {
  color: white;
  border: 2px solid;
  padding: 50px;
  font-size: 25px;
  background: rgba(202, 106, 17, 0.5);
  margin-top: -107px;
}

#resume {
  font-size: 15px;
  background: rgba(24, 132, 210, 0.5);
  border: 2px solid white;
  padding: 5px;
}

#rej_fin {
  transition-property: background;
  transition-duration: 0.5s;
  background: rgb(157, 107, 16);
  padding-top: 46px;
  padding-bottom: 46px;
  font-size: 20px;
  width: 280px;
  border: 2px solid black;
  color: white;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
}

#rej_fin:hover {
  background: rgb(137, 75, 15);
}

#cache1 {
  transition-property: width, height;
  transition-duration: 1s;
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  margin-top: -189px;
  margin-left: 0px;
  z-index: 9999;
}

#cache2 {
  transition-property: width, height;
  transition-duration: 1s;
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  margin-top: 0px;
  margin-left: 0px;
  z-index: 9999;
}

#info_plus {
  margin-top: -60px;
  position: absolute;
  height: 570px;
  background: rgba(0, 0, 0, 0.7);
  width: 1100px;
  z-index: 1000000;
  text-align: center;
  display: none;
}

#info_plus_img {
  width: 500px;
  margin-top: 50px;
  border-radius: 10px;
}

#rdj {
  width: 805px;
  height: 380px;
  position: absolute;
  margin-left: 0px;
  margin-top: 0px;
  background: url("images/RDJ.jpg");
  background-size: 100% 100%;
  display: none;
  z-index: 10000 !important;
}

#info_prime {
  transition-property: width;
  transition-duration: 0.25s;
  position: absolute;
  height: 90px;
  margin-left: 205px;
  margin-top: 3px;
  background: url("images/prime.jpg");
  background-size: 100% 150%;
  background-position: 0px -25;
  width: 0px;
  z-index: 10000;
}

#info_nbj {
  width: 150px;
  position: absolute;
  height: 40px;
  margin-top: -50px;
  margin-left: 26px;
  background: url("images/cddt.jpg");
  background-size: 100% 100%;
}

#logo_jeu {
  position: relative;
  margin-top: -80px;
  margin-left: 210px;
  width: 280px;
  height: 60px;
}

#slogan_jeu {
  position: relative;
  width: 300px;
  height: 40px;
  margin-top: -50px;
  margin-left: 500px;
  z-index: 100000;
}

#mcom {
  position: relative;
  width: 265px;
  height: 40px;
  border-radius: 10px;
  margin-left: 820px;
  margin-top: -45px;
}

#mcom:hover {
  opacity: 0.5;
}

#info_plus_nbj {
  transition-property: width, height;
  transition-duration: 0.25s;
  position: absolute;
  width: 0px;
  height: 0px;
  margin-left: 206.25px;
  margin-top: 2px;
  background: url("images/cddt.jpg");
  background-size: 100% 100%;
  z-index: 10000;
}

#info_plus_logo {
  transition-property: height;
  transition-duration: 0.25s;
  position: absolute;
  width: 276px;
  margin-left: 210px;
  background: url("images/bdj.jpg");
  background-size: 100% 100%;
  height: 0px;
  z-index: 10000 !important;
}

#info_plus_slogan {
  transition-property: height;
  transition-duration: 0.25s;
  position: absolute;
  border: 2px solid black;
  width: 588px;
  margin-left: 210px;
  background: url("images/slogan_dev.jpg");
  background-size: 100% 100%;
  height: 0px;
  z-index: 100000 !important;
}

.loader {
  position: relative;
  margin: 0px auto;
  width: 100px;
  height: 100px;
  zoom: 1.7;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #d62d20;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}

#espace {
  width: 100%;
  height: 27%;
}
.social-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 5px;
}

.social-button {
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 17px;
}

.social-button:hover {
  background: rgba(255, 255, 255, 0.5);
}