/* flash_quiz.css 
For the HTML/JavaScript created to use data from a Flash quiz program written by CK.
Version 1.23 | 2026-02-13
legal location for this file is www.manythings.org.
*/

body { font-size: 1.3em; font-family: 'Times New Roman', serif; background-color: #f4f4f4; margin: 0; padding: 0 15px; transition: background 0.3s; box-sizing: border-box; }
body.dark-mode { background-color: #1a1a1a; color: #e0e0e0; }
body.dark-mode a:link, body.dark-mode a:visited { color: #cff; text-decoration: none; }
body.dark-mode a:hover { text-decoration: underline; }
a:link, a:visited { color: blue; text-decoration: none; }
a:hover { text-decoration: underline; }
#quiz-container { width: 100%; margin: 0 auto; padding: 20px 0; box-sizing: border-box; position: relative; }
/* Large centered status notification */
#status-overlay { 
position: fixed; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
font-size: 10em; 
opacity: 0.8; 
transition: opacity 0.5s ease; 
z-index: 2000; 
pointer-events: none; /* Prevents blocking clicks */
}
@media (max-width: 600px) {
body { padding: 0 10px; }
#quiz-container { padding: 10px 0; }
.score-bar { flex-direction: column; text-align: center; gap: 5px; font-size: 0.8rem; }
.bottom-nav { flex-wrap: wrap; }
.question-text { font-size: 1.2em; }
#status-overlay { font-size: 6em; } /* Smaller on mobile */
}
.score-bar { background: #444; color: white; padding: 12px; display: flex; justify-content: space-between; font-family: monospace; border-radius: 4px; margin-bottom: 15px; }
.question-header { display: flex; justify-content: space-between; color: #444; font-size: 1.1rem; margin-bottom: 10px; border-bottom: 1px solid #ccc; }
.question-text { font-size: 1.4em; font-weight: normal; margin: 20px 0; line-height: 1.4; text-align: left; }
body.dark-mode .question-header { display: flex; justify-content: space-between; color: #eee; font-size: 1.1rem; margin-bottom: 10px; border-bottom: 1px solid #ccc; }
.choices-grid { display: grid; gap: 12px; margin-bottom: 30px; }
.choice-btn { padding: 15px; border: 1px solid #aaa; background: #fff; cursor: pointer; text-align: left; border-radius: 5px; font-family: inherit; }
body.dark-mode .choice-btn { background: #666; color: #fff; }
.choice-btn.correct { background-color: #d4edda !important; border-color: #28a745 !important; color: #155724 !important; font-weight: bold; }
.choice-btn.wrong { background-color: #f8d7da !important; border-color: #dc3545 !important; color: #721c24 !important; }
.bottom-nav { display: flex; justify-content: center; gap: 10px; border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; }
.nav-btn, .start-btn, .next-btn { background: #ddd; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-family: inherit; border: none; }
.next-btn { background: #007bff; color: white; font-size: 1.2rem; }
.start-btn-green { background: #28a745; color: white; border: none; }
.start-btn-large { padding: 15px 40px; font-size: 1.5rem; font-weight: bold; }
.hidden { display: none !important; }
.modal-content { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 25px; border: 3px solid #333; z-index: 1000; width: 340px; max-width: 90%; border-radius: 10px; color: #333; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999; }
.setting-row { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }