/*POLICES*/

@font-face {
  font-family: "pacifico";
  src:
    local("pacifico"),
    url("./assets/police/Pacifico/Pacifico-Regular.ttf");
}

/* styles.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

h1, h2{
  font-family: pacifico, Arial, sans-serif;
  font-size: 2.5em;
  color: #ff00aa;
}

header {
  background-color: #68107e;
  color: white;
  padding: 1rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.burger-menu {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  align-self: flex-start; /* Place le menu à gauche */
}

.bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
}

.menu {
  list-style: none;
  display: none;
  position: absolute; /* Position absolue pour le déplacer hors du flux normal */
  background-color: #ff27e2be;
  padding: 1rem;
  top: 0;
  left: 0; /* Place le menu à gauche */
  transform: translateX(-100%); /* Cache le menu hors de l'écran */
  transition: transform 0.3s ease; /* Ajoute une transition fluide */
  width: 168px;
}

.close-icon {
  cursor: pointer;
  font-size: 24px;
  text-align: end;
}

.close-icon-hidden {
  display: none; /* Par défaut, l'icône de fermeture est cachée */
}

.menu.active {
  display:block;
  transform: translateX(0); /* Affiche le menu en le déplaçant vers la gauche */
}

.menu li {
  margin-bottom: 1rem;
}

.menu li a {
  text-decoration: none;
  color: white;
}

.menu li a.active {
  font-weight: bold; /* Exemple de style pour le lien actif */
  /* color: blue; Exemple de couleur pour le lien actif */
}

h1{
  text-align: center;
}

.main {
  padding: 2rem;
}

.cards{
  margin-top: 7%;

}

.card {
  background-color: #fcccfd;
  padding: 1rem;
  border-radius: 8px;
  margin: auto;
  margin-bottom: 1rem;
  width: 50%;
  text-align: center;
}

.play-button, .valid-button {
  display: inline-block;
  background-color: #db0ab8;
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 4px;
}

.input-reponse{
  height: 2em;
  border-radius: 5px;
  border-color: #68107e00;
  text-align: center;
  max-width: 50%;;
}

.bold-text{
  font-weight: bold;
}

.heighter-text{
  font-size: x-large;
}

#confetti-canvas {
  position: fixed; 
  z-index: 999; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  pointer-events: none;
}

#emoticone-pleure{
  display: block;
  position: absolute;
  left: 45%;
  bottom: 50%;
  margin: auto;
  visibility: hidden;
  opacity: 0;
}

#en-construction, img{
  display: block;
  margin: auto;
  text-align: center;
}

@media (max-width: 950px){
  .card{
    width: 70%;
  }

  #valider{
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .input-reponse{
    max-width: 70%;
  }

  #emoticone-pleure{
    left: 35%;
  }
}