Add style for the content

src/router/index.js

@@ -39,12 +39,12 @@ const routes = [
     },
     {
         path: '/:pathMatch(.*)*',
-        name: 'not-found',
+        name: 'notFound',
         component: NotFound
     },
 ];
 
-const router = createRouter({ 
+const router = createRouter({
     history: createWebHistory(),
     routes
 });

src/views/NotFound.vue

@@ -1,40 +1,21 @@
 <template>
-    <div class="search-content">
+    <div class="not-found">
-        <header class="global-header">
+       <span class="error-message">
-            <h1>Seekra</h1>
+            The page you are looking for does not exist. Please check the URL or return to the search page.
-            <span class="error-message">
+        </span>
-                ERROR 404: Page Not Found
-            </span>
-        </header>
         <RouterLink to="/" id="link">Back to Search</RouterLink>
     </div>
 </template>
 
 <style scoped>
-.global-header {
+.not-found {
     text-align: center;
+    padding-top: 80px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 40px;
+    gap: 12px;
 }
-
-.global-header h1 {
-    display: inline-block;
-    margin: 0;
-    line-height: 1;
-    background: linear-gradient(
-        to right,
-        var(--primary-color-l-4),
-        var(--primary-color),
-        var(--primary-color-d-4)
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    font-size: 6rem;
-}
-
 .error-message{
     margin: 0;
     font-weight: 600;