Update styles.css

improvements made to the CSS for better visual appearance, consistent card sizing, and improved drag-and-drop functionality.

Games/Single_Player_Solitaire/css/styles.css

@@ -11,13 +11,14 @@ body {
 #game-board {
     display: grid;
     grid-template-areas:
-        "stock waste foundations foundations foundations foundations"
-        "tableau tableau tableau tableau tableau tableau tableau";
+        "stock waste . . foundations foundations foundations foundations"
+        "tableau tableau tableau tableau tableau tableau tableau tableau";
     gap: 10px;
     padding: 10px;
     background-color: #388E3C;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    max-width: 90%;
 }
 
 .card-pile {
@@ -44,7 +45,8 @@ body {
 }
 
 .foundation {
-    flex: 1;
+    width: 100px;
+    height: 140px;
 }
 
 #tableau {
@@ -57,6 +59,7 @@ body {
     flex: 1;
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
 .card {
@@ -65,21 +68,22 @@ body {
     border-radius: 10px;
     background-color: white;
     border: 2px solid #000;
-    position: absolute;
     cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     user-select: none;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
     font-family: 'Georgia', serif;
     font-weight: bold;
     color: #000;
+    position: absolute;
 }
 
 .card.dragging {
     opacity: 0.5;
+    z-index: 1000;
 }
 
 .card.face-down {
@@ -125,6 +129,7 @@ body {
 .card.spades .suit {
     color: black;
 }
+
 #controls {
     margin-top: 20px;
     text-align: center;
@@ -135,6 +140,16 @@ body {
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
+    background-color: #abc1ac;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+#new-game-button:hover,
+#hint-button:hover {
+    background-color: #bad2bb;
 }
 
 #win-message {