diff --git a/static/css/colors.css b/static/css/colors.css
index 4485f7f..7b7d239 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -12,6 +12,7 @@
     --focus-outline-color: #f00;
     --link-clicked: #B250D8;
     --link-unclicked: #d80;
+    --link-active: lab(100% 0% 100%);
     --header-bg: hsl(0,0%,15%);
     --nav-link-color: #6B0;
     --nav-link-bg-color: hsl(0,0%,25%);
@@ -21,6 +22,8 @@
     --blockquote-bg: rgb(29, 31, 33);
     --highlight-bg: #fff;
     --highlight-fg: #000;
+    --nav-link-bg-color-active: #118411;
+    --nav-link-color-active: white;
 }
 }
 /*
@@ -41,6 +44,7 @@
     --focus-outline-color: #f00;
     --link-unclicked: #2535B4;
     --link-clicked: #832244;
+    --link-active: lab(20% 80% -80%);
     /*#E6DDE6
      * #dce2e5
      *
@@ -57,6 +61,8 @@
     --blockquote-bg: rgb(226,224,222);
     --highlight-bg: #000;
     --highlight-fg: #fff;
+    --nav-link-bg-color-active: #118411;
+    --nav-link-color-active: white;
 }
 }
 }
@@ -69,6 +75,11 @@
 .nav-link:hover {
   background: var(--nav-link-bg-color-hover);
 }
+
+.nav-link:active {
+    background: var(--nav-link-bg-color-active);
+    color: var(--nav-link-color-active)
+}
 }
 @layer baseline{
 body {
@@ -89,7 +100,9 @@ a {
 a:visited {
     color: var(--link-clicked);
 }
-
+a:active {
+    color: var(--link-active)
+}
 #header {
     background: var(--header-bg);
 }