feat: add search functionality

static/style.css

@@ -247,6 +247,70 @@ footer a:hover {
 	color: #222;
 }
 
+.main {
+	flex-grow: 1;
+}
+
+#search-page {
+	display: flex;
+	flex-direction: column;
+	gap: 3rem;
+	padding: 2rem 1rem;
+}
+
+@media screen and (min-width: 800px) {
+	#search-page {
+		width: 80rem;
+		margin: 0 auto;
+	}
+}
+
+#search-input {
+	width: 100%;
+	padding: 1rem 2rem;
+	box-sizing: border-box;
+	border-radius: 5px;
+	border: 1px solid #ddd;
+	color: #222;
+}
+
+#search-results {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+#search-results h1 {
+	text-align:center;
+	color: #111;
+	font-size: 2.5rem;
+}
+
+#search-item {
+	display: flex;
+	height: 8rem;
+	border: 1px solid #eee;
+	border-radius: 5px;
+	gap: 1rem;
+	padding: 1rem;
+	box-shadow: 0 1px 1px #ddd;
+}
+
+#search-item h2 {
+	font-size: 1.8rem;
+	color: #222;
+}
+
+#search-item span {
+	font-size: 1.3rem;
+	color: #333;
+}
+
+#search-item img {
+	width: 8rem;
+	border-radius: 5px;
+}
+
 /* dark mode */
 @media (prefers-color-scheme: dark) {
 	body {
@@ -287,4 +351,24 @@ footer a:hover {
 	#home p, #error p{
 		color: #ddd;
 	}
+
+	#search-input {
+		background-color: #ddd;
+	} 
+
+	#search-page h1 {
+		color: #eee;
+	}
+
+	#search-item {
+		border: 1px solid #888;
+	}
+
+	#search-item h2 {
+		color: #ddd;
+	}
+
+	#search-item span {
+		color: #bbb;
+	}
 }