CLASSROOMIO-T-47:fixed the dark mode and also made the it vertically aligned on mobile

src/routes/404.svelte

@@ -1,21 +1,18 @@
 <script>
   import { stores, goto } from '@sapper/app';
-  const { page } = stores();
+  import { appStore } from '../utils/store/app';
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
+  const { page } = stores();
   const src = './bg-404.png';
 
   $: console.log('route', $page);
 </script>
 
 <div
-  style="background-image:url({src});
-background-size:contain"
-  class="error flex items-center justify-center w-screen overflow-hidden"
+  style={$appStore.isDark ? `background-image:url(${src})` : ''}
+  class={`error bg-gray-200 bg-no-repeat bg-cover flex items-center justify-center w-screen gap-20`}
 >
-  <div
-    class="error flex items-center justify-center gap-20 bg-gray-200 dark:bg-transparent"
-  >
-    <div class=" dark:text-white gap-3 w-2/5">
+  <div class=" dark:text-white gap-3 w-4/5 lg:w-2/5">
     <p class="text-3xl dark:text-white font-semibold mb-5">
       Oops😕,where did the page go?
     </p>
@@ -31,12 +28,27 @@ background-size:contain"
       onClick={() => goto('/')}
     />
   </div>
-    <img src="/classroom-404.png" alt="classroomio_error_image" />
-  </div>
+
+  <img
+    src="/classroom-404.png"
+    alt="classroomio_error_image"
+    class="errorImg"
+  />
 </div>
 
 <style>
   .error {
     height: calc(100vh - 57px);
   }
+
+  @media (max-width: 920px) {
+    .error {
+      flex-direction: column-reverse;
+      gap: 20px;
+    }
+    .errorImg {
+      width: 160px;
+      height: 160px;
+    }
+  }
 </style>