Update app.py

app.py

@@ -151,7 +151,9 @@ body {
     background-color: #f4f6fa;
     color: #333333;
     font-family: 'Roboto', sans-serif;
-    line-height: 1.6;
+    line-height: 1.8;
+    margin: 0;
+    padding: 0;
 }
 
 a {
@@ -164,15 +166,40 @@ a:hover {
     text-decoration: underline;
 }
 
+h1, h2, h3 {
+    color: #4a148c;
+    margin: 15px 0;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.8rem;
+}
+
+p, li {
+    font-size: 1.2rem;
+    margin: 10px 0;
+}
+
 button {
     background-color: #64b5f6;
     color: #ffffff;
     border: none;
     border-radius: 6px;
-    padding: 10px 15px;
-    font-size: 14px;
+    padding: 12px 18px;
+    font-size: 16px;
+    font-weight: bold;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 button:hover {
@@ -180,23 +207,34 @@ button:hover {
 }
 
 .input-row, .tab-content {
-    background-color: #f8f4fc;
+    background-color: #ffffff;
     border-radius: 10px;
-    padding: 20px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 25px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    margin: 15px 0;
 }
 
 .tabs {
-    margin-bottom: 15px;
-    gap: 10px;
+    margin-bottom: 20px;
+    gap: 15px;
+    display: flex;
+    justify-content: center;
 }
 
 .tab-item {
     background-color: #ece2f4;
-    border-radius: 6px;
-    padding: 10px;
+    border-radius: 8px;
+    padding: 12px 20px;
+    font-size: 1.1rem;
+    font-weight: bold;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    margin: 5px;
+    margin: 8px;
+    text-align: center;
+    transition: background-color 0.3s ease;
+}
+
+.tab-item:hover {
+    background-color: #d1c4e9;
 }
 
 .dataframe {
@@ -204,9 +242,10 @@ button:hover {
     background-color: #ffffff;
     border: 1px solid #e5eff2;
     border-radius: 10px;
-    padding: 15px;
-    font-size: 14px;
+    padding: 20px;
+    font-size: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    margin: 15px 0;
 }
 
 .center-content {
@@ -215,20 +254,41 @@ button:hover {
     align-items: center;
     justify-content: center;
     text-align: center;
+    margin: 30px 0;
+    padding: 20px;
+}
+
+.center-content img {
+    max-width: 200px;
+    height: auto;
     margin: 20px 0;
-}"""
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+hr {
+    border: 1px solid #ddd;
+    width: 80%;
+    margin: 30px auto;
+}
+"""
+
 
 
 with gr.Blocks(css=css_tech_theme) as demo:
-    gr.Markdown("""
+   gr.Markdown("""
 <div class="center-content">
-<h1>🏆 Mobile-MMLU Benchmark Competition</h1>
-<h3>🌟 Welcome to the Competition Overview</h3>
-<img src="https://via.placeholder.com/150" alt="Competition Logo" style="margin: 20px 0;">
-<p>Welcome to the <strong>Mobile-MMLU Benchmark Competition</strong>. Here you can submit your predictions, view the leaderboard, and track your performance!</p>
-<hr>
+    <h1>🏆 Mobile-MMLU Benchmark Competition</h1>
+    <h3>🌟 Welcome to the Competition Overview</h3>
+    <img src="https://via.placeholder.com/200" alt="Competition Logo">
+    <p>
+        Welcome to the Mobile-MMLU Benchmark Competition. Here you can submit your predictions, 
+        view the leaderboard, and track your performance!
+    </p>
+    <hr>
 </div>
-    """,elem_id="center-content")
+""", elem_id="center-content")
+
 
     with gr.Tabs(elem_id="tabs"):
         with gr.TabItem("📖 Overview", elem_classes=["tab-item"]):
@@ -250,7 +310,6 @@ Mobile-MMLU is a benchmark designed to test the capabilities of LLMs optimized f
    Submissions are scored on accuracy.
 5. **Leaderboard**
    View real-time rankings on the leaderboard.
-
 ---
 ### Competition Tasks
 Participants must: