bad CSS demo for timeline

app/static/css/partials/_ascroll.scss

@@ -1,5 +1,5 @@
 #ascroll {
-  font-family: "Noton Sans";
+  font-family: "noto_sans";
   width: 100%;
   max-width: 1080px;
   margin: auto;

app/static/css/partials/_film.scss

@@ -35,22 +35,24 @@
 
 
 main > .film {
-  max-width: 1080px;
+  
   margin: auto;
   .info {
-    margin: var(--spacing) var(--spacing-2);
     margin-bottom: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
+    text-align: center;
 
     h1 {
-      font-size: 24px;
+      font-size: 20px;
-      margin: 24px 0;
+      margin: 0 0 24px 0;
     }
     h2 {
+      font-size: 18px;
       margin: 24px 0;
     }
     .details {
+      font-size: 18px;
       margin-top: var(--spacing-2);
     }
     .bio {
@@ -60,9 +62,9 @@ main > .film {
       }
     }
   }
-  video {
+  //video {
-    width: 100%;
+    //width: 100%;
-  }
+  //}
   .play {
     text-align: center;
     margin: var(--spacing);
@@ -85,3 +87,48 @@ main > .film {
     }
   }
 }
+
+body {
+  background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%);
+}
+
+.info-meta {
+  display: inline-block;
+  position: absolute;
+  margin: 0 auto;
+  max-width: 600px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+}
+
+.info-meta, .bio-block {
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 2px;
+  //margin: var(--spacing) var(--spacing-2);
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.bio-block {
+  font-size: 18px;
+  margin-top: 400px;  
+}
+
+.video-block {
+  height: 100vh;
+  padding-bottom: 50px;
+  padding-top: 50px;
+
+  video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    height: 100vh;
+    width: auto;
+    margin: 0 auto;
+  }
+}

app/static/css/partials/_layout.scss

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

app/templates/film.html

@@ -8,12 +8,17 @@
 	--bg-color-4: {{ film.color_4 }};
 }
 
+body {
+	background-attachment: fixed;
+}
+
 </style>
 
 <div class="film">
 	<div class="info">
+		<div class="info-meta">
 			<h1>
-			<span>{{ film.data.title | safe }}</span>
+				<span class="font-bold">{{ film.data.title | safe }}</span>
 				<span>{{ film.data.title_zh | safe }}</span>
 			</h1>
 			<h2>
@@ -24,7 +29,11 @@
 			<div class="details">
 				Year: {{ film.data.date}}, Runtime: {{ film.duration }}
 			</div>
+		</div>	
+		<div class="video-block">			
 			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
+		</div>
+		<div class="bio-block">
 			<p>{{ film.data.summary|safe }}</p>
 			<div class="bio">
 				<div class="en">
@@ -35,6 +44,7 @@
 				</div>
 			</div>
 		</div>					
+	</div>
 	<div class="play">
 		<div>
 			<a href="" id="play-fullscreen">Play</a>