added background image and adjusted spacing

Author: Ken C

src/App.css

@@ -2,6 +2,7 @@
   text-align: center;
   margin-top: 50px;
   color: whitesmoke;
+  padding-top: 60px;
 }
 
 .status {
@@ -11,14 +12,15 @@
 
 .board {
   display: grid;
-  grid-template-columns: repeat(3, 100px);
+  grid-template-columns: repeat(3, 200px);
   grid-gap: 5px;
   justify-content: center;
+  padding-top: 30px;
 }
 
 .square {
-  width: 100px;
-  height: 100px;
+  width: 200px;
+  height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,15 +34,15 @@
 }
 
 .square:hover {
-  background-color: aquamarine;
+  background-color: lightskyblue;
 }
 
 .square:active {
   background-color: black;
 }
 .reset {
   font-size: 16px;
-  margin-top: 20px;
+  margin-top: 30px;
   padding: 10px 20px;
   cursor: pointer;
   background-color: whitesmoke;
@@ -52,9 +54,13 @@
 }
 
 .reset:hover {
-  background-color: aquamarine;
+  background-color: lightskyblue;
 }
 
 body {
 background-color: black;
+background-image: url("purple-wave.jpg");
+background-size: contain;
+background-repeat: no-repeat;
+background-size: 100%; /* Fills the container completely */ 
 }

src/App.jsx

@@ -30,7 +30,7 @@ const App = () => {
     ? `Winner: ${winner}`
     : squares.every((square) => square) // Check if all squares are filled
     ? 'Tie'
-    : `Next player: ${xIsNext ? 'X' : 'O'}`;
+    : `Player Turn: ${xIsNext ? 'X' : 'O'}`;
 
   const handleClick = (i) => {
     if (squares[i] || winner) {
@@ -51,7 +51,7 @@ const App = () => {
 
   return (
     <div className="App">
-      <div className="status">{status}</div>
+      <div className="status"><b>{status}</b></div>
       <div className="board">
         {squares.map((value, index) => (
           <div