final commit

index.html

@@ -65,6 +65,7 @@
            }
       }
     </script>
+    <!-- instructions phase starts here -->
     <div class="popup-container">
       <div class="instructions">
         <p>You probably already know how to play Tic-Tac-Toe. It's a really simple game, right? That's what most people think. But if you really wrap your brain around it, you'll discover that Tic-Tac-Toe isn't quite as simple as you think!
@@ -89,6 +90,7 @@ <h1>HOW CAN I WIN AT TIC-TAC-TOE?</h1>
           <button id="start-btn">Start Game</button>
       </div>
     </div>
+    <!-- instruction phase ends here -->
     <div class="container-custom">
           <h1>Tic-Tac-Toe</h1>
           <h4>Scoreboard</h4>

index.mjs

@@ -1,7 +1,9 @@
+
 let instuctions = document.querySelector(".popup-container");
 let startButtun = document.querySelector("#start-btn");
 let customContainer = document.querySelector(".container-custom");
 
+// adding functionalities to the instructions container
 startButtun.addEventListener("click", () =>{
     instuctions.style.display = "none";
     customContainer.style.display = "flex";

main.css

@@ -19,16 +19,10 @@ h1 {
 .right {
     text-align: right;
 }
-.container-custom{
-    display: none;
-}
+
 
 /* styling for instruction container */
 
-.popup-container{
-    position: absolute;
-    width: 20%;
-}
 
 /*****************************/
 /* Styling For Menu */