@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
@source "../views";

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

        --color-primary: #1b628e;
        --color-primary-var: #1b4d7a;
        --color-accent: #f4a261;
        --color-secondary: #c40306;
        --color-bg: #e9ecef;
        --color-secondary-var: #9e0306;
        --color-on-primary: #ddf2ff;
        --color-on-secondary: #ffdcdd;
}

@layer base {
    body {
        @apply overflow-x-hidden tracking-wide text-gray-700 bg-gray-100;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-bold md:font-black;
    }

    h1 {
        @apply text-4xl sm:text-5xl md:text-6xl;
    }

    h2 {
        @apply text-3xl sm:text-4xl md:text-5xl;
    }

    h3 {
        @apply text-2xl sm:text-3xl md:text-4xl;
    }

    h4 {
        @apply text-xl sm:text-2xl md:text-3xl;
    }

    h5 {
        @apply text-sm sm:text-2xl md:text-3xl;
    }

    h6 {
        @apply text-lg sm:text-xl md:text-2xl;
    }

    li {
        @apply text-sm cursor-pointer sm:text-sm md:text-base;
    }

    p {
        @apply text-sm sm:text-sm md:text-base;
    }

    html {
        scroll-behavior: smooth;
        width: 100%;
        height: 100%;
    }
}

.error-text {
    color: red;
    background-color: #ffeeee;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 0.5rem;
    margin: auto;
    text-align: center;
}

.default-site-margin {
    /* md:w-[80%] mx-auto px-5 py-2 md:px-0 md:flex md:justify-between md:items-center */
    margin: 0px auto;
    padding: 8px 20px;
}
@media (min-width: 768px) {
    .default-site-margin {
        /* md:w-[80%] mx-auto px-5 py-2 md:px-0 md:flex md:justify-between md:items-center */
        width: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0px;
    }
}

@keyframes wiggle {

        0%,
        100% {
            transform: rotate(0deg);
        }

        25% {
            transform: rotate(-10deg);
        }

        75% {
            transform: rotate(10deg);
        }
}

    .animate-wiggle {
        animation: wiggle 1s ease-in-out infinite;
    }

        .bg-grid-pattern {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
