@tailwind base;
@tailwind components;
@tailwind utilities;

.card {
    @apply bg-white rounded-lg shadow-md p-6 mb-4;
}

.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 ease-in-out;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-300 ease-in-out;
}

.input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.flashcard {
    @apply bg-white rounded-lg shadow-md p-10 min-h-[300px] flex items-center justify-center text-center transform transition-all duration-300 hover:scale-105 hover:shadow-lg border-2 border-gray-300 relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.9) 100%);
    cursor: pointer !important;
}

.flashcard:hover {
    @apply border-blue-300;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}