Update CSS

src/scss/components/_utilities.scss

@@ -32,9 +32,17 @@
   display: inline-flex;
   align-items: center;
 
-  &.column {
+  &.flex-col {
     flex-direction: column;
   }
+
+  &.justify-around {
+    justify-content: space-around;
+  }
+  
+  &.justify-center {
+    justify-content: center;
+  }
 }
 
 .sr-only {
@@ -78,6 +86,7 @@
   a {
     color: var(--item-color, var(--text));
     text-decoration: none;
+    transition: all .2s;
 
     &:hover {
       text-decoration: underline;

src/scss/critical.scss

@@ -25,7 +25,9 @@ body {
   }
 }
 header {
-  background-color: var(--primary);
+  /*background-color: var(--primary);*/
+  background: inherit;
+  background-attachment: fixed;
   position: fixed;
   z-index: 10;
   inset-block-start: 0;
@@ -37,11 +39,7 @@ header {
       justify-content: flex-end;
       padding: 0;
       list-style: none;
-
+      flex-wrap: wrap;
-      @media screen and (max-width: 767px) {
-        justify-content: start;
-        flex-direction: column;
-      }
     }
 
     li {
@@ -49,10 +47,6 @@ header {
       padding: 6px clamp(10px, 3vw, 20px);
       margin: 0;
       text-align: end;
-  
-      @media screen and (min-width: 768px) {
-        display: inline-block;
-      }
     }
 
     a[aria-current="page"] {
@@ -72,8 +66,6 @@ main {
   }
   .list-inline {
     --item-gap: 0;
-    margin: 0;
-    padding: 0;
   }
   ul:not(.list-inline) {
     margin: 0;
@@ -90,6 +82,14 @@ footer {
   background-color: var(--secondary);
   justify-items: center;
   margin-block-start: 1.5rem;
+
+  > div {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-content: center;
+    align-items: center;
+  }
   
   .list-inline {
     a {
@@ -97,6 +97,12 @@ footer {
       --item-color: var(--text-2);
     }
   }
+
+  .socials-list {
+    margin: 0;
+    --item-gap: .2ch;
+    --item-separator: '';
+  }
 }
 
 i {
@@ -111,15 +117,32 @@ i {
 }
 
 .hero-section {
-  height: 65vh;
+  height: 90vh;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
 
-  @media screen and (max-width: 767px) {
+  div {
-    height: 85vh;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: end;
+  }
+
+  p {
+    max-width: 48ch;
+  }
+
+  @media screen and (min-width: 768px) {
+    div {
+      text-align: start;
+      align-items: start;
+    }
+  }
+}
+.hero-title {
+  font-size: 1.8rem;
+
+  @media screen and (min-width: 768px) {
+    font-size: 4rem;
   }
 }
 
@@ -203,10 +226,7 @@ i {
     border-radius: 100%;
     border: 4px solid var(--primary-dark)
   }
-  ul {
+  
-    margin-block-start: 1rem;
-    gap: .2rem;
-  }
 
   @media screen and (max-width: 767px) {
     flex-direction: column;
@@ -222,11 +242,23 @@ i {
   }
 }
 
+.socials-list {
+  margin-block-start: 1rem;
+  gap: .2rem;
+
+  a {
+    &:hover {
+      --item-color: black;
+    }
+  } 
+}
+
 .timeline {
   display: flex;
   flex-direction: column;
   position: relative;
   padding: 0;
+  margin-top: 1.4rem;
 
   &:before {
     content: '';
@@ -243,13 +275,13 @@ i {
     margin: 1.4rem 0;
     padding: 0 0 0 calc(var(--size) + .8rem);
 
-    &:first-child {
+    &:last-child {
-      margin-top: 3rem;
+      margin-bottom: 3rem;
     }
 
-    &:last-child {
+    &:first-child {
-      margin-bottom: 0;
+      margin-top: 0;
-      margin-bottom: -10px;
+      margin-top: -20px;
     }
 
     &:after {
@@ -280,6 +312,10 @@ i {
 .download-section {
   text-align: center;
   
+  > div {
+    gap: .8rem;
+  }
+
   .btn {
     color: var(--secondary-light);
   }