Update static/style.css

static/style.css

@@ -1,21 +1,56 @@
+/* General Card and Shadows */
 body {
-  font-family: 'Poppins', sans-serif;
+  font-family: 'Inter', sans-serif;
+  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
 }
 
-textarea, select, button {
-  transition: all 0.2s ease;
+/* Answer Cards */
+#answer-box div {
+  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
+  padding: 16px 20px;
+  border-radius: 16px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+  margin-bottom: 12px;
+  transition: background 0.3s, transform 0.2s;
 }
 
-/* Smooth hover */
-button:hover {
+#answer-box div:hover {
+  background: linear-gradient(135deg, #c7d2fe, #e0e7ff);
   transform: translateY(-2px);
 }
 
-/* Scrollbar style */
-#answer-box::-webkit-scrollbar {
-  width: 6px;
+#answer-box p {
+  margin: 5px 0;
 }
-#answer-box::-webkit-scrollbar-thumb {
-  background: rgba(59,130,246,0.5);
-  border-radius: 3px;
+
+#answer-box strong {
+  color: #1e3a8a;
+}
+
+/* History Items */
+#history-list li {
+  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+  padding: 12px 14px;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.2s;
+  list-style: none;
+  word-wrap: break-word;
+}
+
+#history-list li:hover {
+  background: linear-gradient(135deg, #bae6fd, #7dd3fc);
+  transform: translateX(2px);
+}
+
+/* Scrollbars */
+#answer-box::-webkit-scrollbar,
+#history-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+#answer-box::-webkit-scrollbar-thumb,
+#history-list::-webkit-scrollbar-thumb {
+  background-color: rgba(59, 130, 246, 0.6);
+  border-radius: 4px;
 }