Fix Dark Mode toggle.

index.html

@@ -26,7 +26,7 @@
     color: var(--fg);
     transition: background 0.3s, color 0.3s;
   }
-  h1 { text-align: center; }
+  h1 { text-align: center; margin-top: 60px; }
   .question {
     margin-bottom: 20px;
     background: var(--card-bg);
@@ -36,7 +36,12 @@
     transition: background 0.3s;
   }
   .answers { list-style-type: none; padding: 0; }
-  .answers li { margin: 5px 0; cursor: pointer; border-radius: 4px; padding: 4px; }
+  .answers li {
+    margin: 5px 0;
+    cursor: pointer;
+    border-radius: 4px;
+    padding: 4px;
+  }
   button {
     margin-top: 10px;
     padding: 5px 10px;
@@ -49,14 +54,25 @@
   }
   button:hover { background: var(--button-hover); }
   .result { font-weight: bold; margin-top: 10px; }
+
   #theme-toggle {
     position: fixed;
     top: 15px;
     right: 20px;
-    background: none;
-    border: none;
-    font-size: 1.5rem;
+    background: var(--card-bg);
+    border: 2px solid var(--button-bg);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
     cursor: pointer;
+    color: var(--fg);
+    z-index: 9999;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s, color 0.3s;
   }
 </style>
 </head>
@@ -117,7 +133,10 @@ function renderQuiz() {
     div.className = 'question';
     div.setAttribute('data-answer', q.correct);
     let answersHtml = q.a.map(ans => `<li>${ans}</li>`).join('');
-    div.innerHTML = `<p>${i+1}. ${q.q}</p><ul class="answers">${answersHtml}</ul><button onclick="checkAnswer(this)">Check Answer</button><div class="result"></div>`;
+    div.innerHTML = `<p>${i+1}. ${q.q}</p>
+                     <ul class="answers">${answersHtml}</ul>
+                     <button onclick="checkAnswer(this)">Check Answer</button>
+                     <div class="result"></div>`;
     container.appendChild(div);
   });
   attachAnswerEvents();
@@ -140,10 +159,16 @@ function checkAnswer(btn) {
   if (!selected) { alert('Select an answer first!'); return; }
   const idx = Array.from(selected.parentElement.children).indexOf(selected);
   const letters = ['a','b','c','d'];
-  if (letters[idx] === correct) { result.textContent = 'Correct!'; result.style.color = 'green'; }
-  else { result.textContent = 'Incorrect. Correct answer: ' + correct.toUpperCase(); result.style.color = 'red'; }
+  if (letters[idx] === correct) {
+    result.textContent = 'Correct!';
+    result.style.color = 'green';
+  } else {
+    result.textContent = 'Incorrect. Correct answer: ' + correct.toUpperCase();
+    result.style.color = 'red';
+  }
 }
 
+// Theme toggle logic
 const toggleBtn = document.getElementById('theme-toggle');
 function setTheme(dark) {
   document.body.classList.toggle('dark', dark);