/* Scrolling Text Animation Styles - GeoCities Retro Edition */

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

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

@-webkit-keyframes rainbow {
    0% { color: #ff0000 !important; }
    14% { color: #ff7f00 !important; }
    28% { color: #ffff00 !important; }
    42% { color: #00ff00 !important; }
    56% { color: #0000ff !important; }
    70% { color: #4b0082 !important; }
    85% { color: #9400d3 !important; }
    100% { color: #ff0000 !important; }
}

@keyframes rainbow {
    0% { color: #ff0000 !important; }
    14% { color: #ff7f00 !important; }
    28% { color: #ffff00 !important; }
    42% { color: #00ff00 !important; }
    56% { color: #0000ff !important; }
    70% { color: #4b0082 !important; }
    85% { color: #9400d3 !important; }
    100% { color: #ff0000 !important; }
}

@-webkit-keyframes glow {
    0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 0, 0, 0.7) !important; }
    14% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 127, 0, 0.7) !important; }
    28% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 0, 0.7) !important; }
    42% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(0, 255, 0, 0.7) !important; }
    56% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.7) !important; }
    70% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(75, 0, 130, 0.7) !important; }
    85% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(148, 0, 211, 0.7) !important; }
    100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 0, 0, 0.7) !important; }
}

@keyframes glow {
    0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 0, 0, 0.7) !important; }
    14% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 127, 0, 0.7) !important; }
    28% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 0, 0.7) !important; }
    42% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(0, 255, 0, 0.7) !important; }
    56% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.7) !important; }
    70% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(75, 0, 130, 0.7) !important; }
    85% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(148, 0, 211, 0.7) !important; }
    100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 0, 0, 0.7) !important; }
}

.scrolling-text {
    white-space: nowrap;
    color: #ff0000; /* Fallback color in case animation doesn't work */
    -webkit-animation: 
        scroll 15s linear infinite !important,
        rainbow 7s linear infinite !important,
        glow 7s linear infinite !important;
    animation: 
        scroll 15s linear infinite !important,
        rainbow 7s linear infinite !important,
        glow 7s linear infinite !important;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    letter-spacing: 1px;
}

/* Optional: pause animation on hover */
.scrolling-text:hover {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* Add a retro background to the container */
.scrolling-text-container {
    background: #ffffff;
    padding: 6px 0;
    border-top: 2px solid #ff00ff;
    border-bottom: 2px solid #00ffff;
    margin: 10px 0;
    overflow: hidden; /* Ensure text doesn't break the container */
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scrolling-text {
        font-size: 1.25rem;
    }
}