marquee.css

/* code stolen shamelessly from indian w3schools */
/* modified by me to make it more annoying :3 */

/* Container styles */
.scrolling-text-container {
    background-color: #990000;
    overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-family: 'Times New Roman', Times, serif;
    color: #ffff00;
    font-size: 40pt;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* fuck you no pausing */
/* Pause the animation when a user hovers over it */
/* .scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
} */

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}