.ticker-tape-container {
    overflow: hidden;
    background-color: transparent;

    color: white;
    white-space: nowrap;
    position: absolute;
    bottom: -2px;
    position: relative;
}

.ticker-tape-filter-before, .ticker-tape-filter-after{
    content: '';
    position: absolute;
    height: 100%;
    width: 10%;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.0) 100%);
    pointer-events: none;
    z-index: 5;
}

.ticker-tape-filter-after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.0) 100%);
}

.ticker-tape {
    font-weight: bold;
    display: inline-flex;
    width: fit-content;
    white-space: nowrap;

    animation: scroll-right 10s linear infinite;
}

.ticker-tape-negative, .ticker-tape-positive {
    font-size: 21px; 
    white-space: pre;
    font-family: 'Tomorrow-bold';
}

.ticker-tape-negative {
    color: deeppink
}

.ticker-tape-positive {
    color: rgb(0, 255, 235);
}

/* Scrolling animation */
@keyframes scroll-right {
    0% {
        transform: translateX(-50%); /* Start off-screen to the right */
    }
    100% {
        transform: translateX(0%); /* Move off-screen to the left */
    }
}

@media (min-width: 1000px) {
    .ticker-tape {
        animation: scroll-right 20s linear infinite;
    }
}

@media (min-width: 1920px) {
    .ticker-tape {
        animation: scroll-right 30s linear infinite;
    }
}