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

body {
    font-family: 'Poppins', sans-serif;
    overscroll-behavior: none;
}

.font-pusab {
    font-family: 'Pusab', sans-serif;
}

.btn {
    @apply font-bold py-2 px-6 rounded-md shadow-lg transition-transform transform hover:scale-105;
}

.btn-primary {
    @apply bg-green-500 text-white;
    border-bottom: 4px solid #15803d; /* darker green */
}
.btn-primary:hover {
    @apply bg-green-600;
}

.btn-secondary {
    @apply bg-cyan-500 text-white;
    border-bottom: 4px solid #0891b2; /* darker cyan */
}
.btn-secondary:hover {
    @apply bg-cyan-600;
}

.btn-danger {
    @apply bg-red-500 text-white;
    border-bottom: 4px solid #b91c1c; /* darker red */
}

.btn-danger:hover {
    @apply bg-red-600;
}

.level-item {
    @apply bg-black bg-opacity-30 p-4 rounded-lg border-2 border-cyan-400 flex justify-between items-center;
}

/* For the level editor grid */
.grid-cell {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}