/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* Modern gradient background with animated elements */
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 140, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 140, 0, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #2c2c2c 0%, #5a5a5a 50%, #3d3d3d 100%);
    position: relative;
    overflow: hidden;
}

/* Animated background elements */
.bg-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.1;
    filter: blur(1px);
}

.bg-element.orange {
    background: linear-gradient(45deg, #ff8c00, #ffb347);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
}

.bg-element.black {
    background: linear-gradient(45deg, #000000, #333333);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Image wrapper for centering */
.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90%;
    max-height: 90%;
    z-index: 10;
}

/* Center image styling with subtle effects */
.center-image {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(255, 140, 0, 0.1);
    transition: all 0.4s ease;
    backdrop-filter: blur(0px);
}

.center-image:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 
        0 35px 70px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(255, 140, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .center-image {
        max-height: 70vh;
    }
    
    .image-wrapper {
        max-width: 95%;
        max-height: 95%;
    }
}

@media (max-width: 480px) {
    .center-image {
        max-height: 60vh;
    }
}

/* Smooth floating animations */
@keyframes slowFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.1;
    }
    25% {
        transform: translateY(-20px) translateX(10px) scale(1.1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px) translateX(-15px) scale(1.2);
        opacity: 0.2;
    }
    75% {
        transform: translateY(-30px) translateX(5px) scale(1.05);
        opacity: 0.25;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.3;
    }
}

@keyframes drift {
    0% {
        transform: translateX(-50px) rotate(0deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.2;
    }
    100% {
        transform: translateX(50px) rotate(180deg);
        opacity: 0;
    }
}

/* Background element sizes */
.bg-element.small {
    width: 30px;
    height: 30px;
}

.bg-element.medium {
    width: 60px;
    height: 60px;
}

.bg-element.large {
    width: 100px;
    height: 100px;
}