Highlight contact section when navigating to it.

src/scss/styles.scss

@@ -94,6 +94,7 @@ body.home main {
   @extend .pt-3;
 }
 
+section,
 main>* {
   @extend .pt-4;
   @extend .pb-3;
@@ -269,8 +270,7 @@ img.grayscale-effect {
 .gradient-to-top-light::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, transparent 67%, rgba(var(--bs-light-rgb), 1) 100%);
@@ -333,4 +333,37 @@ img.grayscale-effect {
 .socials {
   display: flex;
   gap: .5rem;
+}
+
+.scrollto-highlight {
+  position: relative;
+  overflow: hidden;
+  animation: highlight-fade 1s ease;
+}
+
+.scrollto-highlight::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.20);
+  pointer-events: none;
+  animation: highlight-overlay-fade 1s ease-in-out forwards;
+}
+
+@keyframes highlight-overlay-fade {
+
+  0% {
+    opacity: 0;
+  }
+
+  5%,
+  90% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
 }