.quiz-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.quiz-item {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}
.quiz-item:hover { transform: translateY(-4px); }
.quiz-thumbnail { border-radius: 8px; width: 100%; height: auto; }
.quiz-title { font-size: 1.2em; margin-bottom: 10px; }
.quiz-link { color: #0073aa; text-decoration: none; }
.quiz-link:hover { text-decoration: underline; }




.question-box { max-width: 600px; margin: auto; padding: 20px; }
.question-box h2 {text-align:center}
.answers button { display: block; margin: 10px auto; padding: 10px 20px; width: 200px; font-size:20px;background:#e8f4fc;border-radius:5px}
.answers button:not(.selected):hover { background:#ffcb60; cursor:pointer }

button#check, button#next { display: block; margin: 20px auto; padding: 10px 20px; width: 200px; font-size:20px;background:#156aac;color:#ffffff;border-radius:5px}
button#check:hover, button#next:hover { background:#ff6600; cursor:pointer}

.answer.selected {
    background: #156aac;
    color: white;
    border: 2px solid #125a91;
}
        .answer.correct { background: #03ac13; color: white; border-color:#03ac13}
        .answer.incorrect { background: #f00020; color: white; border-color:#f00020}
        .hidden { display: none; }