/*
Theme Name: Music Database Community
Theme URI: https://stoxoptions.com
Description: A professional music database and community website inspired by RateYourMusic. Features include album reviews, artist interviews, concert reviews, user registration, and community forums. Clean, modern design with responsive layout suitable for music enthusiasts and critics.
Author: Prateek Patidar
Author URI: https://accumebiz.tech
Version: 1.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: music-database-community
Tags: music, database, community, reviews, responsive, clean, modern, forum, albums, artists

Alcohol Music Community - Discover, Rate, and Discuss Music
A complete music database solution with user registration, reviews, and community features.
*/

/*
Theme Name: Music Database Community - EXTREME RETRO
Description: Maximum GeoCities 90s nostalgia!
Version: RETRO MAX
*/

/* ULTIMATE 90s BACKGROUND */
body {
    background: #000080;
    background-image: 
        radial-gradient(circle at 20% 80%, #FF00FF 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, #00FFFF 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, #FFFF00 0%, transparent 50%);
    color: #FFFF00;
    font-family: "Comic Sans MS", "Papyrus", cursive, fantasy;
    margin: 0;
    padding: 0;
    animation: backgroundPulse 5s ease-in-out infinite alternate;
}

@keyframes backgroundPulse {
    0% { background-color: #000080; }
    50% { background-color: #800080; }
    100% { background-color: #008080; }
}

/* ANIMATED STARS BACKGROUND */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="50">⭐</text></svg>') 0 0,
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="30">🎵</text></svg>') 30px 30px,
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="40">🎸</text></svg>') 60px 10px;
    background-size: 100px 100px, 80px 80px, 120px 120px;
    opacity: 0.3;
    animation: starMove 30s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes starMove {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-100px) rotate(360deg); }
}

/* CONTAINER WITH EXTREME STYLING */
.container {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(45deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #FF00FF);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
    border: 5px solid #FFFFFF;
    border-style: dashed;
    border-radius: 20px;
    box-shadow: 
        0 0 20px #FFFF00,
        0 0 40px #FF00FF,
        0 0 60px #00FFFF,
        inset 0 0 20px rgba(255,255,255,0.3);
    position: relative;
    z-index: 10;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* HEADER - MAXIMUM RETRO */
.site-header {
    background: linear-gradient(90deg, #FF0000, #FF8000, #FFFF00, #00FF00, #00FFFF, #8000FF, #FF0080);
    background-size: 400% 100%;
    animation: rainbowHeader 3s linear infinite;
    color: #000000;
    text-align: center;
    padding: 30px 20px;
    border-bottom: 10px solid #FFFFFF;
    border-style: double;
    position: relative;
    overflow: hidden;
}

@keyframes rainbowHeader {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

/* FLOATING MUSICAL NOTES */
.site-header::before {
    content: "♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫";
    position: absolute;
    top: 5px;
    left: -100%;
    font-size: 30px;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px #000000;
    animation: musicFloat 20s linear infinite;
    white-space: nowrap;
}

.site-header::after {
    content: "🎵 🎶 🎵 🎶 🎵 🎶 🎵 🎶 🎵 🎶 🎵 🎶";
    position: absolute;
    bottom: 5px;
    right: -100%;
    font-size: 25px;
    animation: musicFloat2 25s linear infinite;
    white-space: nowrap;
}

@keyframes musicFloat {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes musicFloat2 {
    0% { right: -100%; }
    100% { right: 100%; }
}

/* TITLE WITH EXTREME EFFECTS */
.site-title {
    font-size: 60px;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(45deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #FF00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        3px 3px 0px #000000,
        -2px -2px 0px #FFFFFF,
        0 0 10px #FFFF00,
        0 0 20px #FF00FF,
        0 0 30px #00FFFF;
    animation: titlePulse 2s ease-in-out infinite alternate;
    margin: 0;
    letter-spacing: 3px;
}

@keyframes titlePulse {
    0% { transform: scale(1) rotate(-1deg); }
    100% { transform: scale(1.1) rotate(1deg); }
}

.site-description {
    font-size: 20px;
    color: #000000;
    background: #FFFF00;
    padding: 10px 20px;
    border: 3px solid #FF0000;
    border-radius: 50px;
    margin: 15px auto;
    max-width: 400px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 0 15px #FF00FF;
    animation: descriptionBounce 3s ease-in-out infinite;
}

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

/* SEARCH BAR - RETRO STYLE */
.header-search {
    margin: 20px 0;
}

.search-box {
    background: linear-gradient(90deg, #FF00FF, #00FFFF);
    color: #000000;
    border: 5px solid #FFFF00;
    border-style: groove;
    border-radius: 30px;
    padding: 15px 20px;
    font-size: 18px;
    width: 350px;
    font-family: "Comic Sans MS", cursive;
    font-weight: bold;
    text-align: center;
    box-shadow: 
        0 0 10px #FF0000,
        inset 0 0 10px rgba(255,255,255,0.5);
}

.search-box:focus {
    outline: none;
    animation: searchGlow 1s ease-in-out infinite alternate;
    transform: scale(1.05);
}

@keyframes searchGlow {
    0% { box-shadow: 0 0 10px #FF0000, 0 0 20px #FFFF00; }
    100% { box-shadow: 0 0 20px #00FFFF, 0 0 30px #FF00FF; }
}

/* NAVIGATION - EXTREME RETRO */
.nav-menu {
    background: linear-gradient(180deg, #800080, #000080, #008000);
    padding: 15px 0;
    border-bottom: 5px solid #FFFF00;
    border-style: ridge;
}

.nav-menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 8px;
}

.nav-menu a {
    display: block;
    background: linear-gradient(135deg, #FF0000, #FF8000, #FFFF00);
    color: #000000;
    text-decoration: none;
    padding: 15px 25px;
    border: 4px solid #FFFFFF;
    border-style: outset;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    text-shadow: 1px 1px 2px #FFFFFF;
    box-shadow: 
        3px 3px 8px rgba(0,0,0,0.7),
        inset 0 0 5px rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-menu a::before {
    content: "✨";
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 30px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotate(180deg) scale(1.5); opacity: 0.5; }
}

.nav-menu a:hover {
    background: linear-gradient(135deg, #00FF00, #00FFFF, #FF00FF);
    color: #FFFFFF;
    transform: rotate(-3deg) scale(1.15);
    border-style: inset;
    animation: menuHover 0.5s ease-in-out;
    box-shadow: 
        0 0 15px #FFFF00,
        0 0 25px #FF00FF,
        3px 3px 12px rgba(0,0,0,0.8);
}

@keyframes menuHover {
    0%, 100% { transform: rotate(-3deg) scale(1.15); }
    25% { transform: rotate(3deg) scale(1.2); }
    75% { transform: rotate(-2deg) scale(1.1); }
}

/* CONTENT AREA */
.site-content {
    padding: 40px 30px;
    min-height: 600px;
    background: rgba(0,0,0,0.7);
    position: relative;
}

/* MARQUEE TEXT */
.marquee {
    background: linear-gradient(90deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #FF00FF, #FF0000);
    background-size: 300% 100%;
    animation: marqueeColors 4s linear infinite;
    color: #000000;
    padding: 15px;
    margin: 20px 0;
    border: 3px solid #FFFFFF;
    border-style: double;
    overflow: hidden;
    white-space: nowrap;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

@keyframes marqueeColors {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.marquee-content {
    animation: marqueeScroll 15s linear infinite;
}

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

/* CONTENT CARDS - ULTRA RETRO */
.content-card {
    background: 
        linear-gradient(45deg, rgba(255,0,255,0.8), rgba(0,255,255,0.8)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect width="60" height="60" fill="%23800080"/><circle cx="30" cy="30" r="20" fill="%23FF00FF"/></svg>');
    border: 5px solid #FFFF00;
    border-style: groove;
    border-radius: 25px;
    padding: 30px;
    margin: 30px 0;
    box-shadow: 
        0 0 20px #00FFFF,
        0 0 40px #FF00FF,
        inset 0 0 20px rgba(255,255,0,0.3);
    position: relative;
    animation: cardFloat 6s ease-in-out infinite alternate;
}

@keyframes cardFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-10px) rotate(1deg); }
}

.content-card::before {
    content: "🌟✨⭐✨🌟";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF0000;
    color: #FFFF00;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 16px;
    border: 3px solid #FFFFFF;
    animation: starBorder 3s linear infinite;
}

@keyframes starBorder {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

.content-card h2 {
    color: #FFFF00;
    font-size: 32px;
    text-align: center;
    margin-bottom: 25px;
    text-shadow: 
        3px 3px 0px #000000,
        -1px -1px 0px #FFFFFF;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FF0000, #00FF00, #0000FF, #FF00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleRainbow 4s ease-in-out infinite;
    letter-spacing: 2px;
}

@keyframes titleRainbow {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
}

/* BUTTONS - MAXIMUM RETRO */
.btn {
    background: linear-gradient(45deg, #FF0000, #FF8000, #FFFF00, #00FF00);
    background-size: 300% 300%;
    animation: buttonGradient 3s ease infinite;
    color: #000000;
    border: 4px solid #FFFFFF;
    border-style: outset;
    padding: 15px 30px;
    text-decoration: none;
    display: inline-block;
    border-radius: 30px;
    font-weight: bold;
    font-family: "Comic Sans MS", cursive;
    text-transform: uppercase;
    font-size: 16px;
    text-shadow: 1px 1px 2px #FFFFFF;
    box-shadow: 
        5px 5px 15px rgba(0,0,0,0.7),
        inset 0 0 10px rgba(255,255,255,0.3);
    transition: all 0.3s ease;
    position: relative;
}

@keyframes buttonGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn::before {
    content: "🚀";
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    animation: rocketSpin 2s linear infinite;
}

@keyframes rocketSpin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

.btn:hover {
    background: linear-gradient(45deg, #00FFFF, #FF00FF, #FFFF00, #00FF00);
    color: #FFFFFF;
    transform: scale(1.2) rotate(-2deg);
    border-style: inset;
    animation: buttonHover 0.6s ease-in-out infinite alternate;
    box-shadow: 
        0 0 20px #FFFF00,
        0 0 30px #FF00FF,
        5px 5px 20px rgba(0,0,0,0.8);
}

@keyframes buttonHover {
    0% { transform: scale(1.2) rotate(-2deg); }
    100% { transform: scale(1.25) rotate(2deg); }
}

/* FOOTER - RETRO EXTREME */
.site-footer {
    background: 
        linear-gradient(90deg, #800000, #000080, #008000, #800080),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect width="20" height="20" fill="%23FF00FF"/><circle cx="10" cy="10" r="5" fill="%2300FFFF"/></svg>');
    background-size: 400% 100%, 20px 20px;
    animation: footerShift 5s ease infinite;
    color: #FFFF00;
    text-align: center;
    padding: 30px;
    border-top: 10px solid #FFFFFF;
    border-style: ridge;
    position: relative;
}

@keyframes footerShift {
    0% { background-position: 0% 50%, 0 0; }
    100% { background-position: 400% 50%, 20px 20px; }
}

.site-footer::before {
    content: "🎸🎤🎵🎶🎸🎤🎵🎶🎸🎤🎵🎶";
    display: block;
    font-size: 30px;
    margin-bottom: 15px;
    animation: footerIcons 3s ease-in-out infinite alternate;
}

@keyframes footerIcons {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0.7; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .site-title { font-size: 40px; }
    .nav-menu ul { flex-direction: column; align-items: center; }
    .search-box { width: 280px; }
    .content-card { margin: 15px; padding: 20px; }
    .btn { padding: 12px 20px; font-size: 14px; }
}

/* BLINKING TEXT */
.blink {
    animation: blink 1s ease-in-out infinite alternate;
}

@keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* SCROLLING BACKGROUND PATTERN */
body {
    background-attachment: fixed;
}