@charset "utf-8";

/**
 * Michele Christmas 2024
 * Author: stephen@blacknight
 * Description: Custom styles.
 */
        
body {
    height: 100vh;
    margin: 0;
    background: 
        linear-gradient(
            -135deg,
            rgba(30, 46, 65, 0.95),
            rgba(18, 27, 36, 0.95),
            rgba(11, 73, 35, 0.95),
            rgba(7, 85, 67, 0.95),
            rgba(62, 30, 77, 0.95),
            rgba(12, 50, 79, 0.95),
            rgba(14, 21, 28, 0.95)
        ),
        url('../img/main-bg.jpg') center/cover no-repeat;
    background-size: 1600% 1600%, cover;
    background-blend-mode: exclusion;
    animation: gradientAnimation 20s linear infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%, center;
    }
    20% {
        background-position: 20% 50%, center;
    }
    40% {
        background-position: 40% 50%, center;
    }
    60% {
        background-position: 60% 50%, center;
    }
    80% {
        background-position: 80% 50%, center;
    }
    100% {
        background-position: 100% 50%, center;
    }
}

@media (max-width: 576px) {
    body {
        animation: gradientAnimation 15s linear infinite;
    }
}

.pulse {
    animation: pulseAnimation 1.5s infinite;
}

@keyframes pulseAnimation {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.hover-effect:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    background-color: rgba(255, 255, 255, 0.2); /* Add slight highlight effect */
}

h1 {
    animation: h1-fade-in 0.1s ease-in-out;
}

@keyframes h1-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#playButton {
    z-index: 20;
}

#myAudio {
    z-index: 100;
}

.social {
    animation: social-fade-in 1s ease-in-out;
    z-index: 20;
}

@keyframes social-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}