/* Custom styles for a dark, engaging theme */
body {
    font-family: 'Noto Sans Tamil', sans-serif;
    background-color: #1a202c; /* gray-900 */
    color: #cbd5e0; /* gray-300 */
}

/* Base styles for all pages */
.page {
    display: none;
}

/* Animations for visual feedback */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* Custom button styles to make them pop */
button {
    transition: all 0.3s ease-in-out;
    border-radius: 0.5rem;
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Input field focus and hover states */
input, select {
    transition: all 0.2s ease-in-out;
}

input:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* blue-500 with opacity */
}