fixed alignment and spacing, and highlight issues

style.css

@@ -725,7 +725,7 @@ input[type=button]:hover {
 .nav-social-links {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 35px;
 }
 
 .social-links {
@@ -739,7 +739,7 @@ input[type=button]:hover {
 
 .social-links a {
   display: inline-flex;
-  margin: 0 0.5rem;
+  margin: 0 0.2rem;
   background: none;
 }
 
@@ -748,6 +748,7 @@ input[type=button]:hover {
   height: 1rem;
   fill: var(--light-color);
   transition: fill 0.2s ease;
+  transform: translateY(-1.5px);
 }
 
 .social-links a:hover svg {
@@ -852,12 +853,6 @@ header.site-header .header-wrapper .site-header-wrapper {
   justify-content: space-between;
 }
 
-header.site-header .header-wrapper .site-header-wrapper .nav-social-links {
-  display: flex;
-  align-items: center;
-  grid-gap: 20px;
-}
-
 header.site-header .header-wrapper .site-header-wrapper .site-branding {
   min-width: var(--logo-size);
   display: flex;
@@ -909,6 +904,21 @@ header.site-header.sticky-header {
   z-index: 100;
 }
 
+.site-title .logo {
+  text-decoration: none;
+  background: linear-gradient(currentColor, currentColor);
+  background-size: 0 1px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: color 0.2s ease, background-size 0.2s ease;
+}
+
+.site-title .logo:hover,
+.site-title .logo:focus {
+  color: var(--hover-color);
+  background-size: 100% 1px;
+}
+
 /* Social Links */
 
 @media only screen and (max-width: 768px) {