animated title

app/static/css/partials/_menu.scss

@@ -33,10 +33,6 @@
     font-size: 17px;
     margin-left: var(--spacing);
 
-    &:hover {
-      background-color: #ddd;
-      color: black;
-    }
     @media screen and (max-width: 799px) {
       &.title {
         display: block;
@@ -57,4 +53,4 @@
       font-weight: 700;
       padding-bottom: calc(var(--spacing) / 2);
     }
-}
+}

app/static/css/partials/_titleanimation.scss

@@ -0,0 +1,21 @@
+
+@keyframes animated_title_animation {
+    0%,100% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+.animated-title {
+  .text {
+    //background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
+    background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    background-clip: text;
+    color: transparent;
+    animation: animated_title_animation 60s ease-in-out infinite;
+    background-size: 400% 100%;
+  }
+}

app/static/css/style.scss

@@ -1,5 +1,6 @@
 @import "partials/reset";
 @import "partials/layout";
+@import "partials/titleanimation";
 @import "partials/menu";
 @import "partials/film";
 @import "partials/text";

app/static/js/animation.js

@@ -0,0 +1,12 @@
+document.querySelectorAll('body.animated').forEach(element => {
+    var animationDuration = 60;
+    var randomDuration = Math.random() * animationDuration;
+    element.style.animationDelay = -randomDuration + 's';
+})
+document.querySelectorAll('.animated-title').forEach(element => {
+    var animationDuration = 60;
+    var randomDuration = Math.random() * animationDuration;
+    element.querySelectorAll('.text').forEach(text => {
+        text.style.animationDelay = -randomDuration + 's';
+    }
+})