(create) created searchbar component and styled it

styles/components/searchbar.scss

@@ -0,0 +1,20 @@
+.searchbar {
+  align-self: center;
+  min-width: 30%;
+  margin-bottom: 1rem;
+
+  border: 1px solid var(--color-primary);
+  border-radius: 5px;
+  height: 3rem;
+  padding: 2px 2rem;
+  outline: 0;
+  background-color: var(--color-grey);
+
+  transition: all 0.2s;
+
+  &:hover,
+  &:focus {
+    border: 1.5px solid var(--color-tertiary);
+    background-color: var(--color-white);
+  }
+}

styles/globals.scss

@@ -10,6 +10,7 @@
 
 @import "./components/navbar";
 @import "./components/footer";
+@import "./components/searchbar";
 
 @import "./pages/homepage.scss";
 

styles/pages/homepage.scss

@@ -1,13 +1,15 @@
 .homepage {
-  font-size: 2rem;
-  list-style-type: none;
-  justify-items: center;
-
   display: grid;
   justify-content: center;
+  justify-items: center;
+
+  padding-top: 2rem;
+  font-size: 2rem;
+  list-style-type: none;
 
   &_heading-1 {
     text-align: center;
+    padding-top: 1rem;
   }
 
   &_posts {