body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: black;
    color: white;
}

.container {
    text-align: center;
    margin-top: 20%;
}

#pseudonymeRappel, #playerId, #footerLink {
    font-size: 18px;
    color: #DBD6EC;
    padding: 10px;
}

a {
    font-size: 18px;
    color: #DBD6EC;
}

#pseudonymeInput, button {
    font-size: 18px;
    padding: 10px;
    margin: 5px;
}

button {
    cursor: pointer;
    border: none;
    border-radius: 5px;
}

button:hover {
    opacity: 0.8;
}

#boutonA {
    background: linear-gradient(to bottom, #4a90e2, #135cb7);
    color: white;
}

#boutonB {
    background: linear-gradient(to bottom, #ff9f00, #e66f00);
    color: white;
}

#boutonC {
    background: linear-gradient(to bottom, #2ecc71, #27ae60);
    color: white;
}

#boutonD {
    background: linear-gradient(to bottom, #f3c300, #f39c12);
    color: black;
}

#boutonE {
    background: linear-gradient(to bottom, #660066, #993366);
    color: white;
}

#boutonF {
    background: linear-gradient(to bottom, #ff1a1a, #ff4d4d);
    color: white;
}

#boutons button {
    margin: 20px;
    font-size: 36px;
    padding: 20px 40px;
    border-radius: 10px;
}

.hidden {
    display: none;
}


/* Background animé */

.bg {
  display: flex;
  justify-content: center;
  background-size: 300% 300%;
  background-image: linear-gradient(-45deg, blue 10%, blue 20%, blue 30%, #15af49 100%);
  -webkit-animation: AnimateBG 20s ease infinite;
          animation: AnimateBG 20s ease infinite;
}

@-webkit-keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}