From 57ed27a6a4db73263e8db20d3fd8f614d4250523 Mon Sep 17 00:00:00 2001
From: Danny <dannyrivasdev@gmail.com>
Date: Wed, 12 Jun 2024 00:46:01 -0400
Subject: [PATCH] Made the search bar dynamic

---
 style.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/style.css b/style.css
index 7004320..17858ca 100644
--- a/style.css
+++ b/style.css
@@ -191,6 +191,11 @@ section {
   margin-top: 120px;
 }
 
+.heading-section {
+  text-align: center;
+  margin-top: 50px;
+}
+
 .heading-section h4 {
   color: #356de4;
   font-size: 34px;
@@ -205,6 +210,30 @@ section {
   text-decoration: underline;
 }
 
+#searchInput {
+  width: 100%;
+  max-width: 400px;
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  margin: 0 auto;
+  display: block;
+}
+
+#searchButton {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #e75e8d;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+  display: block;
+  margin: 10px auto;
+}
+
 /* 
 ---------------------------------------------
 Pre-loader Style
@@ -384,3 +413,34 @@ Most Popular Style
 .hidden{
   display: none;
 }
+
+/* 
+---------------------------------------------
+Media Queries (Responsive Styles)
+--------------------------------------------- 
+*/
+
+@media (max-width: 768px) {
+  #searchInput {
+    max-width: 300px;
+    font-size: 14px;
+  }
+
+  #searchButton {
+    font-size: 14px;
+    padding: 8px 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  #searchInput {
+    max-width: 200px;
+    font-size: 12px;
+    padding: 8px;
+  }
+
+  #searchButton {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+}
\ No newline at end of file