#clash-quiz {
    background-color: #f0f4f8;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    margin: 20px auto;
}

.quiz-button {
    background-color: #f39c12;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.quiz-button:hover {
    background-color: #e67e22;
}

#start-quiz, #restart-quiz {
    background-color: #3498db;
    font-size: 18px;
    padding: 15px 30px;
}

#start-quiz:hover, #restart-quiz:hover {
    background-color: #2980b9;
}

#question-container {
    font-size: 18px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #dce4e6;
    border-radius: 10px;
}

#answer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.answer-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.answer-button:hover {
    background-color: #2980b9;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#quiz-content, #end-screen {
    animation: fadeIn 0.5s ease-in-out;
}

.answer-button {
    transition: transform 0.1s ease-in-out;
}

.answer-button:active {
    transform: scale(0.95);
}

#top-scores-container {
    background-color: #34495e;
    color: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

#top-scores-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
}

#top-scores-table th, #top-scores-table td {
    padding: 10px;
    text-align: left;
}

#top-scores-table th {
    background-color: #2c3e50;
}

#top-scores-table tr:nth-child(even) {
    background-color: #435c78;
}

#top-scores-table tr:nth-child(odd) {
    background-color: #3d5369;
}

/* Media query pour petits écrans */
@media (max-width: 600px) {
    #share-buttons {
    text-align: center; /* Centre les boutons horizontalement */
}

#share-buttons button {
    width: 100%; /* Ajuste la largeur du bouton, ici 80% de la largeur du conteneur */
    /*max-width: 300px;  Optionnel, limite la largeur maximale du bouton */
    font-size: 16px; /* Ajuste la taille de la police si nécessaire */
    margin: 0 auto 10px; /* Centre chaque bouton et ajoute un espace en bas */
    display: block; /* Assure que les boutons sont des blocs pour utiliser margin auto */
}