@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
    --font-pixel: 'Press Start 2P', cursive;
    --font-inter: 'Inter', sans-serif;
    --font-sans: 'Inter', sans-serif;
    
    /* Custom colors for space theme */
    --color-cyan-400: #52D4F4;
    --color-cyan-500: #52D4F4;
    --color-green-400: #6FC391;
    --color-green-500: #6FC391;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Custom utility classes for space theme */
.font-pixel {
    font-family: 'Press Start 2P', cursive;
}

.shadow-cyan {
    box-shadow: 0 0 20px rgba(82, 212, 244, 0.3);
}

.shadow-green {
    box-shadow: 0 0 20px rgba(111, 195, 145, 0.3);
}

.text-glow-cyan {
    text-shadow: 0 0 10px #52D4F4;
}

.text-glow-green {
    text-shadow: 0 0 10px #6FC391;
}

/* Animation classes */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes rocket-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}

@keyframes planet-orbit {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(100vw) rotate(360deg); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-rocket {
    animation: rocket-float 2s ease-in-out infinite;
}

.animate-particle {
    animation: particle-float 4s linear infinite;
}