add text effect on 404 error

src/pages/ErrorNotFound.vue

 <template>
   <div class="fullscreen bg-secondary text-white text-center q-pa-md flex flex-center">
     <div>
-      <div :style="$q.screen.lt.sm ? 'font-size: 30vh' : 'font-size: 40vh'" class="text-accent">
+      <div :style="$q.screen.lt.sm ? 'font-size: 30vh' : 'font-size: 40vh'" class="text-accent text-effect">
         404
       </div>
 
@@ -30,3 +30,25 @@
 <script setup lang="ts">
 //
 </script>
+
+<style scoped>
+@supports (-webkit-background-clip: text) {
+  .text-effect {
+    background-image: linear-gradient(45deg, #eeea14, #ffffff, #eeea14);
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-size: 300% auto;
+    animation: textgradient 20s linear infinite;
+  }
+
+  @keyframes textgradient {
+    from {
+      background-position: 0 center;
+    }
+    to {
+      background-position: 300% center;
+    }
+  }
+}
+</style>