diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss
index a7377b7a..a0114b12 100644
--- a/assets/css/components/_logo.scss
+++ b/assets/css/components/_logo.scss
@@ -1,40 +1,36 @@
-$_desaturate_amount: 10%;
-
-$_color_1: hsl(28, 100%, 48%);
-$_color_2: hsl(69, 100%, 43%);
-$_color_3: hsl(200, 100%, 50%);
-$_color_4: hsl(278, 100%, 60%);
-
-$_color_1_dark: hsl(28, 85%, 48%);
-$_color_2_dark: hsl(69, 85%, 43%);
-$_color_3_dark: hsl(200, 85%, 50%);
-$_color_4_dark: hsl(278, 85%, 60%);
-
 :root {
   --color-1: hsl(28, 100%, 48%);
-  --color-2: hsl(69, 100%, 43%);
-  --color-3: hsl(200, 100%, 50%);
-  --color-4: hsl(278, 100%, 60%);
+  --color-2: hsl(41, 100%, 50%);
+  --color-3: hsl(69, 100%, 43%);
+  --color-4: hsl(103, 80%, 46%);
+  --color-5: hsl(200, 100%, 50%);
+  --color-6: hsl(234, 100%, 68%);
+  --color-7: hsl(278, 100%, 63%);
+  --color-8: hsl(335, 85%, 63%);
 
   @media (prefers-color-scheme: dark) {
     --color-1: hsl(28, 90%, 48%);
-    --color-2: hsl(69, 90%, 43%);
-    --color-3: hsl(200, 90%, 50%);
-    --color-4: hsl(278, 90%, 60%);
+    --color-2: hsl(41, 90%, 50%);
+    --color-3: hsl(69, 90%, 43%);
+    --color-4: hsl(103, 70%, 46%);
+    --color-5: hsl(200, 90%, 50%);
+    --color-6: hsl(234, 90%, 68%);
+    --color-7: hsl(278, 90%, 60%);
+    --color-8: hsl(335, 80%, 63%);
   }
 }
 
 .logo__wrapper {
-  width: 7rem;
+  width: 10rem;
   line-height: 0;
-  margin-bottom: 2em;
+  padding-bottom: 0.5em;
 }
 
 .logo__color {
-  animation-duration: 0.6s;
+  animation-duration: 30s;
   animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  animation-play-state: paused;
+  animation-timing-function: ease-in-out;
+  animation-play-state: playing;
 }
 
 .logo__color_1 {
@@ -50,46 +46,127 @@ $_color_4_dark: hsl(278, 85%, 60%);
   animation-name: cycle_color_4;
 }
 
-.logo__link:hover,
-.logo__link:focus {
-  .logo__color {
-    animation-play-state: running;
-  }
+.logo__color_1 {
+  fill: var(--color-1);
+}
+.logo__color_2 {
+  fill: var(--color-3);
+}
+.logo__color_3 {
+  fill: var(--color-5);
+}
+.logo__color_4 {
+  fill: var(--color-7);
 }
-
-.logo__color_1 { fill: var(--color-1); }
-.logo__color_2 { fill: var(--color-2); }
-.logo__color_3 { fill: var(--color-3); }
-.logo__color_4 { fill: var(--color-4); }
 
 @keyframes cycle_color_1 {
   0%,
-  100% { fill: var(--color-1); }
-  25%  { fill: var(--color-2); }
-  50%  { fill: var(--color-3); }
-  75%  { fill: var(--color-4); }
+  100% {
+    fill: var(--color-1);
+  }
+  12.5% {
+    fill: var(--color-2);
+  }
+  25% {
+    fill: var(--color-3);
+  }
+  37.5% {
+    fill: var(--color-4);
+  }
+  50% {
+    fill: var(--color-5);
+  }
+  62.5% {
+    fill: var(--color-6);
+  }
+  75% {
+    fill: var(--color-7);
+  }
+  87.5% {
+    fill: var(--color-8);
+  }
 }
 
 @keyframes cycle_color_2 {
   0%,
-  100% { fill: var(--color-2); }
-  25%  { fill: var(--color-3); }
-  50%  { fill: var(--color-4); }
-  75%  { fill: var(--color-1); }
+  100% {
+    fill: var(--color-3);
+  }
+  12.5% {
+    fill: var(--color-4);
+  }
+  25% {
+    fill: var(--color-5);
+  }
+  37.5% {
+    fill: var(--color-6);
+  }
+  50% {
+    fill: var(--color-7);
+  }
+  62.5% {
+    fill: var(--color-8);
+  }
+  75% {
+    fill: var(--color-1);
+  }
+  87.5% {
+    fill: var(--color-2);
+  }
 }
 
 @keyframes cycle_color_3 {
   0%,
-  100% { fill: var(--color-3); }
-  25%  { fill: var(--color-4); }
-  50%  { fill: var(--color-1); }
-  75%  { fill: var(--color-2); }
+  100% {
+    fill: var(--color-5);
+  }
+  12.5% {
+    fill: var(--color-6);
+  }
+  25% {
+    fill: var(--color-7);
+  }
+  37.5% {
+    fill: var(--color-8);
+  }
+  50% {
+    fill: var(--color-1);
+  }
+  62.5% {
+    fill: var(--color-2);
+  }
+  75% {
+    fill: var(--color-3);
+  }
+  87.5% {
+    fill: var(--color-4);
+  }
 }
 
 @keyframes cycle_color_4 {
   0%,
-  100% { fill: var(--color-4); }
-  25%  { fill: var(--color-1); }
-  50%  { fill: var(--color-2); }
-  75%  { fill: var(--color-3); }
+  100% {
+    fill: var(--color-7);
+  }
+  12.5% {
+    fill: var(--color-8);
+  }
+  25% {
+    fill: var(--color-1);
+  }
+  37.5% {
+    fill: var(--color-2);
+  }
+  50% {
+    fill: var(--color-3);
+  }
+  62.5% {
+    fill: var(--color-4);
+  }
+  75% {
+    fill: var(--color-5);
+  }
+  87.5% {
+    fill: var(--color-6);
+  }
 }