:root {
    --landing-anim-delay: 5s
}

#landing {
    height: 100dvh;
    position: relative;
    overflow: hidden; 
    display: flex;
    flex-direction:column;
    text-align: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    animation: fade 9s infinite;
}

#landing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    animation: fade-out 5s forwards var(--landing-anim-delay);
    z-index: 0;
}

@keyframes fade-out {
    0% { opacity: 1; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}


@keyframes fade {
    0%, 100% { 
        background-image: url(../../assets/images/landing/Roll1_00000008.webp); 
    }
    16.6% { 
        background-image: url(../../assets/images/landing/Roll1_00000009.webp); 
    }
    33.3% { 
        background-image: url(../../assets/images/landing/Roll1_00000030.webp); 
    }
    50% { 
        background-image: url(../../assets/images/landing/Roll1_00000031.webp); 
    }
    66.6% { 
        background-image: url(../../assets/images/landing/Roll1_00000032.webp); 
    }
    83.3% { 
        background-image: url(../../assets/images/landing/Roll1_00000037.webp); 
    }
}

#landing-text{
    color: var(--maroon);
    font-weight: 500;
    white-space: pre-wrap;
    position: relative;
    z-index: 1;
    /* width: 200px; */
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 1rem;
    margin-left: 1rem;

    padding-left: auto;
    padding-right: auto;
}

#landing-scroll-text {
    font-size: larger;
    font-weight: 300;
    color: var(--white);
    padding-bottom: 1rem;
    animation: fade-in 7s forwards var(--landing-anim-delay);
}

@keyframes fade-in {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}