Update to file structure. Every element is now in a navigation-bar folder

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

@@ -0,0 +1,71 @@
+#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);
+    
+    transition: transform 0.4s ease; /* Add transition for smooth effect */
+}
+
+#game-card:hover {
+    transform: scale(1.05); /* Scale up by 10% on hover */
+}
+
+/* Entire Card Information Body */
+.score-card-body {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Left Side of Container (Scores) */
+.card-team-container {
+    flex: 70%;
+    flex-grow: 1; /* Both team containers will grow to occupy equal width */
+    flex-direction: column; /* Stacks each team over one another */
+}
+
+/* Right Side of Container (Time) */
+.card-game-information-container {
+    flex: 30%;
+    display: flex;
+    align-items: center;
+    margin: 0px 15px;
+}
+
+/* Center the time in game */
+#time {
+    margin: 0;
+}
+
+/* Container for each team in card's information */
+.team {
+    display: flex; /* Keeps all items in a row */
+    align-items: center; /* Center items vertically */
+    padding: 5px;
+}
+
+
+.team p {
+    margin: 0; /* Remove default margin */
+}
+
+#team-name {
+    margin-right: 10px;
+}
+
+.team img {
+    max-width: 20px; /* Set the width of the image to 100% of its container */
+    max-height: 20px; /* Maintain the aspect ratio */
+    margin-right: 10px;
+}

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

@@ -0,0 +1,14 @@
+.scoreboard-container {
+    overflow-x: auto; /* Enable horizontal scrolling */
+    white-space: nowrap; /* Prevent cards from wrapping to the next line */
+    border: 1px solid rgb(202, 2, 2);
+
+    background-color: rgb(255, 255, 255);
+
+    /* Inner box shadow */
+    box-shadow: inset 0px 0px 15px rgba(77, 76, 76, 0.3);
+}
+
+.league-container {
+    display: inline-block; /* Change display property to inline-block to prevent stretching */
+}