/* Root Variables */
:root {
    --ribbon-color: #ED2939;

    --dark-text-color: #36454F;

    --page-background-color: #F0F0F0;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
}

.ribbon {
    height: 35px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 50px;
    border-bottom: 3px solid var(--dark-text-color);
    background-color: var(--ribbon-color);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.wrapper {
    position: relative;
    border: 1px solid var(--dark-text-color);
    width: 90%;
    max-width: 900px;
    margin-inline: auto;

    & .item {
    height: 100px;
    width: 100px;
    background-color: transparent;
    position: absolute;
    left: 950px;
    }

    & .marquee1 {
        animation: movement 6s linear infinite 0s;
    }

    & .marquee2 {
        animation: movement 6s linear infinite 1s;
    }

    & .marquee3 {
        animation: movement 6s linear infinite 2s;
    }

    & .marquee4 {
        animation: movement 6s linear infinite 3s;
    }

    & .marquee5 {
        animation: movement 6s linear infinite 4s;
    }

    & .marquee6 {
        animation: movement 6s linear infinite 5s;
    }
}

/* Keyframes */
@keyframes movement {
    0% {
        transform: translateX(0px);
        opacity: 0;
    }

    20% {
        transform: translateX(-220px);
        background-color: red;
        opacity: 1;
    }

    80% {
        transform: translateX(-880px);
        opacity: 1;
    }

    100% {
        transform: translateX(-1100px);
        opacity: 0;
    }
}

/* Mobile View */

@media screen and (max-width:430px) {
    .wrapper {
        max-width: 430px;

        & .item {
            height: 70px;
            width: 70px;
            left: 355px;
        }
        
        & .marquee1 {
            animation: movement 4s linear infinite 1s;
        }

        & .marquee2 {
            animation: movement 4s linear infinite 2s;
        }

        & .marquee3 {
            animation: movement 4s linear infinite 3s;
        }

        & .marquee4 {
            animation: movement 4s linear infinite 4s;
        }

        & .marquee5 {
            animation: movement 4s linear infinite 5s;
        }

        & .marquee6 {
            animation: movement 4s linear infinite 6s;
        }
    }

    @keyframes movement {
        0% {
            transform: translateX(0px);
            opacity: 1;
        }

        80% {
            transform: translateX(-329.6px);
            opacity: 0.7;
        }

        100% {
            transform: translateX(-430px);
            opacity: 0;
            /* background-color: red; */
        }
    }
}