added demo site

demo/css/utility_classes.css

@@ -0,0 +1,56 @@
+.align-center {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.align-left {
+    margin-left: 0;
+    margin-right: auto;
+    text-align: left;
+}
+
+.align-right {
+    margin-left: auto;
+    margin-right: 0;
+    text-align: right;
+}
+
+.keep { white-space: nowrap; }
+
+/* https://fajarwz.com/blog/how-to-solve-unwanted-css-transitions-on-page-load/ */
+.no-transition,
+.no-transition * {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+
+
+
+@keyframes parallax-background {
+    to { background-position-y: -200px; }
+}
+
+.parallax-background {
+    position: relative;
+    overflow: clip;
+    background: none;
+
+    &::before {
+        animation: parallax-background linear;
+        animation-timeline: view();
+        background-image: var(--parallax-background); /* define --parallax-background in element's style attribute */
+        background-position-x: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        content: '';
+        height: calc(100% + 200px);
+        inset: 0;
+        position: absolute;
+        z-index: -1;
+    }
+}