fix: adjust styles

app/static/styles.css

@@ -2,6 +2,9 @@ body {
     background-color: #121212; /* Dark background color */
     font-family: Arial, sans-serif; /* Use a common sans-serif font */
     color: #fff; /* White text color */
+    margin: 0;
+    width: 100vw;
+    height: 100vh;
 }
 
 h1 {
@@ -23,12 +26,12 @@ h1 {
     border-radius: 12px; /* Rounded corners */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
     padding: 1%;
-    margin-bottom: 1%;
+    width: 16%;
-    margin-top: 1%;
+    max-width: 300px;
-    margin-left: 1.4%;
-    margin-right: 1.4%;
-    width: 15.2%;
     position: relative; /* Position relative for absolute positioning */
+    margin-left: 1%;
+    margin-right: 1%;
+    margin-bottom: 1%;
 }
 
 .team-info {
@@ -54,6 +57,13 @@ h1 {
     font-weight: bold;
 }
 
+/* Add a media query for screens between 769px and 900px */
+@media only screen and (max-width: 900px) and (min-width: 769px) {
+    .team-name {
+        font-size: 75%; /* Adjusted font size for screens between 769px and 900px */
+    }
+}
+
 .team-score {
     font-size: 120%;
     font-weight: bold;
@@ -61,7 +71,7 @@ h1 {
 }
 
 .team-record {
-    font-size: 12px;
+    font-size: 70%;
     margin-left: auto;
     font-weight: bold;
 }
@@ -231,12 +241,12 @@ h1 {
     }
 
     .game-box {
-        width: 90%; /* Adjust width for better fit on smaller screens */
+        width: 90%;
-        margin-left: 1.5%;
-        margin-right: 1.5%;
-        margin-top: 2.5%;
-        margin-bottom: 2.5%;
         padding: 4%;
+        margin-bottom: 4%;
+        margin-left: 2%;
+        margin-right: 2%;
+        max-width: 1000px;
     }
 
     .team-info {