The Surrealist Art Platform is more than a digital space—it is a living ecosystem designed to dissolve barriers between creators and audiences, tradition and experimentation, local and global.

Learn more about our cooperative

/* Custom CSS for surreal effects, font application, and solid black background */
body {
font-family: ‘Inter’, sans-serif;
color: #e2e8f0; /* Light gray for general text */
line-height: 1.75;
overflow-x: hidden; /* Prevent horizontal scroll due to potential weird overlaps */
}

/* Solid black background for the entire page */
.background-color-container {
background-color: #000000; /* Solid black */
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}

/* Applying the decorative font for the main title */
.cinzel-decorative {
font-family: ‘Cinzel Decorative’, cursive;
}

/* Subtle pulsing animation for the moon element */
@keyframes pulse-float {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 1;
}
50% {
transform: translateY(-5px) scale(1.05);
opacity: 0.9;
}
}
.animate-pulse-float {
animation: pulse-float 4s ease-in-out infinite;
}

/* Animation for a very subtle “breathing” text effect */
@keyframes text-breath {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.005); opacity: 0.98; }
}
.animate-text-breath {
animation: text-breath 10s ease-in-out infinite alternate;
}

/* Animation for a subtle glow on interactive elements or borders */
@keyframes border-glow {
0%, 100% { border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 0 5px rgba(139, 92, 246, 0.3); }
50% { border-color: rgba(139, 92, 246, 0.8); box-shadow: 0 0 15px rgba(139, 92, 246, 0.6); }
}
.animate-border-glow {
animation: border-glow 8s ease-in-out infinite alternate;
}

/* More opaque backgrounds for content sections for better contrast on black */
.content-section-bg {
background-color: rgba(15, 23, 42, 0.85); /* Slate 900 with 85% opacity */
}

.header-bg {
background-color: rgba(30, 0, 51, 0.8); /* Dark purple with 80% opacity */
}

.footer-bg {
background-color: rgba(15, 23, 42, 0.85); /* Slate 900 with 85% opacity */
}

/* Eerie overlay effect (optional, can be adjusted for intensity) */
.eerie-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.35) 100%); /* Slightly stronger overlay for black */
pointer-events: none; /* Allows clicks to pass through */
animation: eerie-fade 20s ease-in-out infinite alternate;
}

@keyframes eerie-fade {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; } /* Slightly more variation */
}

/* For a more distinct “weird” effect, the main container can have a subtle filter animation */
@keyframes container-distort {
0%, 100% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(1deg) saturate(1.05); } /* Very subtle hue shift and saturation */
}
.animate-container-distort {
animation: container-distort 30s linear infinite;
}

/* Styling for the added artwork */
.artwork-image {
width: 100%;
max-width: 450px; /* Limit size for desktop, responsive otherwise */
height: auto;
border-radius: 20px; /* Rounded corners for surreal look */
box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.2); /* Dreamy glow */
border: 2px solid rgba(139, 92, 246, 0.7);
margin: 2rem auto 3rem auto; /* Center and give space */
display: block; /* Ensure it takes up its own line and margin auto works */
transform: rotate(-1.5deg) scale(0.98); /* Subtle tilt and shrink */
animation: artwork-float 15s ease-in-out infinite alternate; /* Gentle float animation */
}

@keyframes artwork-float {
0%, 100% { transform: rotate(-1.5deg) translateY(0) scale(0.98); }
50% { transform: rotate(0.5deg) translateY(-10px) scale(1.0); }
}

Discover LUNAR SULFUR ARTSTORE