footer {
    border-top: 1px solid var(--t-color);
    z-index: 100;
}

footer > * {
    width: 100%;
    height: var(--marquee-height);
}

#f-marquee-container {
    animation: footerMarquee 10s linear infinite;
    white-space: nowrap; 
    will-change: transform;
}
@media only screen and (min-width: 768px) {#f-marquee-container {animation: footerMarquee 12s linear infinite;}}
@media only screen and (min-width: 1200px) {#f-marquee-container {animation: footerMarquee 25s linear infinite;}}
@media only screen and (min-width: 2048px) {#f-marquee-container {animation: footerMarquee 30s linear infinite;}}

@keyframes footerMarquee {
    from {transform: translateX(0);}
    to {transform: translateX(-50%);}
}