Finetune scrolling header navigation

src/_includes/js/main.js

@@ -1,7 +1,7 @@
 document.documentElement.classList.replace('no-js', 'js');
 
 const options = {
-    rootMargin: '0px 0px -50% 0px'
+    rootMargin: '0px 0px -60% 0px'
 };
 const observer = new IntersectionObserver(entries => {
   entries.forEach(entry => {

src/scss/critical.scss

@@ -6,13 +6,13 @@
 @use './components/button';
 @use './components/skip-link';
 
-:target:before {
+html {
-  content: "";
+  scroll-padding-top: 2rem;
-  display: block;
-  height: 80px;
-  margin: -80px 0 0;
-}
 
+  @media screen and (max-width: 767px) {
+    scroll-padding-top: 8rem;
+  }
+}
 body {
   --start: var(--primary-light);
   --end: var(--secondary);
@@ -180,8 +180,10 @@ i {
 
 .about-section, 
 .projects-section,
-.experiences-section {
+.experiences-section,
+.download-section {
   padding-block: 2rem;
+  margin-block: 3.5rem;
 }
 .about {
   display: flex;
@@ -278,7 +280,6 @@ i {
   
 .download-section {
   text-align: center;
-  margin-block: 3.5rem;
   
   .btn {
     color: var(--secondary-light);