/* style.css */

/* Importation de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton+SC&family=Francois+One&display=swap');


body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000000; /* Noir */
    color: #FFFFFF; /* Blanc */
}

#home, #game {
    text-align: center;
    width: 80%;
    margin: auto;
    background-color: #4CAF50; /* Vert */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #FFFFFF; /* Texte en blanc */
}

input {
    padding: 10px;
    width: calc(100% - 24px);
    margin: 10px 0;
    border: 1px solid #FFFFFF; /* Bordure blanche */
    border-radius: 5px;
    font-size: 16px;
    background-color: #FFFFFF; /* Blanc */
    color: #000000; /* Texte en noir */
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #388E3C; /* Vert plus foncé pour les boutons */
    color: #FFFFFF; /* Texte blanc */
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
   font-family: "Francois One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.parametres {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #388E3C; /* Vert plus foncé pour les boutons */
    color: #FFFFFF; /* Texte blanc */
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
   font-family: "Francois One", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration:none;
}

button:hover {
    background-color: #2E7D32; /* Vert encore plus foncé pour le hover */
}

h1, h2 {
    margin: 0 0 20px;
   font-family: "Francois One", sans-serif;
  font-weight: 400;
  font-style: normal;
    color: #FFFFFF; /* Blanc */
}

p {
    font-size: 18px;
    color: #FFFFFF; /* Blanc */
}

.question-text{
  font-size: 28px;
   font-family: "Francois One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* styles.css */

/* Style pour le logo */
.logo {
    display: block;
    margin: 0 auto 20px; /* Centre le logo et ajoute un espacement sous le logo */
    max-width: 150px; /* Limite la largeur maximale du logo */
    height: auto; /* Maintient les proportions de l'image */
    border-radius: 10px; /* Ajoute des coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre légère */
    transition: transform 0.3s ease-in-out; /* Animation douce pour l'effet de survol */
}

/* Effet de survol pour le logo */
.logo:hover {
    transform: scale(1.05); /* Agrandit légèrement le logo au survol */
}

/* Styles pour la question et les boutons */
.question-container {
    text-align: center; /* Centre le texte */
    animation: fadeIn 0.5s ease-out; /* Animation d'entrée */
}

.question-container.fade-out {
    animation: fadeOut 0.5s ease-out; /* Animation de sortie */
}

.question-container h2 {
    font-size: 1.5em; /* Ajuste la taille du titre */
    margin-bottom: 20px; /* Espace sous le titre */
}

.question-container p {
    font-size: 1.2em; /* Ajuste la taille du texte */
    margin-bottom: 20px; /* Espace sous le texte */
}

.question-container button {
    padding: 10px 20px; /* Ajuste le padding du bouton */
    font-size: 1em; /* Ajuste la taille du texte du bouton */
    background-color: #007bff; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte du bouton */
    border: none; /* Supprime les bordures du bouton */
    border-radius: 5px; /* Ajoute des coins arrondis */
    cursor: pointer; /* Change le curseur au survol */
    transition: background-color 0.3s ease; /* Animation douce pour la couleur de fond */
}

.question-container button:hover {
    background-color: #0056b3; /* Change la couleur de fond au survol */
}