/* Footer Styles */
.footer-section {
    font-family: "Courier New", monospace;
    border-top: 2px dashed #ff69b4;
    margin-top: 45px;
    padding-top: 15px;
    animation: footerGlow 2s infinite;
    font-size: 18px;
    text-align: center;
    background-color: #1a0033;
    padding: 20px;
}

@keyframes footerGlow {
    0% { border-color: #ff69b4; }
    50% { border-color: #00ffff; }
    100% { border-color: #ff69b4; }
}

.footer-text {
    margin-bottom: 20px;
}

.footer-text a {
    color: #ff69b4;
    text-decoration: underline;
    animation: footerLinkPulse 1s infinite;
}

@keyframes footerLinkPulse {
    0% { color: #ff69b4; }
    50% { color: #00ffff; }
    100% { color: #ff69b4; }
}

.footer-text a:hover {
    color: #00ffff;
    text-decoration: none;
    animation: footerLinkSpin 0.5s infinite;
}


/* Rainbow Text Animation */
.footer-counter {
    margin: 20px 0;
}

.footer-counter span {
    animation: rainbowShift 2s infinite, wave 2s ease-in-out infinite;
    font-size: 24px;
    display: inline-block;
}

@keyframes rainbowShift {
    0% { color: #ff0000; }
    10% { color: #ff8800; }
    20% { color: #ffff00; }
    30% { color: #00ff00; }
    40% { color: #0000ff; }
    50% { color: #4b0082; }
    60% { color: #9400d3; }
    70% { color: #ff1493; }
    80% { color: #ff69b4; }
    90% { color: #00ffff; }
    100% { color: #ff0000; }
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Apply different animation delays for the wave effect */
.footer-counter span:nth-child(1) { animation-delay: 0.0s; }
.footer-counter span:nth-child(2) { animation-delay: 0.1s; }
.footer-counter span:nth-child(3) { animation-delay: 0.2s; }
.footer-counter span:nth-child(4) { animation-delay: 0.3s; }
.footer-counter span:nth-child(5) { animation-delay: 0.4s; }
.footer-counter span:nth-child(6) { animation-delay: 0.5s; }
.footer-counter span:nth-child(7) { animation-delay: 0.6s; }
.footer-counter span:nth-child(8) { animation-delay: 0.7s; }
.footer-counter span:nth-child(9) { animation-delay: 0.8s; }
.footer-counter span:nth-child(10) { animation-delay: 0.9s; }
.footer-counter span:nth-child(11) { animation-delay: 1.0s; }
.footer-counter span:nth-child(12) { animation-delay: 1.1s; }
.footer-counter span:nth-child(13) { animation-delay: 1.2s; }

/* Webring and Links */
.footer-webring {
    margin: 20px 0;
}

.footer-webring img {
    max-width: 100%;
    height: auto;
}

.footer-links {
    margin-top: 20px;
}

.footer-links img {
    margin: 0 5px;
    vertical-align: middle;
    height: 31px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-links img {
        margin: 5px;
    }
    
    .footer-webring img {
        max-width: 100%;
    }
}