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

@import './fonts.css';

@layer components {
    /* Styles for the main grid container */
    .grid-gallery {
        @apply grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 px-4 pb-14;
    }

    /* Styles for an individual card components */
    .gallery-card {
        @apply bg-indigo-900 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl my-1;
    }

    /* Styles for the image inside the card */
    .card-img {
        @apply w-full h-48 object-cover;
    }

    /* Styles for the content area (title and caption) */
    .card-content {
        @apply p-4;
    }

    /* Styles for the title */
    .card-title {
        @apply text-xl font-semibold mb-2 text-yellow-800;
    }

    /* Styles for the caption */
    .card-caption {
        /* @apply text-sm text-yellow-600; */
        @apply absolute bottom-0 left-0 w-full bg-black bg-opacity-50 text-amber-300 p-2 text-sm md:text-base
    }
}
@font-face {
    font-family: 'mystery-quest';
    src: url(/assets/mystery-quest/MysteryQuest-Regular-5e2b78d0c914e865723edf091baa3aea0316398cc645b008ed74c6489ed45e21.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/*
@font-face {
    font-family: "mystery-quest";
    src: url(/fonts/mystery-quest/MysteryQuest-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
*/