Update style.css

style.css

@@ -1,13 +1,50 @@
-/* Custom styles for SentimentSpark */
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background-color: #1a1a1a;
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
     color: #e0e0e0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 h1 {
-    font-weight: 700;
+    font-family: 'Orbitron', sans-serif;
     color: #ffffff;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+}
+
+.hero {
+    background: linear-gradient(45deg, #2a2a2a, #3a3a3a);
+    border-bottom: 2px solid #444;
+    animation: fadeIn 1s ease-in;
+}
+
+.lead {
+    color: #cccccc;
+    font-size: 1.25rem;
+}
+
+.card {
+    background-color: #2a2a2a;
+    border: 1px solid #444;
+    transition: transform 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+}
+
+.form-select {
+    background-color: #3a3a3a;
+    border-color: #555;
+    color: #e0e0e0;
+    transition: background-color 0.3s ease;
+}
+
+.form-select:focus {
+    background-color: #3a3a3a;
+    border-color: #777;
+    box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.5);
 }
 
 .table-dark {
@@ -18,24 +55,30 @@ h1 {
 .table-dark th,
 .table-dark td {
     border-color: #444;
+    padding: 12px;
+}
+
+.table-dark tbody tr {
+    transition: background-color 0.3s ease, transform 0.2s ease;
 }
 
 .table-dark tbody tr:hover {
-    background-color: #3a3a3a;
+    background-color: #4a4a4a;
+    transform: scale(1.02);
 }
 
-.form-select {
-    background-color: #2a2a2a;
-    border-color: #444;
-    color: #e0e0e0;
+.container {
+    max-width: 1200px;
+    flex: 1;
 }
 
-.form-select:focus {
-    background-color: #2a2a2a;
-    border-color: #666;
-    box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.5);
+footer {
+    background-color: #1a1a1a;
+    border-top: 1px solid #444;
+    color: #999;
 }
 
-.container {
-    max-width: 1200px;
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }