.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;
    }
}