/* ========================================
   Glassmorphism Background
   Beautiful gradient background to showcase glass effects
   ======================================== */

body {
    background: linear-gradient(135deg,
            #667eea 0%,
            #764ba2 25%,
            #f093fb 50%,
            #4facfe 75%,
            #00f2fe 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    min-height: 100vh;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Alternative: Subtle pattern background */
body.pattern-bg {
    background:
        linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, .03) 10px, rgba(255, 255, 255, .03) 20px);
}

/* Dark mode background */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg,
                #1a1a2e 0%,
                #16213e 25%,
                #0f3460 50%,
                #533483 75%,
                #1a1a2e 100%);
    }
}