split animations for text and background into 2 separate keyframe animations

app/static/css/partials/_film.scss

@@ -91,7 +91,7 @@ main > .film {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); 
-  animation: fadeIn 1s linear 0.4s forwards;
+  animation: fade_in 1s linear 0.4s forwards;
   opacity: 0;
 }
 

app/static/css/partials/_layout.scss

@@ -13,20 +13,33 @@
 @keyframes background_animation {
     0%,100% {
         background-position: 0 0;
-        //color: #ddd;
     }
 
     50% {
         background-position: 100% 0;
-        //color: #000;
     }
 }
+
+@keyframes text_animation {
+    0%,100% {
+        color: #ddd;
+    }
+
+    50% {
+        color: #000;
+    }
+}
+
 body.animated {
     background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
 }
 
+body.animated-text {
+    animation: text_animation 60s ease-in-out infinite;
+}
+
 body {
     color: #ddd;
     font-family: "noto_sans", sans-serif;
@@ -52,7 +65,7 @@ nav {
 }
 
 // Animations: Fade In
-@keyframes fadeIn {
+@keyframes fade_in {
   0% {
     opacity: 0;
   }