Added committee emails (fixing)

src/components/Contact/contact.scss

@@ -6,16 +6,15 @@
   place-items: center;
   align-content: center;
 
-  /* FIX 1: Push the content down below the navbar, and pull it up from the footer */
-  padding-top: 8rem; 
+  /* FIX 1: Reduced padding-top to bring the header up */
+  padding-top: 5rem; 
   padding-bottom: 6rem; 
 
   h1 {
-    /* FIX 2: Shrink the massive desktop font size */
     font-size: 4rem; 
     text-align: center;
+    margin-bottom: 0.5rem; /* Keeps it snug to the first list */
     
-    /* FIX 3: Shrink it even more on mobile phones */
     @media (max-width: 768px) {
       font-size: 2.5rem;
     }
@@ -31,19 +30,19 @@
 
     h2 {
       font-size: 2.5rem;
-      margin-top: 4rem; 
+      margin-top: 3.5rem; /* Pulled up slightly */
       margin-bottom: 1.5rem;
       text-align: center;
       color: $dark;
 
-      /* Make the subheader a bit smaller on mobile too */
       @media (max-width: 768px) {
         font-size: 2rem;
       }
     }
 
     ul {
-      row-gap: 1rem;
+      /* FIX 2: Switched to standard gap for perfectly even spacing */
+      gap: 0.75rem; 
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -53,6 +52,9 @@
       padding: 0;
 
       li {
+        margin: 0; /* Resets any default browser margins */
+        padding: 0;
+
         a {
           display: flex;
           align-items: center;
@@ -61,7 +63,6 @@
           color: $dark;
           font-size: 1.5rem;
           
-          /* Prevent long emails from breaking off the edge of small phone screens */
           @media (max-width: 768px) {
             font-size: 1.15rem;
           }
@@ -69,9 +70,12 @@
           svg {
             color: $dark;
             width: 24px;
-            height: auto;
-            flex-shrink: 0; /* Prevents the icon from squishing if text wraps */
+            /* FIX 3: Force exact height so FB/IG icons match the Mail icon */
+            height: 24px; 
+            flex-shrink: 0; 
+            display: block; /* Removes weird invisible text baselines */
           }
+          
           &:hover {
             border-bottom: 2px solid $dark;
           }