body {
    overflow-x: clip;
}

.page {
    margin: 0.8rem;
}

#welcome {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 100vh;
}
@media(orientation:portrait) {
    #welcome {
        flex-wrap: wrap-reverse;
    }
}
#welcome::after {
    content: "⌄";
    font-size: 2rem;
    opacity: 0.5;
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    tranform: translate(-50%, -50%);

    animation-timeline: view(block 50% 0%);
    animation-fill-mode: both;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-timing-function: linear;
    animation-name: scroll-top;
}
@keyframes scroll-top {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#list-preview {
    width: 40%;
    min-width: 200px;

    animation-timeline: view(block 10% 90%);
    animation-fill-mode: both;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-timing-function: linear;
    animation-name: to-right;
    position: relative;
}
@keyframes to-right {
    from {
        transform: translateY(0%);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}



.slide {
    padding: 1.2rem;
    margin: 0.8rem;
    border-radius: 0.8rem;
    background: rgba(255,255,255,0.1);
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;

    animation-timeline: view(block 90% 0%);
    animation-fill-mode: both;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-timing-function: linear;
}
.slide-left {
    flex-direction: row-reverse;

    animation-name: from-left;
}
.slide-right {
    animation-name: from-right;
}
.slide img {
    max-width: 40%;
}

@keyframes from-left {
    from {
        transform: translateX(-20%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes from-right {
    from {
        transform: translateX(20%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}