Fix Inconsistencies towards Material Style

src/app/header/header.component.scss

@@ -1,13 +1,11 @@
-@use '@angular/material' as mat;
-
-.header{
+.header {
   position: sticky;
   top: 0;
   margin: 0;
   padding: 0.5rem 1rem;
   z-index: 100;
   height: fit-content;
-  background-color: var(--mat-sys-primary-fixed);
+  background-color: var(--mat-sys-primary-container);
 
   nav {
     display: flex;
@@ -19,11 +17,13 @@
     gap: 0.25rem;
   }
 
-  a, button {
-    color: var(--mat-sys-on-primary-fixed-variant);
+  a,
+  button {
+    color: var(--mat-sys-primary);
 
-    &:hover, &.active {
-      background-color: color-mix(in srgb, var(--mat-sys-primary) 50%, transparent)
+    &:hover,
+    &.active {
+      background-color: var(--mat-sys-primary-overlay)
     }
   }
 

src/styles.scss

@@ -3,15 +3,14 @@
 html {
   color-scheme: light dark;
 
-  @include mat.theme((
-          color: mat.$azure-palette,
-          typography: Roboto,
-          density: 0
-  ));
+  @include mat.theme((color: mat.$azure-palette,
+      typography: Roboto,
+      density: 0));
+  --mat-sys-primary-overlay: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);
 }
 
-
-html, body {
+html,
+body {
   height: 100%;
 }