From 6847b550bd57c012ab8c6eacdaa006238e343271 Mon Sep 17 00:00:00 2001
From: hassana123 <hassanaabdll1@gmail.com>
Date: Fri, 12 Aug 2022 17:55:55 +0100
Subject: [PATCH] final commit

---
 index.html | 2 ++
 index.mjs  | 2 ++
 main.css   | 8 +-------
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index b346653..f06cd78 100644
--- a/index.html
+++ b/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>
diff --git a/index.mjs b/index.mjs
index 751683a..8a2991b 100644
--- a/index.mjs
+++ b/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";
diff --git a/main.css b/main.css
index e29ca99..fa333cd 100644
--- a/main.css
+++ b/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 */