Finer contrast ratio on links

components/Footer.tsx

@@ -11,16 +11,16 @@ const Footer = () => {
           © {year}
         </div>
         <div className="socials">
-          <a href="https://twitter.com/GuusvanMeerveld">
+          <a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
             <FaTwitter className="img" />
           </a>
-          <a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ">
+          <a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ" aria-label="youtube link">
             <FaYoutube className="img" />
           </a>
-          <a href="https://ko-fi.com/guusvanmeerveld">
+          <a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
             <FaCoffee className="img" />
           </a>
-          <a href="https://github.com/guusvanmeerveld">
+          <a href="https://github.com/guusvanmeerveld" aria-label="github link">
             <FaGithub className="img" />
           </a>
         </div>

styles/sass/index.scss

@@ -2,6 +2,7 @@
   --background: white;
   --secondary: #f4f5f6;
   --borders: #e4e4e4;
+  --links: #9a36d8;
   --foreground: #606c76;
 }
 
@@ -11,6 +12,7 @@
   }
 
   --background: #212123;
+  --links: #c181e8;
   --secondary: #1c1c1c;
   --borders: #3c3838;
   --foreground: rgb(236, 235, 235);
@@ -22,6 +24,10 @@ body {
   color: var(--foreground);
 }
 
+a {
+  color: var(--links);
+}
+
 @import "nav.scss";
 @import "landing.scss";
 @import "project.scss";