add accent colour

src/root/colors.css

@@ -3,6 +3,7 @@
     --background: #eee;
     --foreground: #222;
     --foreground-inactive: #777;
+    --accent: lightpink;
 
     /* Colors */
     --color0: #0000ff;

src/root/main.css

@@ -12,10 +12,21 @@ body {
 }
 
 .title {
+    position: relative;
+
+    margin-top: 40px;
     margin-left: 80px;
     font-size: 1.4em;
 }
 
+.title a {
+    transition: color 0.3s;
+}
+
+.title a:hover {
+    color: lightpink;
+}
+
 h1 {
     font-size: var(--font-size);
     color: var(--color1);
@@ -57,7 +68,7 @@ a.fsText {
 
 a.fsText:hover {
     background-color: var(--background);
-    color: var(--foreground);
+    color: var(--accent);
 
     transform: scale(1.1, 1);
 }
@@ -137,17 +148,18 @@ a.fsText:hover {
 .socials i {
     font-size: 2em;
     margin-left: 4px;
+    color: var(--foreground-inactive);
+    transition: transform 0.3s, color 0.3s;
+}
+.socials i:hover {
+    color: var(--accent);
+    transform: translateY(-20%);
 }
 
 .socials a {
-    color: var(--foreground-inactive);
     text-decoration: none;
 
     transition: color 0.3s;
 }
 
-.socials a:hover {
-    color: var(--foreground);
-}
-
 #include planets.css