style.css

/* Custom styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Custom handwriting font */
@font-face {
    font-family: 'Handwriting';
    src: url('https://fonts.gstatic.com/s/indieflower/v12/m8JVjfNVeKWVnh3QMuKkFcZVaUuH99GUDg.woff2') format('woff2');
}
.handwriting {
    font-family: 'Handwriting', cursive;
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .handwriting {
        font-size: 1.2rem !important;
    }
}

/* Animation for new features */
@keyframes featureReveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

feature-card {
    animation: featureReveal 0.5s ease-out forwards;
    opacity: 0;
}

feature-card:nth-child(1) { animation-delay: 0.1s; }
feature-card:nth-child(2) { animation-delay: 0.2s; }
feature-card:nth-child(3) { animation-delay: 0.3s; }
feature-card:nth-child(4) { animation-delay: 0.4s; }
feature-card:nth-child(5) { animation-delay: 0.5s; }
feature-card:nth-child(6) { animation-delay: 0.6s; }
feature-card:nth-child(7) { animation-delay: 0.7s; }
feature-card:nth-child(8) { animation-delay: 0.8s; }
feature-card:nth-child(9) { animation-delay: 0.9s; }
/* Feature cards animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.feature-card {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }
.feature-card:nth-child(5) { animation-delay: 0.5s; }
.feature-card:nth-child(6) { animation-delay: 0.6s; }

/* Animation for the generate button */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.animate-pulse {
    animation: pulse 1.5s infinite;
}