most of it

frontend/src/lib/components/header/Header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import DesktopHeader from "./desktop.svelte"
     import MobileHeader from "./mobile.svelte"
-    import { navigation } from "../../stores"
 </script>
 
 <main class="headercontainer">
@@ -18,7 +17,17 @@
 
 <style global lang="less">
     @import "../../assets/css/main.less";
+    @import "../../assets/css/variables.less";
+
     @desktop: ~"only screen and (min-width: 1440px)";
+    .HP {
+        h2 {
+            font-size: 2.1rem !important;
+            @media @tablet {
+                font-size: 3.2rem !important;
+            }
+        }
+    }
 
     .ignore {
         display: none !important;
@@ -28,6 +37,7 @@
         position: relative;
         height: 100%;
         width: 100%;
+        
     }
     .placeholder {
         height: 105px;
@@ -39,8 +49,9 @@
         top: 0px;
         justify-content: space-between;
         width: 100%;
-        color: #333;
+        color: var(--normal-font-color);
         height: 105px;
+       
     }
     @media @desktop {
         .headercontainer,