Add header styles

src/styles/main.css

@@ -5,30 +5,6 @@ body {
     font-size: 16px;
 }
 
-.global-header {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 40px;
-}
-
-.global-header h1 {
-    display: inline-block;
-    margin: 0;
-    line-height: 1;
-    background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 6rem;
-}
-
-.slogan{
-    margin: 0;
-    font-size: small;
-}
-
 form {
     display: flex;
     justify-content: center;

src/views/SearchView.vue

@@ -3,6 +3,7 @@ import Searchbar from '../features/search/components/Searchbar.vue'
 </script>
 
 <template>
+    <div class="content-background">
         <header class="global-header">
             <h1>Seekra</h1>
             <span class="slogan">
@@ -13,4 +14,31 @@ import Searchbar from '../features/search/components/Searchbar.vue'
         <form id="search-form">
             <Searchbar />
         </form>
+    </div>
 </template>
+
+<style>
+.global-header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 40px;
+}
+
+.global-header h1 {
+    display: inline-block;
+    margin: 0;
+    line-height: 1;
+    background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 6rem;
+}
+
+.slogan{
+    margin: 0;
+    font-size: small;
+}
+</style>