Reverted changes of instructions modal

index.html

@@ -36,13 +36,15 @@ <h1>Azerothian Guess</h1>
             <span class="close-button">&times;</span>
             <h2>How to Play Azerothian Guess</h2>
             <p>Welcome to Azerothian Guess! Here are the instructions:</p>
-            <p>This is not Wordle, this is a hangman-style game.</p>
-            <p>Each day, a new word from the World of Warcraft universe is selected.</p>
-            <p>Guess the word by selecting letters or typing them on your keyboard.</p>
-            <p>Each letter you pick is a guess. You get 6 wrong letters before you lose.</p>
-            <p>Earn points for each correct guess and extra points for guessing the whole word.</p>
-            <p>Your score and streak are saved in your browser and persist across sessions.</p>
-            <p>If you guess incorrectly too many times, you lose the game for the day.</p>
+            <ul>
+                <li>This is not Wordle™, this is a hangman-style game.</li>
+                <li>Each day, a new word from the World of Warcraft universe is selected.</li>
+                <li>Guess the word by selecting letters or typing them on your keyboard.</li>
+                <li>Each letter you pick is a guess. You get 6 wrong letters before you lose.</li>
+                <li>Earn points for each correct guess and extra points for guessing the whole word.</li>
+                <li>Your score and streak are saved in your browser and persist across sessions.</li>
+                <li>If you guess incorrectly too many times, you lose the game for the day.</li>
+            </ul>
             <button id="start-game">Start Game</button>
         </div>
     </div>

styles.css

@@ -137,8 +137,16 @@ body {
     text-align: center; /* Center text */
 }
 
-.modal-content p {
-    text-align: center; /* Center text in paragraphs */
+.modal-content ul {
+    list-style-type: none; /* Remove bullets from the list */
+    padding-left: 0; /* Remove default padding */
+    text-align: left; /* Align text left within the list */
+    display: inline-block; /* Center the list container */
+}
+
+.modal-content li {
+    text-align: left; /* Ensure individual list items are left-aligned */
+    margin-bottom: 10px; /* Add some spacing between list items */
 }
 
 .modal-content button {