Make-the-page-responisve-and-more-beautiful

css/style.css

@@ -1,32 +1,31 @@
-
 body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background: url('https://blenderartists.org/uploads/default/original/4X/0/5/f/05fb495b0f4ce4fb15ddc0cd136250a6aaae67c2.jpeg') no-repeat center center fixed;
-    background-size: cover; /* This makes the image cover the entire background */
+    background-size: cover;
     font-family: 'Arial', sans-serif;
     color: #fff;
+    margin: 0; /* Avoid unnecessary scroll */
 }
 
-/* Rest of your CSS remains unchanged */
-
-
+/* Adjust game board and cells to be responsive */
 #gameBoard {
     display: grid;
-    grid-template-columns: repeat(3, 100px);
-    grid-template-rows: repeat(3, 100px);
+    grid-template-columns: repeat(3, 1fr); /* Flexible grid columns */
+    grid-template-rows: repeat(3, 1fr); /* Flexible grid rows */
     gap: 10px;
+    width: 90vw; /* Responsive width */
+    max-width: 300px; /* Max width to avoid oversized grid */
     margin: 20px;
 }
 
-
 .cell {
-    width: 100px;
-    height: 100px;
-
+    width: 100%; /* Make the cell width flexible */
+    padding-bottom: 100%; /* This ensures a perfect square */
+    position: relative;
     background-color: rgba(255, 255, 255, 0.1);
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 10px;
@@ -38,32 +37,37 @@ body {
     transition: background-color 0.3s, transform 0.3s;
 }
 
+/* Inner content should fit well in the cell */
+.cell div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .cell.x {
-    color: #00f0ff; /* Neon Blue */
+    color: #00f0ff;
     text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
-    font-weight: 900; /* Extra bold for X */
-    font-size: 3em; /* Optional: Increase font size for more emphasis */
+    font-weight: 900;
+    font-size: 2.5em; /* Adjust font size for responsiveness */
 }
 
 .cell.o {
-    color: #ff4f94; /* Neon Pink */
+    color: #ff4f94;
     text-shadow: 0 0 10px rgba(255, 79, 148, 0.7);
-    font-weight: 900; /* Extra bold for O */
-    font-size: 3em; /* Optional: Increase font size for more emphasis */
+    font-weight: 900;
+    font-size: 2.5em;
 }
 
-.cell:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-    transform: scale(1.05);
-}
+/* Result and Reset button styling */
 #result {
     margin-top: 20px;
     font-size: 1.5em;
     text-align: center;
     animation: glow 1.5s infinite alternate;
     color: #ff007f;
     text-shadow: 0 0 10px rgba(255, 0, 127, 0.7);
-    font-weight: bold; /* Make the result message bold */
+    font-weight: bold;
 }
 
 #resetButton {
@@ -85,10 +89,43 @@ body {
     transform: scale(1.05);
 }
 
+/* Keyframe animation for glow effect */
 @keyframes glow {
     0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff; }
     100% { text-shadow: 0 0 20px #ff007f, 0 0 30px #ff007f; }
 }
 
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+    #gameBoard {
+        width: 80vw; /* Slightly smaller on tablets */
+        max-width: 250px;
+    }
+
+    .cell.x, .cell.o {
+        font-size: 2em; /* Decrease font size on smaller screens */
+    }
+}
+
+@media (max-width: 480px) {
+    #gameBoard {
+        width: 95vw; /* Full width on small devices */
+        max-width: 200px;
+    }
+
+    #result {
+        font-size: 1.2em; /* Smaller result text */
+    }
+
+    .cell.x, .cell.o {
+        font-size: 1.8em; /* Decrease font size further */
+    }
+
+    #resetButton {
+        font-size: 1em; /* Make the button smaller */
+    }
+}
+
+
 
 /* https://static.vecteezy.com/system/resources/previews/001/879/980/non_2x/playful-tic-tac-toe-free-vector.jpg */