footer, root module nav, and main page done

src/styles/css-config/animations.css

@@ -1,9 +1,21 @@
 @property --percent {
-  syntax: '<percentage>';
+  syntax: "<percentage>";
   initial-value: 0%;
   inherits: false;
 }
 
+@property --percent-nav-root_transparent {
+  syntax: "<percentage>";
+  initial-value: 35%;
+  inherits: false;
+}
+
+@property --percent-nav-root_filled {
+  syntax: "<percentage>";
+  initial-value: 65%;
+  inherits: false;
+}
+
 @keyframes pulseGreen {
   0% {
     background-color: hsl(var(--blue) 85 35 / 0.1);
@@ -85,7 +97,6 @@
   }
 }
 
-
 @keyframes percentToFifty {
   from {
     --percent: 0%;
@@ -105,3 +116,43 @@
     --percent: 0%;
   }
 }
+
+@keyframes percent35To25 {
+  from {
+    --percent-nav-root_transparent: 35%;
+  }
+
+  to {
+    --percent-nav-root_transparent: 25%;
+  }
+}
+
+@keyframes percent25To35 {
+  from {
+    --percent-nav-root_transparent: 25%;
+  }
+
+  to {
+    --percent-nav-root_transparent: 35%;
+  }
+}
+
+@keyframes percent65To75 {
+  from {
+    --percent-nav-root_filled: 65%;
+  }
+
+  to {
+    --percent-nav-root_filled: 75%;
+  }
+}
+
+@keyframes percent75To65 {
+  from {
+    --percent-nav-root_filled: 75%;
+  }
+
+  to {
+    --percent-nav-root_filled: 65%;
+  }
+}

src/styles/css-config/base.css

@@ -1,9 +1,13 @@
 html {
-  font-family: 'Rubik', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Rubik", Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
   font-size: 14px;
   line-height: 1.272;
   font-weight: 400;
 
+  height: 100svh;
+  width: 100svw;
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -77,3 +81,9 @@ html.dark {
   margin: 0;
   padding: 0;
 }
+
+body {
+  min-height: 100svh;
+  height: max-content;
+  width: 100%;
+}