styling altered, font changed, cards centre aligned

Author: “CaitlinYoung7”

src/components/Blackjack.module.css

@@ -6,14 +6,19 @@
   border-radius: 10px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   color: #f0f0f0;
-  font-family: "Arial", sans-serif;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 }
 
 .gameArea {
   flex: 1;
   padding: 20px;
 }
 
+.total {
+  bottom: 0;
+  margin-top: 20px;
+}
+
 .sidebar {
   width: 200px;
   padding: 20px;
@@ -27,21 +32,27 @@
 
 .hands {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
+  flex-direction: row;
+  gap: 40px;
   margin-top: 20px;
+  align-items: center;
+  justify-content: center;
 }
 
 .hand h3 {
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   font-size: 1.2em;
   color: #f4c430;
+  text-align: center;
 }
 
 .cards {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
 .actions {
@@ -51,8 +62,8 @@
 }
 
 .actionButton {
-  background-color: #d4af37;
-  color: #1a1a1a;
+  background-color: hsl(0, 0%, 0%);
+  color: #ffdb26;
   border: none;
   padding: 12px 24px;
   margin: 0 10px;
@@ -66,6 +77,7 @@
 
 .actionButton:hover {
   background-color: #f4c430;
+  color: #000;
   transform: translateY(-2px);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
@@ -79,26 +91,35 @@
   font-size: 18px;
   background-color: #062d1b;
   padding: 15px;
+  font-weight: lighter;
   border-radius: 5px;
   margin-bottom: 20px;
 }
 
 .stats p {
   margin-bottom: 10px;
+  letter-spacing: 0.5px;
   font-weight: bold;
 }
 
 .betting {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 20px;
+
+  margin-bottom: 40px;
+}
+
+.headingblackjack {
+  font-size: 22px;
+  padding: 10px;
+  font-weight: bold;
 }
 
 .betInput {
   padding: 12px;
   font-size: 18px;
-  width: 150px;
+  width: 180px;
   margin-right: 10px;
   border: none;
   border-radius: 5px;
@@ -109,9 +130,11 @@
 .message {
   font-size: 24px;
   text-align: center;
+  margin-top: 20px;
   margin-bottom: 20px;
-  font-weight: bold;
-  color: #f4c430;
+  font-weight: 100;
+  letter-spacing: 0.5px;
+  color: #ffffff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }
 
@@ -125,4 +148,3 @@
     border-radius: 0 0 10px 10px;
   }
 }
-