style.css

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Courier New', monospace; }
body { background-color: #fff; padding: 2rem; color: #000; }
.container { max-width: 700px; margin: 0 auto; border: 5px solid #000; padding: 2rem; box-shadow: 10px 10px 0px #000; }

header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 5px solid #000; padding-bottom: 1rem; margin-bottom: 2rem; }
h1 { font-size: 2.5rem; letter-spacing: -2px; line-height: 1; }
#progress-bar { font-weight: bold; background: #000; color: #fff; padding: 0.5rem 1rem; }

.question-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; }
.options { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.option-label { display: block; border: 3px solid #000; padding: 1rem; cursor: pointer; font-weight: bold; transition: background 0.2s; }
.option-label:hover { background: #f0f0f0; }
input[type="radio"] { margin-right: 10px; transform: scale(1.5); accent-color: #000; }

button { background: #ffd700; border: 4px solid #000; padding: 1rem 2rem; font-size: 1.2rem; font-weight: bold; cursor: pointer; box-shadow: 4px 4px 0px #000; width: 100%; text-transform: uppercase; }
button:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }

#error-msg { background: #ff3333; color: white; padding: 0.5rem; font-weight: bold; margin-bottom: 1rem; text-align: center; border: 3px solid #000; }
.hidden { display: none !important; }

.score-card { border: 3px solid #000; padding: 1rem; margin-bottom: 1rem; font-size: 1.2rem; font-weight: bold; display: flex; justify-content: space-between; }