add a nice progress bar

onboarding/package/assets/data/css/styles.css

@@ -7,6 +7,7 @@
     --width: 800px;
     --height: 600px;
     --scale: 1.0;
+    --slide-duration: 10s;
 }
 
 @font-face {
@@ -159,16 +160,21 @@ button.slide-button.next {
 }
 .slide .description {
     position: relative;
-    padding: 1rem 8rem;
+    padding: 0.5rem 8rem 1rem;
     height: calc(var(--height) / 4);
     background-color: white;
-
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .slide .description h1,
 .slide .description p {
-    margin: 0.5rem 0;
+    margin: 0 0 0.5rem 0;
+}
+.slide .description p:last-child {
+    margin-bottom: 0;
 }
 
 .slide .description h1 {
@@ -180,6 +186,27 @@ button.slide-button.next {
     margin-top: 0;
 }
 
-.slide .description p:last-of-type {
-    margin-bottom: 0;
+.slide .description code {
+    background-color: var(--medium-grey);
+    padding: 0.15rem 0.5rem;
+    color: white;
+}
+
+.progressBar {
+    position: fixed;
+    height: .333rem;
+    width: 0%;
+    background-color: #ccc;
+    mix-blend-mode: multiply;
+    /* opacity: 0.5; */
+    bottom: 0px;
+    
+    transition: width;
+    transition-duration: 0s;
+    transition-timing-function: linear;
+}
+
+.progressBar.playing {
+    width: 100%;
+    transition-duration: var(--slide-duration);
 }