link, text, icons, nav and variable styles

src/assets/styles/components/_icons.scss

@@ -0,0 +1,5 @@
+.icon {
+    fill: var(--text-secondary);
+    width: var(--s2);
+    height: var(--s2);
+}

src/assets/styles/components/_nav.scss

@@ -0,0 +1,10 @@
+nav {
+  & ul {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    gap: var(--s0);
+
+    font-size: var(--s1);
+  }
+}

src/assets/styles/utility/_variables.scss

@@ -2,9 +2,10 @@
   // COLORS
   --background-color: #ffffff;
   --background-color-secondary: #301e4e;
+  --background-color-tertiary: #ff6e6c;
 
-  --headline: #1f1135;
-  --text-paragraph: #1f1135;
+  --text: #1f1135;
+  --text-secondary: #ffffff;
   --sub-headline: #301e4e;
 
   --link-color: #ff6e6c;
@@ -26,4 +27,6 @@
   --s3: calc(var(--s2) * var(--ratio));
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
+
+  --max-width: 1000px;
 }