body { background: white; margin-bottom: 30vh; } :root { --primary: #4f46e5; --correct: #16a34a; --incorrect: #dc2626; --bg: #f8fafc; --card: #ffffff; --text: #1e293b; --muted: #64748b; } .container-small { max-width: 750px; padding: 1rem; } .content { border: none; padding: 0; margin: 2rem auto; } .hero { display: block; min-height: 75vh; } .hero-title { display: block; margin: 2rem auto !important; line-height: 200%; } .hero-title b { display: block; } .hero-title b:nth-child(1) { font-size: 3rem; font-weight: 900; color: orange; margin: 2rem 0; } .hero-title b:nth-child(2) { font-size: 2.5rem; margin: 1rem 0; } .hero-title b:nth-child(3) { font-size: 2rem; font-weight: 100; } .hero::before { content: "\1F3C6"; font-size: 15rem; } .hero-title::before { content: "\275D"; text-align: left; } .hero-title::after { content: "\275E"; text-align: right; } .hero-title::before, .hero-title::after { display: block; color: orange; font-size: 3rem; } div.12 { width: 100%; } #start { display: block; background: white; position: fixed; bottom: 0; left: 0; right: 0; height: 20vh; border: none; cursor: pointer; } #start b { padding: 2rem 5rem; font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 0 1rem 0 transparent; animation: breathe 4s ease-in-out infinite; } #start b:hover { box-shadow: 0 0 1rem 0 gold; cursor: pointer; } div.background-muted.padding-small.text-center .button.button-danger.button-large.text-white { display: none !important; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); /* softer breathe – change to 1.15 or 1.2 if you want stronger */ } } @media (max-width: 768px) { #start b { padding: 1.5rem 1rem; font-size: 2rem; border-radius: 1rem; } .hero::before { font-size: 10rem; } .hero-title::before, .hero-title::after { display: none; } } /* ===== MCQ SECTION ===== */ section.mcqs details.mcq { background: var(--card); border: 1px solid #e2e8f0; border-radius: 12px; margin: 2rem 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } details.mcq>summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-weight: 500; display: flex; gap: 0.75rem; align-items: flex-start; user-select: none; } details.mcq>summary::-webkit-details-marker { display: none; } .mcq-index { background: var(--primary); color: white; font-size: 1rem; width: 2rem; height: 2rem; line-height: 2rem; flex-shrink: 0; text-align: center; border-radius: 5px; } .mcq-q {overflow: auto; max-width: 650px; padding-bottom: 1rem;} ol.mcq-options { list-style: none; padding: 0 1.25rem 1rem; counter-reset: option; } ol.mcq-options li { counter-increment: option; cursor: pointer; transition: all 0.2s ease; overflow: auto; max-width: 700px; display: flex; border: 1px solid #ddd; padding: 1rem; border-radius: 1rem; font-size: 1rem; line-height: 2rem; gap: 1rem; } ol.mcq-options li::before { content: counter(option, upper-alpha); display: inline-block; background: #eee; color: #444; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; border-radius: 50%; flex-shrink: 0; } ol.mcq-options li:hover:not(.selected) { border-color: #c7d2fe; background: #eef2ff; } /* Click animation */ ol.mcq-options li.clicked { animation: optionPulse 0.35s ease; } @keyframes optionPulse { 0% { transform: scale(1); } 40% { transform: scale(0.96); } 100% { transform: scale(1); } } /* Correct / Incorrect states */ ol.mcq-options li.correct-selected { border-color: var(--correct); background: #f0fdf4; } ol.mcq-options li.correct-selected::before { background: var(--correct); color: white; } ol.mcq-options li.incorrect-selected { border-color: var(--incorrect); background: #fef2f2; } ol.mcq-options li.incorrect-selected::before { background: var(--incorrect); color: white; } /* Answer panel */ .answer { display: none; padding: 1rem 1.25rem; margin: 0 1.25rem 1.25rem; background: #f1f5f9; border-left: 4px solid var(--primary); border-radius: 0 8px 8px 0; font-size: 0.95rem; color: #334155; } .answer.show { display: block; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ===== FORMULAS SECTION ===== */ section.formulas { margin-top: 3rem; background: var(--card); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; } /* Confetti canvas */ #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } h1, h2, h3, h4, h5, h6 {margin: 2rem 0 !important; background: none !important; padding: 1rem 0 !important;} .action1 {text-align: center; background: #f8f8f8; padding: 1rem 0;} summary {cursor: pointer; padding: 1rem 0;} .margin-top-large {margin-top: 0 !important;}