style(Footer) Made link icons bigger, and more tweaks

Components/Shared/FooterComponent.razor

@@ -3,21 +3,21 @@
 <div class="footerContainer" xmlns="http://www.w3.org/1999/html">
     <div class="footerSocials">
 
-        <a href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/discussions" target="_blank">
+        <a class="footerIcon" href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/discussions" target="_blank">
             <i class="fa-brands fa-github"></i>
         </a>
 
-        <a href="mailto:igpfanreference@jonathanmccaffrey.com" target="_blank">
+        <a class="footerIcon" href="mailto:igpfanreference@jonathanmccaffrey.com" target="_blank">
             <i class="fa-solid fa-envelope"></i>
         </a>
 
-        <a href="https://discord.gg/uMq8bMGeeN" target="_blank">
+        <a class="footerIcon" href="https://discord.gg/uMq8bMGeeN" target="_blank">
             <i class="fa-brands fa-discord"></i>
         </a>
-        <a href="https://www.youtube.com/channel/UCQx88d5C12yp4l7uszNYrdQ" target="_blank">
+        <a class="footerIcon" href="https://www.youtube.com/channel/UCQx88d5C12yp4l7uszNYrdQ" target="_blank">
             <i class="fa-brands fa-youtube"></i>
         </a>
-        <a href="https://www.twitch.tv/jonathanmccaffrey" target="_blank">
+        <a class="footerIcon" href="https://www.twitch.tv/jonathanmccaffrey" target="_blank">
             <i class="fa-brands fa-twitch"></i>
         </a>
     </div>
@@ -29,14 +29,30 @@
 
 
 <style>
+    .footerIcon {
+        font-size: 24px;
+        padding: 8px;
+        background-color: rgba(255,255,255,0.05);
+        border: 2px solid rgba(255,255,255,0.1);
+        border-radius: 6px;
+        line-height: 0;
+    }
+    
+    .footerIcon:hover {     
+        color: #8fc5ff;
+        background-color: rgba(200,200,255,0.1);
+        border: 2px solid rgba(140,140,255,0.4);
+    }
+            
+
     .footerContainer {
         width: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding-top: 8px;
-        padding-bottom: 96px;
-        gap: 12px;
+        padding-bottom: 102px;
+        gap: 24px;
     }
     
     .footerSocials {