#aha-alerts {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #d00d15;
    color: white;
    padding: 5px 0;
}

#aha-alerts .alerts {
    display: inline-block;
    width: max-content;
    padding-left: 100%;
    /* show the marquee just outside the paragraph */
    will-change: transform;
    animation: marquee 40s linear infinite;
}

#aha-alerts .alerts span {
    margin-right: 50px;
}

#aha-alerts .alerts:hover {
    animation-play-state: paused
}

#aha-alerts a {
    color: white;
    text-decoration: underline;
}
#aha-alerts a:hover {
    opacity: .8;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
    #aha-alerts .alerts {
        animation-iteration-count: 1;
        animation-duration: 0.01;
        /* instead of animation: none, so an animationend event is
         * still available, if previously attached.
         */
        width: auto;
        padding-left: 0;
    }
}