diff --git a/assets/sass/components/_logo.scss b/assets/sass/components/_logo.scss
index 2661511d..69f443dc 100644
--- a/assets/sass/components/_logo.scss
+++ b/assets/sass/components/_logo.scss
@@ -26,55 +26,54 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   .logo__color {
     animation-duration: 0.6s;
     animation-iteration-count: infinite;
+    animation-timing-function: linear;
   }
   .logo__color_1 {
     animation-name: cycle_color_1;
-    fill: $_color_3;
   }
   .logo__color_2 {
     animation-name: cycle_color_2;
-    fill: $_color_4;
   }
   .logo__color_3 {
     animation-name: cycle_color_3;
-    fill: $_color_1;
   }
   .logo__color_4 {
     animation-name: cycle_color_4;
-    fill: $_color_2;
   }
 }
 
-@keyframes cycle_color_1 {
-  from { fill: $_color_1; }
-  25%  { fill: $_color_2; }
-  50%  { fill: $_color_3; }
-  75%  { fill: $_color_4; }
-  to   { fill: $_color_1; }
-}
+@media (prefers-color-scheme: light) {
+  @keyframes cycle_color_1 {
+    0%,
+    100% { fill: $_color_1; }
+    25%  { fill: $_color_2; }
+    50%  { fill: $_color_3; }
+    75%  { fill: $_color_4; }
+  }
 
-@keyframes cycle_color_2 {
-  from { fill: $_color_2; }
-  25%  { fill: $_color_3; }
-  50%  { fill: $_color_4; }
-  75%  { fill: $_color_1; }
-  to   { fill: $_color_2; }
-}
+  @keyframes cycle_color_2 {
+    0%,
+    100% { fill: $_color_2; }
+    25%  { fill: $_color_3; }
+    50%  { fill: $_color_4; }
+    75%  { fill: $_color_1; }
+  }
 
-@keyframes cycle_color_3 {
-  from { fill: $_color_3; }
-  25%  { fill: $_color_4; }
-  50%  { fill: $_color_1; }
-  75%  { fill: $_color_2; }
-  to   { fill: $_color_3; }
-}
+  @keyframes cycle_color_3 {
+    0,
+    100% { fill: $_color_3; }
+    25%  { fill: $_color_4; }
+    50%  { fill: $_color_1; }
+    75%  { fill: $_color_2; }
+  }
 
-@keyframes cycle_color_4 {
-  from { fill: $_color_4; }
-  25%  { fill: $_color_1; }
-  50%  { fill: $_color_2; }
-  75%  { fill: $_color_3; }
-  to   { fill: $_color_4; }
+  @keyframes cycle_color_4 {
+    0%,
+    100% { fill: $_color_4; }
+    25%  { fill: $_color_1; }
+    50%  { fill: $_color_2; }
+    75%  { fill: $_color_3; }
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -84,34 +83,34 @@ $_color_4_dark: desaturate($_color_4, $_desaturate_amount);
   .logo__color_4 { fill: $_color_4_dark; }
 
   @keyframes cycle_color_1 {
-    from { fill: $_color_1_dark; }
+    0%,
+    100% { fill: $_color_1_dark; }
     25%  { fill: $_color_2_dark; }
     50%  { fill: $_color_3_dark; }
     75%  { fill: $_color_4_dark; }
-    to   { fill: $_color_1_dark; }
   }
 
   @keyframes cycle_color_2 {
-    from { fill: $_color_2_dark; }
+    0%,
+    100% { fill: $_color_2_dark; }
     25%  { fill: $_color_3_dark; }
     50%  { fill: $_color_4_dark; }
     75%  { fill: $_color_1_dark; }
-    to   { fill: $_color_2_dark; }
   }
 
   @keyframes cycle_color_3 {
-    from { fill: $_color_3_dark; }
+    0%,
+    100% { fill: $_color_3_dark; }
     25%  { fill: $_color_4_dark; }
     50%  { fill: $_color_1_dark; }
     75%  { fill: $_color_2_dark; }
-    to   { fill: $_color_3_dark; }
   }
 
   @keyframes cycle_color_4 {
-    from { fill: $_color_4_dark; }
+    0%,
+    100% { fill: $_color_4_dark; }
     25%  { fill: $_color_1_dark; }
     50%  { fill: $_color_2_dark; }
     75%  { fill: $_color_3_dark; }
-    to   { fill: $_color_4_dark; }
   }
 }
diff --git a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 63f39ae9..552379e4 100644
--- a/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/sass/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -472,75 +472,66 @@ main {
 .logo__link:hover .logo__color,
 .logo__link:focus .logo__color {
   animation-duration: 0.6s;
-  animation-iteration-count: infinite; }
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; }
 
 .logo__link:hover .logo__color_1,
 .logo__link:focus .logo__color_1 {
-  animation-name: cycle_color_1;
-  fill: #00a9ff; }
+  animation-name: cycle_color_1; }
 
 .logo__link:hover .logo__color_2,
 .logo__link:focus .logo__color_2 {
-  animation-name: cycle_color_2;
-  fill: #b346e2; }
+  animation-name: cycle_color_2; }
 
 .logo__link:hover .logo__color_3,
 .logo__link:focus .logo__color_3 {
-  animation-name: cycle_color_3;
-  fill: #ff6800; }
+  animation-name: cycle_color_3; }
 
 .logo__link:hover .logo__color_4,
 .logo__link:focus .logo__color_4 {
-  animation-name: cycle_color_4;
-  fill: #e8ff00; }
+  animation-name: cycle_color_4; }
 
-@keyframes cycle_color_1 {
-  from {
-    fill: #ff6800; }
-  25% {
-    fill: #e8ff00; }
-  50% {
-    fill: #00a9ff; }
-  75% {
-    fill: #b346e2; }
-  to {
-    fill: #ff6800; } }
-
-@keyframes cycle_color_2 {
-  from {
-    fill: #e8ff00; }
-  25% {
-    fill: #00a9ff; }
-  50% {
-    fill: #b346e2; }
-  75% {
-    fill: #ff6800; }
-  to {
-    fill: #e8ff00; } }
-
-@keyframes cycle_color_3 {
-  from {
-    fill: #00a9ff; }
-  25% {
-    fill: #b346e2; }
-  50% {
-    fill: #ff6800; }
-  75% {
-    fill: #e8ff00; }
-  to {
-    fill: #00a9ff; } }
-
-@keyframes cycle_color_4 {
-  from {
-    fill: #b346e2; }
-  25% {
-    fill: #ff6800; }
-  50% {
-    fill: #e8ff00; }
-  75% {
-    fill: #00a9ff; }
-  to {
-    fill: #b346e2; } }
+@media (prefers-color-scheme: light) {
+  @keyframes cycle_color_1 {
+    0%,
+    100% {
+      fill: #ff6800; }
+    25% {
+      fill: #e8ff00; }
+    50% {
+      fill: #00a9ff; }
+    75% {
+      fill: #b346e2; } }
+  @keyframes cycle_color_2 {
+    0%,
+    100% {
+      fill: #e8ff00; }
+    25% {
+      fill: #00a9ff; }
+    50% {
+      fill: #b346e2; }
+    75% {
+      fill: #ff6800; } }
+  @keyframes cycle_color_3 {
+    0,
+    100% {
+      fill: #00a9ff; }
+    25% {
+      fill: #b346e2; }
+    50% {
+      fill: #ff6800; }
+    75% {
+      fill: #e8ff00; } }
+  @keyframes cycle_color_4 {
+    0%,
+    100% {
+      fill: #b346e2; }
+    25% {
+      fill: #ff6800; }
+    50% {
+      fill: #e8ff00; }
+    75% {
+      fill: #00a9ff; } } }
 
 @media (prefers-color-scheme: dark) {
   .logo__color_1 {
@@ -552,46 +543,42 @@ main {
   .logo__color_4 {
     fill: #a861c7; }
   @keyframes cycle_color_1 {
-    from {
+    0%,
+    100% {
       fill: #df6e20; }
     25% {
       fill: #cedf20; }
     50% {
       fill: #209fdf; }
     75% {
-      fill: #a861c7; }
-    to {
-      fill: #df6e20; } }
+      fill: #a861c7; } }
   @keyframes cycle_color_2 {
-    from {
+    0%,
+    100% {
       fill: #cedf20; }
     25% {
       fill: #209fdf; }
     50% {
       fill: #a861c7; }
     75% {
-      fill: #df6e20; }
-    to {
-      fill: #cedf20; } }
+      fill: #df6e20; } }
   @keyframes cycle_color_3 {
-    from {
+    0%,
+    100% {
       fill: #209fdf; }
     25% {
       fill: #a861c7; }
     50% {
       fill: #df6e20; }
     75% {
-      fill: #cedf20; }
-    to {
-      fill: #209fdf; } }
+      fill: #cedf20; } }
   @keyframes cycle_color_4 {
-    from {
+    0%,
+    100% {
       fill: #a861c7; }
     25% {
       fill: #df6e20; }
     50% {
       fill: #cedf20; }
     75% {
-      fill: #209fdf; }
-    to {
-      fill: #a861c7; } } }
+      fill: #209fdf; } } }