@keyframes parallax {
    from {
    }
    to {
        top: calc(100vh - 100%);
    }
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}

.background-outer {
    top: 0;
    position: fixed;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: start;
    justify-content: center;
    background-color: #e5e4fb;
}

.background-inner {
    position: relative;
    overflow: clip;
    width: 100%;
    max-width: 1280px;
}

.parallax {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    image-rendering: pixelated;
    object-fit: cover;
}

section {
    max-width: 800px;
    min-width: 300px;
    margin: 50px;
}

.content {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.header {
    margin-top: 100px;
    padding-top: 100px;
    position: relative;
    image-rendering: pixelated;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 90%;
}

img.background0 {
    position: relative;
    animation: none;
    top: 0;
}

@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 0.7) {
    @supports (animation-timeline: scroll())
    {
        .background-inner {
            animation: background linear;
            animation-timeline: scroll();
        }
        .parallax {
            animation: parallax linear;
            animation-timeline: scroll();
        }
        img.background1 {
            top: 8%
        }
        img.background2 {
            top: 12%;
        }
        img.background3 {
            top: 30%;
        }
        img.background4 {
            top: 32%;
        }
        img.background5 {
            top: 50%;
        }
    }
}

.dialog {
    position: relative;
    border-style: solid;
    border-width: 3px;
    border-color: #FFAD37;
    background-color: rgb(0 0 0 / 85%);
    padding: 15px 25px;
    align-items: center;
    align-content: center;
    text-align: center;
}
.main > .content.dark {
    background: #433;
}

.main > .content.style1 {
    background-color: #ff778433;
    border-color: yellow;
    border-width: 5px;
    border-style: solid;
}

.cta {
    padding: 10px;
    margin-bottom: 30px;
    margin-top: 30px;
    background-color: #928fdd;
    color: #fff;
    border-radius: 24px;
}
.main > .content.style2 {
    background: url("images/bgtr.svg") top right no-repeat, url("images/bgbl.svg") bottom left no-repeat, url("images/overlay.png"), linear-gradient(45deg, #384955, #655361, #85505f);
}

.main > .content.style3 {
    background: url("images/bgtr.svg") top right no-repeat, url("images/bgbl.svg") bottom left no-repeat, url("images/overlay.png"), linear-gradient(45deg, #5f796b, #3a4e59, #2f394e);
}

.main > .content.style4 {
    padding-top: 0;
    background: #fff;
}

ul.carousel {
    margin-top: 30px;
    padding: 0;
    display: flex;
    gap: 4vw;
    overflow-x: scroll;
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    anchor-name: --my-carousel;
    scrollbar-width: thin;
    scrollbar-color: #928fdd transparent;
}

ul.carousel>li {
    position: relative;
    list-style-type: none;
    scroll-snap-align: center;
    padding: 0;
    flex: 0 0 100%;
}

ul.carousel>li>img {
    object-fit: contain;
    position: relative;
    width: 100%;
}

ul::scroll-button(*) {
    border: 0;
    font-size: 2rem;
    background: none;
    color: #928fdd;
    opacity: 0.7;
    cursor: pointer;
    position: absolute;
    position-anchor: --my-carousel;
}

ul.carousel::scroll-button(*):hover,
ul.carousel::scroll-button(*):focus {
    opacity: 1;
}

ul.carousel::scroll-button(*):active {
    translate: 1px 1px;
}

ul.carousel::scroll-button(*):disabled {
    opacity: 0.2;
    cursor: unset;
}
ul.carousel::scroll-button(left) {
    content: "◄" / "Previous";
    right: calc(anchor(left) - 35px);
    bottom: calc(anchor(bottom) + 20px);
}

ul.carousel::scroll-button(right) {
    content: "►" / "Next";
    left: calc(anchor(right) - 35px);
    bottom: calc(anchor(bottom) + 20px);
}