adding

Author: sanchit0496

tic-tac-toe/src/App.css

@@ -1,21 +1,63 @@
 .App {
   text-align: center;
+  font-family: 'Arial', sans-serif;
+  background-color: #f7f7f7;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.board-holder{
+h1 {
+  color: #333;
+  margin-bottom: 20px;
+  font-size: 2.5em;
+}
+
+.board-holder {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  width: 300px;
 }
-.box{
-  border: 1px solid gray;
-  margin: 2px; 
+
+.box {
+  border: 2px solid #444;
+  background-color: #fff;
+  border-radius: 5px;
   padding: 25px;
   cursor: pointer;
-  height: 50px;
-}
-.board-value{
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.box:hover {
+  background-color: #f0f0f0;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+
+.board-value {
+  font-size: 2em;
+  color: #333;
+}
+
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+button:hover {
+  background-color: #0056b3;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}