moar variables

src/components/AboutMe/AboutMe.scss

@@ -81,6 +81,10 @@ button {
   background: none!important;
   border: none;
   padding: 0!important;
-  color: #1890ff;
+  color: var(--link-color);
   cursor: pointer;
 }
+
+a {
+  color: var(--link-color);
+}

src/components/Footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-  background: var(--header);
+  background: var(--footer);
   margin: 10px;
   border-radius: 5px;
 

src/components/ProjectGrid.scss

@@ -138,7 +138,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
 
   h3 {
     line-height: normal;
-    color: darkgrey;
+    color: var(--grid-element-subheader);
     margin-bottom: 3px;
   }
 
@@ -249,6 +249,6 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   font-size: 24px;
   color: black;
 
-  background: var(--link-icon-background);
+  background: var(--chainlink-icon-background);
   border-radius: 5px;
 }

src/vars.scss

@@ -1,11 +1,28 @@
 :root {
   --text: black;
-  --background: #2A363B;
+  --background: #3767a8;
   --header: #84B7DB;
+  --footer: var(--header);
   --about-me: #F1F1F1;
   --grid-background: #FECEA8;
   --grid-header-background: #1C1C1c;
   --grid-header-text: #F1F1F1;
   --grid-element-background: #F1F1F1;
-  --link-icon-background: rgba(224, 255, 255, 0.7);
+  --chainlink-icon-background: rgba(224, 255, 255, 0.7);
+ --link-color: #1890ff;
+ --grid-element-subheader: darkgrey;
 }
+//:root {
+//  --text: black;
+//  --background: #FFFFFF;
+//  --header: #55CDFC;
+//  --footer: #55CDFC;
+//  --about-me: #F7A8B8;
+//  --grid-background: #F7A8B8;
+//  --grid-header-background: #55CDFC;
+//  --grid-header-text: black;
+//  --grid-element-background: #FFFFFF;
+//  --chainlink-icon-background: rgba(224, 255, 255, 0.7);
+//  --link-color: white;
+//  --grid-element-subheader: #F7A8B8;
+//}