#login-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
  }
  

  .custom-button-color {
    background-color: #ffffff; /* Couleur rouge */
    border-color: #ff0000; /* Bordure de même couleur que l'arrière-plan */
  }
  
  /* Change la couleur du bouton lors du survol */
  .custom-button-color:hover {
    background-color: #ffffff; /* Couleur rouge */
    border-color: #e60000;
  }
  


  #video-container {
    margin-top: 20px;
  }

  


  html, body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden;
  }
  body { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: #000; 
  }
  main {
    display: flex;
  }
  p {
    line-height: 1;
  }
  span {
    display: block;
    width: 2vmax; 
    height: 2vmax; 
    font-size: 2vmax; 
    color: #9bff9b11;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
  }



  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Utilisez 100% de la hauteur de l'écran */
  }
  
  .centered-image {
    max-width: 100%; /* L'image ne dépassera pas la largeur de son conteneur */
    height: auto; /* Pour maintenir l'aspect ratio de l'image */
    max-height: 100vh; /* Optionnel: Si vous voulez que l'image soit pleine hauteur */
  }
  
  /* Autres styles... */

@keyframes fadeInScaleUp {
  from {
    transform: scale(0.5); /* Commence à 50% de la taille originale */
    opacity: 0; /* Commence complètement transparent */
  }
  to {
    transform: scale(1); /* Finit à la taille originale */
    opacity: 1; /* Finit complètement opaque */
  }
}

.centered-image {
  /* Styles existants... */
  animation: fadeInScaleUp 1s ease-out forwards; /* Applique l'animation sur 1 seconde */
}