Styling added to game cards in live scoreboard

ProjectSourceCode/src/resources/css/homepage/homepage.css

@@ -6,7 +6,7 @@
 
 /* Styling for text at top of the page */
 #leagues-header {
-  font-family: 'Golos Text';
+  font-family: 'Scottsdale-Italic';
   display: inline-block; /* Ensure the width is based on content */
   border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
   

ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css

@@ -1,3 +1,9 @@
+/* Add logo font face */
+@font-face {
+    font-family: 'Scottsdale-Italic';
+    src: url('../fonts/Scottsdale-Italic.ttf') format('truetype');
+}
+
 #navigation-bar-container {
     background-color: hsl(0, 98%, 40%);
     box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
@@ -13,11 +19,6 @@
     z-index: 1000; /* Adjust as needed */
 }
 
-@font-face {
-    font-family: 'Scottsdale-Italic';
-    src: url('../fonts/Scottsdale-Italic.ttf') format('truetype');
-}
-
 #logo {
     color: white;
     text-decoration: none;

ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css

@@ -1,21 +1,25 @@
+.scoreboard-league-container {
+    height: 100%;
+}
+
 #game-card {
     
     display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 6px;
-    margin: 6px 0px; /* Distance between cards and container */
-    margin-left: 5px;
-    min-width: 150px;
-
-    color: rgb(0, 0, 0);
-    background-color: rgb(255, 255, 255);
-    border: 1px solid rgb(160, 159, 159);
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    margin: 0px;
+    height: 100%;
+    background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+    padding: 10px; /* Adjust padding as needed */
+    position: relative; /* Needed for absolute positioning */
+    overflow: hidden; /* Hide the overflowing skewed content */
+    transform: skewX(-20deg); /* Skew the banner to create a triangular side */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
+    cursor: pointer; /* Change cursor to pointer on hover */
     
     transition: transform 0.4s ease; /* Add transition for smooth effect */
 }
 
+
+
 #game-card:hover {
     transform: scale(1.05); /* Scale up by 10% on hover */
 }
@@ -24,8 +28,9 @@
 .score-card-body {
     display: flex;
     width: 100%;
-    justify-content: center;
+    justify-content: flex-end
     align-items: center;
+    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
 }
 
 /* Left Side of Container (Scores) */