/* styles.css */

body {
    font-family: Arial, sans-serif; /* Définit la police principale */
    background-color: #f5f5f5; /* Définit la couleur de fond */
    margin: 0;
    padding: 20px; /* Ajoute un espace de 20px autour du contenu */
}

.container {
    max-width: 600px; /* Définit la largeur maximale du conteneur */
    margin: auto; /* Centre le conteneur */
    background: white; /* Définit le fond blanc */
    padding: 20px; /* Ajoute un espace interne de 20px */
    border-radius: 8px; /* Arrondit les coins */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
}

h1 {
    text-align: center; /* Centre le texte */
    color: #333; /* Définit la couleur du texte */
}

#question-container {
    margin-top: 20px; /* Ajoute un espace au-dessus du conteneur */
}

button {
    display: block; /* Affiche le bouton en tant que bloc */
    width: 100%; /* Prend toute la largeur disponible */
    padding: 10px; /* Ajoute un espace interne de 10px */
    margin: 10px 0; /* Ajoute un espace externe de 10px en haut et en bas */
    border: none; /* Supprime la bordure */
    border-radius: 4px; /* Arrondit les coins */
    background-color: #007BFF; /* Définit la couleur de fond */
    color: white; /* Définit la couleur du texte */
    font-size: 16px; /* Définit la taille de la police */
    cursor: pointer; /* Change le curseur au survol */
}

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

#result-container {
    margin-top: 20px; /* Ajoute un espace au-dessus du conteneur */
    text-align: center; /* Centre le texte */
}

#result-container a {
    display: block; /* Affiche le lien en tant que bloc */
    margin-top: 10px; /* Ajoute un espace au-dessus du lien */
    color: #007BFF; /* Définit la couleur du lien */
    text-decoration: none; /* Supprime le soulignement */
}