Create styles.css

styles.css

@@ -0,0 +1,96 @@
+<style>
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+}
+form {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+input[type="text"] {
+  flex-grow: 1;
+  min-width: 200px;
+}
+.date-range {
+  display: flex;
+  gap: 10px;
+}
+input[type="date"] {
+  width: 180px;
+}
+button[type="submit"] {
+  white-space: nowrap;
+  min-width: 30px;    /* Minimum width to ensure readability */
+  max-width: 100px;
+}
+#search-results {
+  list-style-type: none;
+  padding: 0;
+}
+#search-results li {
+  background-color: #f0f0f0;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 5px;
+}
+@media (max-width: 768px) {
+  form {
+    flex-wrap: wrap;
+  }
+  input[type="text"], .date-range, button[type="submit"] {
+    width: 100%;
+  }
+}
+
+.card-item {
+    background-color: #f0f0f0;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    color: black;
+}
+.comment-text {
+  color: black;
+}
+.results-bar {
+    margin-bottom: 10px;
+    font-style: italic;
+}
+.pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+.pagination button {
+    padding: 5px 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+}
+.pagination button:hover {
+    background-color: #0056b3;
+}
+.pagination span {
+    font-weight: bold;
+}
+
+.highlight {
+    background-color: yellow;
+}
+
+@media (max-width: 768px) {
+    form {
+        flex-wrap: wrap;
+    }
+    input[type="text"], .date-range, button[type="submit"] {
+        width: 100%;
+    }
+}
+</style>