:root {
    --colorchoisie: rgb(213, 213, 204);
    --colorchoisienoir : black;
    --fontBig : 1.3rem;
    --backscreencolor: rgb(27, 26, 26);
  }
  
  .passcode  {
    font-size: 3rem;

  }



  /* Utilisation de la variable */
  p {
    color: var(--colorchoisie);
    font-size: var(--fontBig) ;
  } 
  
  .textSvgFx:hover {
    filter: url(#neon2);
  
  
  }
body {
    margin :2px;    
    padding: 0;
    display: flex; /* Utilise Flexbox pour la disposition */
    min-height: 100vh; /* Assurez-vous que le body prend au moins toute la hauteur de la fenêtre */
}

.center-with-margin {
    margin: 4rem 0; /* Marge verticale seulement pour ne pas affecter le centrage horizontal */
    text-align: left;
    flex: 1; /* Assurez-vous que cet élément prend l'espace disponible */
    justify-content: center; /* Centre verticalement les éléments */
    align-items: center; /* Centre horizontalement les éléments */

  }

  .center-with-margin2 {
    margin: 4rem 0; /* Marge verticale seulement pour ne pas affecter le centrage horizontal */
    text-align: left;
    flex: 1; /* Assurez-vous que cet élément prend l'espace disponible */
  
  }

#starspass,  #output {
    width: 90%; /* Assurez-vous que ces éléments prennent toute la largeur disponible */
    text-align: left; /* Centre le texte à l'intérieur de ces éléments */
    /* top:40vh;
    left: 20vw; */
    justify-content: right; /* Centre verticalement les éléments */

  }

#lockpenta {
    width: 30%; /* Largeur du SVG */
    height: auto; /* Hauteur ajustée pour maintenir les proportions */
    top:25vh;
    left:50vw;
    position: absolute;
  }

  .infopass {
    left: 10vw;
    top: 10vh;
    position: fixed;

  }
  #saisiediv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }

  #saisiediv > * {

    margin-bottom: 5vh;
  }


  
 /* POLICE COLOR ----- BACKGROUND ----- */
 /*color:rgb(29, 247, 109);*/

 .bodystylelock{
    background: linear-gradient(147deg,  #171818 58%, var(--colorchoisie) 100%);
     /* background-attachment: fixed; */
    box-sizing: border-box; 
    touch-action: pan-y;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
    background: linear-gradient(147deg, #171818 58%, var(--colorchoisie) 100%);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--colorchoisie)
  }
   
 
 
  .buttonrr {
  padding: 10px 20px;
  display: inline-block;  /* 🔥 Permet d'agir correctement sur <a> et <button> */
  background-color: #22f8eaca;
  border: none;
  color: black;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 1.2em  rgb(20, 255, 228);
  border-radius: 8px ;
  margin: 3rem;
  text-decoration: none;  /* ❌ Supprime le soulignement des liens */
  }

.buttonsaas {
  flex :1;
  position: relative;
  margin: 2rem;
  top: 55vh;
  left: 24vw;

}


  #startSequenceButton {
    position: absolute;
    top: 22vh;
    left: 60 vw;
    align-items: center; /* Centre horizontalement les éléments */

  
  }
  
  /*BARRE DE RECHERCHE Style du bouton lors du survol */
  .buttonrr:hover {
  background-color: #13719c;
  box-shadow: 0 0 0.6em rgb(0, 200, 124), 0 0 10px rgb(0, 218, 218), 0 0 15px #0ff, 0 0 20px rgb(0, 255, 225), 0 0 25px #0ff, 0 0 30px #0ff, 0 0 35px #0ff;
  
  }  




/* ANIMATE PENTAGONE


/* animation dans le petit pentagone de laccuiel*/
@keyframes blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
  }
  
  
  #linepenta1 {
  animation: blink 3.5s infinite;
  }
  
  #linepenta2 {
  animation: blink 4s infinite;
  animation-delay: 1.5s;
  }
  
  
  #linepenta3 {
  animation: blink 4s infinite;
  animation-delay: 2.5s;
  }
  
  #linepenta4 {
  animation: blink 4s infinite;
  animation-delay: 2s;
  }
  
  #linepenta5 {
  animation: blink 4s infinite;
  animation-delay: 3s;
  }
  
  
  /* sur GlockDuPenta */
  @keyframes spin {
  from {
  transform-origin: 30% 50%;
  transform: rotate(0deg) scale(0.5) translate(-20px, 40px);
  }
  to {
  transform-origin: 30% 50%;
  transform: rotate(360deg) scale(0.5) translate(-20px, 40px);
  }
  }
  
  .spin {
    animation: spin 6s linear infinite;
  
  }
  
  
  @keyframes spinReverse {
    from {
      transform-origin: 30% 50%;
      transform: rotate(360deg) scale(0.5) translate(-20px, 40px);
    }
    to {
      transform-origin: 30% 50%;
      transform: rotate(0deg) scale(0.5) translate(-20px, 40px);
    }
  }
  
  
  .spin-reverse {
    animation: spinReverse 2s linear infinite;
  }