diff --git a/assets/styles/_animations.scss b/assets/styles/_animations.scss
index 594ca78..40e9006 100644
--- a/assets/styles/_animations.scss
+++ b/assets/styles/_animations.scss
@@ -2,7 +2,16 @@
 // ANIMATIONS
 // --------------------------------------------------
 
-@keyframes expand-outline {
+@keyframes expand-outline-2px {
+    0% {
+        outline-offset: 0;
+    }
+    100% {
+        outline-offset: 2px;
+    }
+}
+
+@keyframes expand-outline-4px {
     0% {
         outline-offset: 0;
     }
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index ef04a21..b34ec33 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -139,9 +139,9 @@ a {
     }
 
     &:focus-visible {
-        outline: 1px dashed var(--accent-color);
+        outline: 1px dashed var(--accent-color-light);
         outline-offset: 2px;
-        animation: expand-outline 200ms ease-in-out;
+        animation: expand-outline-2px 200ms ease-in-out;
     }
 }
 
@@ -172,9 +172,9 @@ button {
     }
 
     &:focus-visible {
-        outline: 1px dashed var(--accent-color);
+        outline: 1px dashed var(--accent-color-light);
         outline-offset: 4px;
-        animation: expand-outline 200ms ease-in-out;
+        animation: expand-outline-4px 200ms ease-in-out;
     }
 }