body {
    background-color: #0d0221;
    color: #00ff95;
    font-family: 'Press Start 2P', cursive;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.3;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

header h1 {
    font-size: 3rem;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.6), 0 0 20px rgba(255, 0, 255, 0.6); /* Transparent glow */
    animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
        0 0 4px rgba(255, 0, 255, 0.6),
        0 0 11px rgba(255, 0, 255, 0.6),
        0 0 19px rgba(255, 0, 255, 0.6),
        0 0 40px rgba(255, 0, 255, 0.6),
        0 0 80px rgba(255, 0, 255, 0.6),
        0 0 90px rgba(255, 0, 255, 0.6),
        0 0 100px rgba(255, 0, 255, 0.6),
        0 0 150px rgba(255, 0, 255, 0.6); /* Transparent flicker glow */
    }
    20%, 24%, 55% {        
        text-shadow: none;
    }
}

.tagline {
    font-size: 1rem;
    color: #00ff95;
    margin-top: -1rem;
    letter-spacing: 3px;
    margin-bottom: 6rem; /* Consistent spacing after tagline */
}

p {
    line-height: 1.5; /* Standardize line spacing for all paragraphs */
}

#about {
    margin-bottom: 6rem; /* Consistent spacing after section */
}

#about p {
    font-size: 1.1rem;
}

.artist-image {
    width: 150px;
    height: 150px;
    border: 3px solid #00ff95;
    margin: 2rem auto;
    box-shadow: 0 0 15px #00ff95;
    display: block; /* Ensure it behaves like a block element for margin auto */
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

/* Removed specific margin for #stats to use general section margin-top */
#stats {
    margin-bottom: 6rem; /* Consistent spacing after section */
}

#stats h2 {
    font-size: 2rem;
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
    margin-bottom: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-link {
    text-decoration: none;
    color: inherit;
}

.stat-block {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid #00ff95;
    padding: 1.5rem;
    height: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px #00ff95;
}

.stat-icon {
    font-size: 3rem;
    margin-bottom: 2rem; /* Increased space below emoji */
    line-height: 1;
}

.stat-block h3 {
    font-size: 2.5rem;
    margin: 0 0 1rem 0; /* Added space below number */
    color: #ff00ff;
}

.stat-block p {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
}

#remix-request h2 {
    font-size: 2rem;
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

#remix-request {
    margin-bottom: 6rem; /* Consistent spacing after section */
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.form-group {
    width: 100%;
}

input, textarea {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid #00ff95;
    color: #00ff95;
    font-family: 'Press Start 2P', cursive;
    padding: 1rem;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

input::placeholder, textarea::placeholder {
    color: #00ff95;
    opacity: 0.7;
}

input:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 15px #00ff95;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

button {
    background-color: #ff00ff;
    color: #0d0221;
    font-family: 'Press Start 2P', cursive;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 10px #ff00ff;
}

button:hover {
    background-color: #00ff95;
    color: #0d0221;
    transform: scale(1.05);
    box-shadow: 0 0 15px #00ff95;
}

.honeypot {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.socials {
    margin-bottom: 6rem; /* Consistent spacing after section */
}

.socials h2 {
    font-size: 2rem;
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

.social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid #00ff95;
    color: #00ff95;
    padding: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.social-link:hover {
    background-color: #00ff95;
    color: #0d0221;
    box-shadow: 0 0 15px #00ff95;
    transform: translateY(-5px);
}

#success-message {
    text-align: center; /* Ensure content is centered */
    margin-bottom: 6rem; /* Consistent spacing after section */
}

#success-message h2 {
    font-size: 2rem;
    color: #ff00ff;
    text-shadow: 0 0 5px #ff00ff;
}

.button-link {
    display: inline-block;
    background-color: #ff00ff;
    color: #0d0221;
    font-family: 'Press Start 2P', cursive;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 2rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 10px #ff00ff;
}

.button-link:hover {
    background-color: #00ff95;
    color: #0d0221;
    transform: scale(1.05);
    box-shadow: 0 0 15px #00ff95;
}

.footer-link {
    color: #00ff95; /* Set link color to green */
    text-decoration: none; /* Remove default underline */
    transition: text-shadow 0.3s ease;
}

.footer-link:hover {
    text-shadow: 0 0 5px #00ff95; /* Subtle glow on hover */
}

.mute-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ff00ff;
    color: #0d0221;
    border: 2px solid #00ff95;
    padding: 0.8rem 1rem;
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 0 10px #ff00ff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    animation: dance 1.715s infinite ease-in-out; /* Apply dancing animation with 140 BPM feel, full cycle */
}

.mute-button:hover {
    background-color: #00ff95;
    box-shadow: 0 0 15px #00ff95;
}

.music-sample-text {
    position: fixed;
    bottom: 95px; /* Adjusted position further above the button */
    right: 20px;
    color: #00ff95;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    z-index: 999;
    display: block; /* Visible on desktop */
    text-align: right;
    width: 150px; /* Adjust width as needed */
}

/* Dancing animation keyframes */
@keyframes dance {
    0% { transform: translateY(0); } /* Start at rest */
    25% { transform: translateY(-8px); } /* Move up */
    50% { transform: translateY(-8px); } /* Halt at top */
    75% { transform: translateY(0); } /* Move down to rest */
    100% { transform: translateY(0); } /* Halt at rest */
}

footer {
    margin-top: 6rem; /* Consistent spacing with other sections */
    font-size: 0.8rem;
    opacity: 0.7;
}

@media (max-width: 600px) {
    .container {
        padding: 1rem;
    }

    header h1 {
        font-size: 2.2rem;
    }

    .tagline {
        font-size: 0.8rem;
        margin-bottom: 4rem; /* Consistent spacing after tagline on mobile */
    }

    #about {
        margin-bottom: 4rem; /* Consistent spacing after section on mobile */
    }

    #about .placeholder-image {
        width: 120px;
        height: 120px;
        font-size: 4rem;
    }

    #about p {
        font-size: 1rem; /* Smaller font size for about text on mobile */
    }

    p {
        font-size: 0.9rem; /* Smaller font size for general paragraphs on mobile */
    }

    #stats {
        margin-bottom: 4rem; /* Consistent spacing after section on mobile */
    }

    #stats h2, #remix-request h2, .socials h2, #success-message h2 {
        font-size: 1.5rem;
    }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .stat-block h3 {
        font-size: 2rem;
    }

    input, textarea, button, .button-link {
        font-size: 0.9rem;
        padding: 0.8rem;
    }

    #remix-request {
        margin-bottom: 4rem; /* Consistent spacing after section on mobile */
    }

    .socials {
        margin-bottom: 4rem; /* Consistent spacing after section on mobile */
    }

    #success-message {
        margin-bottom: 4rem; /* Consistent spacing after section on mobile */
    }

    footer {
        margin-top: 4rem; /* Consistent spacing with other sections on mobile */
    }

    .mute-button {
        padding: 0.6rem 0.8rem; /* Smaller padding on mobile */
        font-size: 0.8rem; /* Smaller font size on mobile */
        bottom: 10px;
        right: 10px;
    }

    .music-sample-text {
        display: none; /* Hide on mobile */
    }
}