fix merge conflict, minor change to film

app/static/css/partials/_ascroll.scss

@@ -1,22 +1,31 @@
 #ascroll {
   font-family: "noto_sans";
   width: 100%;
-  max-width: 1080px;
-  margin: auto;
+  color: #222;
 
   h1 {
-    margin: 4px;
-    margin-top: 32px;
-    font-size: 24px;
+    padding: 4px;
+    padding-top: 32px;
+    font-size: 20px;
     letter-spacing: 1px;
     font-weight: bold;
+    max-width: 1080px;
+    margin: auto;
   }
   h2 {
-    margin: 4px;
+    padding: 4px;
+    max-width: 1080px;
+    margin: auto;
   }
   .intro {
-    margin: 4px;
-    margin-bottom: 64px;
+    padding: 4px;
+    padding-bottom: 64px;
+    max-width: 1080px;
+    margin: auto;
+  }
+  .vbox {
+    max-width: 1080px;
+    margin: auto;
   }
   .player {
     position: absolute;
@@ -31,6 +40,8 @@
   .annotation {
     min-height: 100vh;
     .frame {
+      max-width: 1080px;
+      margin: auto;
       img {
         width: 100%;
         height: auto;
@@ -42,7 +53,9 @@
       }
     }
     .text {
-      margin: 20px 20px;
+      max-width: 1080px;
+      margin: auto;
+      padding: 20px 20px;
       font-size: 22px;
       line-height: 26px;
     }

app/static/css/partials/_layout.scss

@@ -19,11 +19,14 @@
         //color: #000;
     }
 }
-body {
+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%;
-    color: #eee;
+}
+
+body {
+    color: #ddd;
     font-family: "noto_sans", sans-serif;
     font-size: 20px;
     overflow-x: hidden;

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/_text.scss

@@ -63,3 +63,21 @@ main > .texts {
     }
   }
 }
+
+
+main > .index {
+  text-align: center;
+  padding-top: 48px;
+  font-size: 26px;
+  line-height: 1.3;
+
+}
+
+main > .about {
+  line-height: 1.2;
+  margin: 16px;
+  p {
+    padding-bottom: 24px;
+  }
+
+}

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";