Update app.py

app.py

@@ -132,35 +132,35 @@ body {
     font-family: Arial, sans-serif;
     background-color: #f0f2f5;
 }
+
 h1, h2, p {
     color: #333;  /* Darker color for better visibility */
 }
 
-/* Customize color of Examples text directly with inline styles */
-.gr-examples-title, .gr-examples-btn, .gr-suggestions li {
-    color: #333 !important;  /* Set the color to dark for better contrast */
+/* Examples section styling */
+.gr-examples-title {
+    color: #333 !important;  /* Make sure the Examples title is visible */
 }
 
-/* Customize the appearance of the examples section */
-.gr-examples {
-    color: #333 !important;  /* Ensure examples are visible */
+.gr-examples-btn {
+    color: #333 !important;  /* Set the color for each example button to dark */
 }
 
-/* Use inline styling for examples section */
-.gr-examples-btn {
-    color: #333 !important; /* Make sure example suggestions are visible */
+.gr-examples {
+    color: #333 !important;  /* Apply color to the whole examples section */
 }
 
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
+.gr-suggestions li {
+    color: #333 !important;  /* Ensure suggestions are visible */
 }
+
+/* Customize the appearance of the course results */
 .results-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }
+
 .course-card {
     background-color: white;
     border-radius: 8px;
@@ -170,27 +170,33 @@ h1, h2, p {
     width: 48%;
     transition: transform 0.2s;
 }
+
 .course-card:hover {
     transform: translateY(-5px);
 }
+
 .course-image {
     width: 100%;
     height: 150px;
     object-fit: cover;
 }
+
 .course-info {
     padding: 15px;
 }
+
 .course-info h3 {
     margin-top: 0;
     font-size: 18px;
     color: #333;
 }
+
 .course-info p {
     color: #666;
     font-size: 14px;
     margin-bottom: 10px;
 }
+
 .course-link {
     display: inline-block;
     background-color: #007bff;
@@ -201,9 +207,11 @@ h1, h2, p {
     font-size: 14px;
     transition: background-color 0.2s;
 }
+
 .course-link:hover {
     background-color: #0056b3;
 }
+
 .no-results {
     text-align: center;
     color: #666;