/* style.css - Styles principaux */
@font-face {
    font-family: adigianaui;
    src: url(assets/fonts/adigianaui.ttf);
  }

@font-face {
    font-family: crackman;
    src: url(assets/fonts/CRACKMAN.ttf);
  }

@font-face {
    font-family: samurai;
    src: url(assets/fonts/go3v2.ttf);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    line-height: 1.6;
    font-size: 1.5vmax;
    word-wrap: break-word; /* Ensure long words will break to the next line */
    overflow-wrap: break-word; /* Standard property for breaking long words */
    white-space: normal; /* Ensure the text will wrap normally */
    text-align: center;
    text-shadow: .025em .025em 0em rgba(161, 0, 0, .5);
}
html {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    display: flex;
    flex-wrap: wrap; /*envoyer à la ligne le contenu qui dépasse*/
    justify-content: center; /*alignement horizontal*/
    background-color: #f5f2ea;
}

body {
  background: center / contain no-repeat fixed url(assets/images/bg_no_samurai.jpg);
    color: #0e2236;
}
.fun {
  font-family: 'samurai', sans-serif;
}
.serious {
  font-family: Helvetica, sans-serif !important;
}
section {
    margin: 25px;
    padding: 25px;
    box-shadow: .1em .25em .25em rgba(161, 0, 0, .5);
    border-radius: 50px;
    background-color: rgba(245, 242, 234, .5);
    max-width: 1000px;
}
a {
    color: white;
}
a:hover {
    
}
.shop {
  max-width: 150px;
}
.shop:hover {
  box-shadow: .1em .1em 1em rgba(161, 0, 0, .75);
}
.lower {
  font-size: 1vmax;
  font-style: italic;
}
/* ### Multiple container ### */
.multiple_container{
    display: flex;
    flex-wrap: wrap; /*envoyer à la ligne le contenu qui dépasse*/
    justify-content: center; /*alignement horizontal*/
    align-items: center; /*alignement vertical*/
  }
  .multiple_text {
    max-width: 512px;
  }
  .multiple_img img{
    max-width: 512px;
    border-radius: 25px;
    box-shadow: .1em .25em .25em black;
  }

  .gif_img img {
    width: 50px;
  }

  .play_button {
    background: #0e2236;
    border-radius: 50px;
    width: fit-content;
    margin: 15px auto;
    box-shadow: .1em .25em .25em black;
  }
  .play_button:hover {
    background: #a10000;
  }
  .play_button a {
    margin: auto;
    padding: 5px 15px;
    display: block;
    width: 100%;
  }
#intro h1 {
    font-size: 5vmax;
}

#login h1 {
  font-size: 4vmax;
}
#login .text_input {
  width: 10em;
  border-radius: 15px;
  margin: 15px;
  text-shadow: none;
}

#login .submit_input {
  color: white;
  background-color: #0e2236;
  border-radius: 25px;
  box-shadow: .1em .25em .25em black;
  padding: 0 15px;
}
#login .submit_input:hover {
  background: #a10000;
  cursor: pointer;
}

  #jeetbuster_leaderboard, #leaderboard {
    max-height: 1000px;
    overflow-y: scroll;
  }

#leaderboard table {
  width: 50%;
  margin: auto;
}
#leaderboard tr, #leaderboard_admin tr{
  box-shadow: .05em .05em .1em rgba(161, 0, 0, .5);
}
#leaderboard td{
  padding: 5px 15px;
}
#leaderboard thead>tr{
  box-shadow: none;
}
#leaderboard_admin {
  max-width: 100%; /* Limite la largeur au conteneur parent */
  margin: auto; /* Centre le tableau */
  overflow: hidden; /* Empêche le défilement */
}

#leaderboard_admin table {
  width: 100%; /* Étend le tableau pour occuper 100% de la largeur */
  border-collapse: collapse; /* Fusionne les bordures pour une meilleure présentation */
  table-layout: fixed; /* Fixe les colonnes pour éviter l'étirement */
}

#leaderboard_admin th, #leaderboard_admin td {
  padding: 5px; /* Ajoute un peu d'espacement pour la lisibilité */
  text-align: center; /* Centre le contenu */
  font-size: calc(8px + 0.5vw); /* Réduit dynamiquement la taille du texte */
  word-break: break-word; /* Coupe les mots longs pour éviter le dépassement */
}

#leaderboard_admin th {
  font-weight: bold; /* Met en gras les en-têtes */
}

  /********************/
  /* Animation games */
  /******************/
  .backwrap {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
  }
  
  /* Shapes & Animation
  */
  .back-shapes {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .floating {
    position: absolute;
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  .floating.circle {
    display: inline-block;
    width: 39px;
    height: 39px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAYAAACMo1E1AAAABHNCSVQICAgIfAhkiAAAA0pJREFUWIXdmL1O40AQx8fZ5BxQCqRrLqKxqKjAOl0JvMHxBIjHyCu4dGkJ+khpQNa9QeTyZIkihbtYCKWwbC1KFXbtvYJxbrIYMOBD1o20UhDe//x2dnb2w1BKQVut25SQYRhG+Vs1NGLjvToI0yHNwKawFWV7L+yb4AhQFwC6QRB8tyzrxDTN3V6vN2SMfc3zPBVCLFar1d18Pp8eHR2FACCxvQ1UKfVqg8eIMADo+75/kKbphRDiVtUwIcRtmqYXvu8fAEAfdYxafmuC9TzPs5IkuSyK4qEOlG5FUTwkSXLpeZ4FAL06gHXA+mEYnkops1f851LKe6VU/tJHUsosDMNTjOKLgK+CxXE8KopCVDjhWZZNZrPZ2Xg83rdtewcABrZt74zH4/3ZbHaWZdlESskroijiOB69BvgSmBnH8ahq9JzzK8dxLBTvweZqLRdNDwD6juNYnPOrKh0ENJ8DfDbHwjA81SMmpUyiKDoHgO06iU0W0nYURedSykSPIE5xZQ5WCTLP8yw9x5bL5dR13b26yVw1YNd195bL5VQbcIaLhL0IV+ZZkiSXesQQrPtWME2767runh7BJEkuq/LvSdR83z/QywVO5Zf3gmmAX6IoOtem9wHr4Eb09M5mmqYXtCPn/AoAtgCg8xEw4qMDAFv6IknT9AIAzEo4HNWAVn4pJcdV+SQfPgjIHMexaJkRQtwCwIDOzkaHIAiO6WiyLJvUKZbvnN5+lmUT6i8IgmMaiA7ZZpllWSd0310sFr8AIFeo2JShXo76a0P/rPybwhmmae7Sj29ubn4DQN4kGLEc9deG/tfnwo0wc86vSZRz3JIanVI6tbZt7yiyF3POr4Gk0QYcLZBSynvQEvQf5N0ADwtKqcdCT+HotEKe52n5mzE2sG27sWN8ldm23WWMDar8A2DOYYIqIcSC/m80Gn0DmgPNmoH66wChf1UuQBo5tVqt7mjvw8PDH0BWT8PGUH9t6H9dGShcPp/Pp/Tj4XD4EwAYvVk1YajHUH9t6P9vddATtJU7BHZq595ajqjNp5L2nufK6LXyJEyFWnmHIKLtu31pgO27t+qArbvxa4DteyvRAD/9lanV73P/z8tmDVgAaMGb8GfYHwpq7kYvpXclAAAAAElFTkSuQmCC");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.25;
  }
  .floating.square {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAABHNCSVQICAgIfAhkiAAAAUNJREFUWIXt2DFugzAUBuD/EVMGJMyQsZ3aA+QQ3ZjrIzKQgYWD5ACVOjRjBkBiSHF4XRJEIzmBCgiD/83Ysj9ZxrJNzIylRHQLREQAaMbxmTuz0WKUUk9Zlj0XRbHSWk8OEkKwlPKklNonSfLTYojISdP0JYqiz6kR16nr+o2Ivpi5cS4fy7JczQ25Hte51XDuCFOF1vpQVdWOiEb73ZiZfN/fCCHWgzBVVe3CMPwAcAQwBogAeHmeb6WU74Mw5xk5jozBrZk2Yjr5sxf8W0L3d4tFLWCLMcViTLEYUyzGFIsxxWJMsRhTFoXpc7iiPgejPv3ca2DEMDMB8C7FkTDeud9hGN/3N3meb6e4HQzGCCHWplP8VFnUAm4xQRCcHgHojisAgJkbpdS367qvc79CxHG8Z+YGAKh7JXr0+wwt6eXqFzNGfAM6wJFPAAAAAElFTkSuQmCC");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.25;
  }
  .floating.triangle {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAjCAYAAAAJ+yOQAAAABHNCSVQICAgIfAhkiAAABARJREFUWIXNVj2IGlsU/sa/3XWDRWCICyFNTF4Rq7AQSJUmiKRN2rAuBlKlM03gRV4lj9hYmSLwigQMCA9iZcAmNrIpDLurNiNKoiiODE+HmXXezNz7ird3ubvPdf17cQ9MMXfunPud75zvniNQSnHZzbFqANPYUkEKguDY3t52C4Kw3OAppUt5ADjC4bBP1/U/w+GwD4Bjab6XBFAAsNZqtV5RSmmr1XoFYA2AcJlAOlOp1E3btgeUUmrb9iCVSt0E4LwUII9Z3FAU5T3lTFGU9wA2lsHmMkC6isXiA0qpTU+bXSwWHwBwrRQk/r0dNnVd/0rHmK7rXwFsLiqiRUF66vX6cx7Y0dGRxL/X6/XnADwrAQnAEYvF/KZpdhkgwzB+7O7u/mIYxg+2ZppmNxaL+Rdhc16AAoD1Xq+X4lmr1Wo7ADZrtdoOv97r9VIA1ucV0bwgnblc7i4hxGBANE0rHtefE8CmpmlF9o0QYuRyubvzXklzpRmAV1XVzxwIq1Ao3GdKBuAqFAr3CSEW26Oq6mcA3nnSPg9Id6VSecKns9/vv+PTycqh3++/4/dVKpUnANz/K0gAjlAodNUwjBMFW5alJBKJG2cZAuBIJBI3LMtS2F7DMKRQKHR1VjZnFctau91+zbPTbDZj510xADzNZjPG72+3269n7esziSWdTt+ybVtlB45Go0ogEDh34gHgCAQCvtFoVGH/2LatptPpW7OIaBYWNxRF+cizUi6XH13U9gC4yuXyI/4/RVE+ztLXpwXpKpVKDymlhB00GAw+TXMQC3AwGHzicJJSqfRw2r4+lVhEUbyi6/q3kxMIOcpkMsFpUwbAmclkgoSQI+ZD1/VvoihemUZE0xzgaTQaL/h0dTqdN7MUPxNdp9N5w/tpNBovpunrF7IYj8evW5YlM8emabaj0ei1ma8RwBGNRq+ZptlmvizLkuPx+PWLfF0U/bosy2/56CVJejbvVAPAI0nSM96fLMtvL+rrE8WSz+fvEUJM5lDTtL1F5kM2f2qatsd8EkLMfD5/b5KIJjpTVfULF/RSJu1xk7yqql8mBX+eI3e1Wn3Kp0VRlA+z3G0TQLI79wPvv1qtPj2vr49lMRKJiIZhfD+h0LaHyWTyNgDP8Si26ONJJpO3bdsesjMMw/geiUTEcWyyqQUAIAiCAMDT6XR+8/v9L9m6LMvZw8PDP3w+n4kl2XA4dAeDwR1RFB+ztW63+/vW1tavAP6mPLAzLDqz2ewdQohOV2CEED2bzd7BmSbxn1o5075+uo1rt6dYlCQpvEqAzCRJCvNsurgyIfv7+3sHBwcBXdcdlmUJy6q/ac3lclGv10sopX8BIGx9nHB+OrgxRikH7BTIy2r/AAlu0j5Iy8AaAAAAAElFTkSuQmCC");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.25;
  }
  .floating.cross {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAAABHNCSVQICAgIfAhkiAAAAgJJREFUWIXN2MFO4zAQBuDfbSpaiUOvvTRS3w6EoEChwAvsZS9IvAnwOK5rV5V7Se8cNrOHNVXWpMk4caEj5dDInvkySeMkgohwbNH5aUBZJP4OIYQA0HU//9ABWllXo+MN7gDobzab+/V6fQbgxCWIDTqx1k6ttdPSGkQEBxUABsaYJ/oXuZTyGkAfgPgc12ZzNfpa6zkR5USUa63nfo3ihMRae0f/Ry6lvIkBKwHtalhrZwCSz7H+hU5u23V7Mpn8llKel7Y58JRpra/G4/EvB9wfjCMhIsoXi8Vtk47V5a08fZwEy+UyCNYE9AUVE9YUVIpiwmZVsDagvag2sLagShQTdlcsEANUiwqEJTFALBSzA/cAhjFAbBQHlmXZWwxQEIoB86MRKBhVgA2UUg8VsFwp9QBgEApqhHKwLoBhlmXvZaLtdvsKYAig2yj/ATs1/5ZOhV5T/n0sOorx73sv298EFgXk/mV771N1a2UwKmDpqLyjh8BigVhrH/uxJxaIO48Diwrizq97tI4O4uapeks6CKgt7GAgbl6l1NTPW5ycWGtnMUFc2Gq1ukTFy6gfZIx5TNP0GcAHuQqh4eZ9pGn6bIx5hPfC2+v1Tv0J+46mdYc4HTPGPMFbuEXx4AtfRC4AYDQavbTpUFl4NUShRr4b49c7hu9TX1DHEEf5efEvSKr5qd+QqggAAAAASUVORK5CYII=");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.25;
  }
  
  @keyframes floating {
    0% {
      transform: translateY(0%) rotate(-55deg);
    }
    50% {
      transform: translateY(300%) rotate(55deg);
    }
    100% {
      transform: translateY(0%) rotate(-55deg);
    }
  }
  @-webkit-keyframes floating {
    0% {
      -webkit-transform: translateY(0%);
    }
    50% {
      -webkit-transform: translateY(300%);
    }
    100% {
      -webkit-transform: translateY(0%);
    }
  }