.marquee-container {
    /* Styles for the visible message area */
    width: 100%;
    overflow: hidden; /* Hides the text outside the container */
    background-color: #ff0000; /* EAS-like red background */
    color: white;
    padding: 10px 0;
    white-space: nowrap; /* Keeps text in a single line */
    box-sizing: border-box;
    font-family: monospace; /* EAS style font */
    font-weight: bold;
}

.marquee-content {
    /* Styles for the content inside the container */
    display: flex; /* Aligns the duplicated spans side-by-side */
    animation: scrolling 15s linear infinite; /* Apply the animation */
}

@keyframes scrolling {
    /* Define the animation movement */
    -100% {
        transform: translateX(0%); /* Start position */
    }
    100% {
        transform: translateX(-100%); /* Move left by the full width of one copy */
    }
}