Refactor Gitea link styling in MainNav component

Moved inline styles to a scoped CSS class for better maintainability and readability. Added hover effect and smooth transition to enhance user interface consistency.

frontend/src/components/MainNav.vue

@@ -5,11 +5,7 @@
         <v-app-bar-title style="align-self: center">
           <span style="font-size: 20px">
             ALHP Status
-            <a
-              class="ms-2"
-              href="https://somegit.dev/ALHP/ALHP.GO"
-              style="color: white; font-size: 25px"
-              target="_blank">
+            <a class="ms-2 gitea-link" href="https://somegit.dev/ALHP/ALHP.GO" target="_blank">
               <i class="fa fa-gitea"></i>
             </a>
           </span>
@@ -28,4 +24,15 @@ import { useDisplay } from 'vuetify'
 const { mobile, width } = useDisplay()
 </script>
 
-<style scoped></style>
+<style scoped>
+.gitea-link {
+  color: white;
+  font-size: 25px;
+  text-decoration: none; /* Optional: To prevent underlining */
+  transition: color 0.2s; /* Smooth color transition */
+}
+
+.gitea-link:hover {
+  color: #609926;
+}
+</style>