.quiz-card {
transition: all 0.3s ease;
}
.quiz-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
.form-check-input:checked + .form-check-label {
font-weight: 600;
color: var(--bs-primary);
}
.options-container {
max-width: 600px;
margin: 0 auto;
}
#timer {
font-family: 'Courier New', monospace;
font-weight: bold;
}
@media (max-width: 768px) {
.display-5 {
font-size: clamp(1.8rem, 3vw, 2.5rem);
}
.btn-lg {
padding: 0.5rem 1rem;
font-size: 1rem;
}
.quiz-card {
margin-bottom: 1.5rem;
}
}
@media (max-width: 768px) and (orientation: landscape) {
.display-5 {
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}
.btn-lg {
padding: 0.4rem 0.8rem;
font-size: 0.95rem;
}
}
@media (max-width: 480px) and (orientation: landscape) {
.display-5 {
font-size: clamp(1.4rem, 2.5vw, 2rem);
}
.btn-lg {
padding: 0.3rem 0.6rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) and (orientation: portrait) {
.display-5 {
font-size: clamp(1.5rem, 2.7vw, 2.1rem);
}
.btn-lg {
padding: 0.4rem 0.8rem;
font-size: 0.95rem;
}
}
.quiz-reinforcement .form-check-input:checked + .form-check-label {
color: var(--bs-warning);
}
.quiz-random .form-check-input:checked + .form-check-label {
color: var(--bs-primary);
}
.quiz-normal .form-check-input:checked + .form-check-label {
color: var(--bs-primary);
}