/* ============================================ */
/* GLOBAL STYLES FOR THE ENTIRE WEBSITE */
/* ============================================ */

/* Set font, background, text color, and remove default margin/padding */
body {
    font-family: Arial, sans-serif;
    /* Sets the font for the whole page */
    background-color: #111;
    /* Dark background for general pages */
    color: #ea84cd;
    /* Default text color */
    text-align: center;
    /* Center text by default */
    margin: 0;
    /* Remove default body margin */
    padding: 0;
    /* Remove default body padding */
}

/* Headings - global style for h1 */
h1 {
    color: #000000;
    /* Bright pink color for headings */
    font-size: 3rem;
    /* Make it big and prominent */
}

/* Headings - global style for p */
p {
    color: #000000;
    /* Bright pink color for headings */
    font-size: 1.5rem;
    /* Make it big and prominent */
}

/* General button styles for the entire site */
.btn {
    display: inline-block;
    /* Makes <a> act like a button */
    padding: 15px 30px;
    /* Space inside the button */
    margin: 10px;
    /* Space between buttons */
    /* Dark button color by default */
    color: #f0f0f0;
    /* Text color */
    text-decoration: none;
    /* Remove underline from links */
    font-size: 1.2em;
    /* Slightly bigger text */
    border-radius: 8px;
    /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    /* Smooth hover animations */
}

/* Hover effect for general buttons */
.btn:hover {
    background-color: #ff4081;
    /* Button turns pink on hover */
    transform: scale(1.05);
    /* Slight grow animation */
    box-shadow: 0 0 15px #ff4081;
    /* Glow effect on hover */
}

/* ============================================ */
/* DJ MAIN BUTTONS PAGE (Dj_music.html) */
/* ============================================ */

/* Container for DJ page buttons */
#dj-main-buttons {
    display: flex;
    /* Flexbox layout */
    flex-direction: column;
    /* Stack buttons vertically */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    gap: 25px;
    /* Space between buttons */
    height: 100vh;
    /* Full viewport height */

    /* Animated gradient background for a fancy look */
    background: linear-gradient(-45deg, #ff0080, #ff8c00, #00ffff, #8c00ff);
    background-size: 400% 400%;
    /* Makes animation smoother */
    animation: gradientBG 15s ease infinite;
    /* Runs the gradient animation */
}

#en_music-main-buttons {
    display: flex;
    /* Flexbox layout */
    flex-direction: column;
    /* Stack buttons vertically */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    gap: 25px;
    /* Space between buttons */
    height: 100vh;
    /* Full viewport height */

    /* Animated gradient background for a fancy look */
    background: linear-gradient(-45deg, #ff0080, #ff8c00, #00ffff, #8c00ff);
    background-size: 400% 400%;
    /* Makes animation smoother */
    animation: gradientBG 15s ease infinite;
    /* Runs the gradient animation */
}

#en_home-main-buttons {
    display: flex;
    /* Flexbox layout */
    flex-direction: column;
    /* Stack buttons vertically */
    justify-content: center;
    /* Center vertically */
    align-items: center;
    /* Center horizontally */
    gap: 25px;
    /* Space between buttons */
    height: 100vh;
    /* Full viewport height */

    /* Animated gradient background for a fancy look */
    background: linear-gradient(-45deg, #ff0080, #ff8c00, #00ffff, #8c00ff);
    background-size: 400% 400%;
    /* Makes animation smoother */
    animation: gradientBG 15s ease infinite;
    background-position: 0% 50%;
}

/* Animated gradient keyframes used by pages */
@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* DJ page buttons override global .btn styles */
#dj-main-buttons .btn {
    background-color: #1db954;
    /* Bright green color for DJ buttons */
    color: white;
    /* Text color */
    padding: 18px 40px;
    /* Slightly larger padding */
    border-radius: 12px;
    /* Rounded corners */
    font-size: 1.4rem;
    /* Bigger font for main page buttons */
}

/* Hover effect for DJ buttons */
#dj-main-buttons .btn:hover {
    background-color: #8dcca333;
    /* Brighter green on hover */
    transform: scale(1.1);
    /* Grow slightly */
    box-shadow: 0 0 25px #facccc;
    /* Glowing effect */
}

/* Optional descriptions under buttons */
#dj-main-buttons .btn-desc {
    display: block;
    /* Forces description under button */
    font-size: 0.9rem;
    /* Smaller font for descriptions */
    color: #ccc;
    /* Light grey text */
    margin-top: 5px;
    /* Space above description */
}

/* ============================================ */
/* RESPONSIVE STYLES (for smaller screens) */
/* ============================================ */
@media (max-width: 600px) {

    /* Make DJ buttons smaller on mobile */
    #dj-main-buttons .btn {
        padding: 12px 25px;
        font-size: 1.1rem;
    }

    /* Make headings smaller on mobile */
    h1 {
        font-size: 2em;
    }
}

/* DJ page buttons */
#dj-main-buttons .btn {
    background-color: #1db954;
    /* Solid green color */
    color: white;
    /* White text for contrast */
    padding: 18px 40px;
    /* Bigger button padding */
    border-radius: 12px;
    /* Rounded corners */
    font-size: 1.4rem;
    /* Large text */
    text-align: center;
    /* Center text inside button */
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

/* Hover effect */
#dj-main-buttons .btn:hover {
    background-color: #17c34f;
    /* Slightly brighter green on hover */
    transform: scale(1.05);
    /* Slight grow effect */
    box-shadow: 0 0 20px #1ed760;
    /* Glowing effect */
}