Added some different effects with the colors

css/main.css

@@ -47,8 +47,6 @@ body {
       .main #other-content .sqr:hover {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
-      .main #other-content .sqr h4 {
-        color: #4DD0E1; }
       .main #other-content .sqr a {
         color: #9E9E9E;
         font-size: 16px;
@@ -58,3 +56,11 @@ body {
           color: #fff;
           text-decoration: none;
           transition: .1s ease-in; }
+    .main #other-content .media h4, .main #other-content .media a:hover {
+      color: #4DD0E1; }
+    .main #other-content .work h4, .main #other-content .work a:hover {
+      color: #F06292; }
+    .main #other-content .social h4, .main #other-content .social a:hover {
+      color: #FFF176; }
+    .main #other-content .others h4, .main #other-content .others a:hover {
+      color: #A1887F; }

index.html

@@ -16,28 +16,28 @@
             <input id="search-bar-input" placeholder="Search something on Google"></input>
         </div>
         <div id="other-content">
-            <div class="sqr">
+            <div class="sqr media">
                 <h4>Media</h4>
                 <a href="">Spotify</a>
                 <a href="">Youtube Music</a>
                 <a href="">Netflix</a>
                 <a href="">Youtube</a>
             </div>
-            <div class="sqr">
+            <div class="sqr work">
                 <h4>Work</h4>
                 <a href="">Github</a>
                 <a href="">Heroku</a>
                 <a href="">Localhost</a>
                 <a href="">Personal</a>
             </div>
-            <div class="sqr">
+            <div class="sqr social">
                 <h4>Social</h4>
                 <a href="">Reddit</a>
                 <a href="">Unixpornlove</a>
                 <a href="">r/unixporn</a>
                 <a href="">r/mk</a>
             </div>
-            <div class="sqr">
+            <div class="sqr others">
                 <h4>Others</h4>
                 <a href="">neo4j local</a>
                 <a href="">rarbg</a>

scss/main.scss

@@ -1,6 +1,10 @@
 $background: #263238;
 $foreground: #fff;
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+$media: #4DD0E1;
+$work: #F06292;
+$social: #FFF176;
+$others: #A1887F;
 
 .roboto {
     font-family: 'Roboto', sans-serif;
@@ -65,10 +69,6 @@ body {
                 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
             }
 
-            h4 {
-                color: #4DD0E1;
-            }
-
             a {
                 color: #9E9E9E;
                 font-size: 16px;
@@ -82,5 +82,30 @@ body {
                 }
             }
         }
+
+        .media {
+            h4, a:hover {
+                color: $media;
+            }
+        }
+
+        .work {
+            h4, a:hover {
+                color: $work;
+            }
+        }
+
+        .social {
+            h4, a:hover {
+                color: $social;
+            }
+            
+        }
+
+        .others {
+            h4, a:hover {
+                color: $others;
+            }
+        }
     }
 }