@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:wght@100..900&display=swap');

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

@layer base {
    html,
    body {
        @apply !overflow-x-hidden;
    }

    body {
        padding-top: 5.45rem;
    }

    .button_to {
        @apply flex;
    }

    abbr[title="required"] {
        @apply text-red-500;
    }

    pre {
        @apply whitespace-pre-wrap break-words bg-gray-100 p-2 rounded text-sm;
    }
}

@layer utilities {
    .bg-signin {
        background: radial-gradient(
            circle at top left,
            theme(colors.primary.900) 30%,
            rgba(251, 253, 255, 0) 120%
        );
    }

    input[type="checkbox"] {
        @apply appearance-none relative block text-center w-4 h-4 rounded border border-slate-900 checked:bg-primary-900 checked:border-primary-900;
        &:checked::after {
            @apply absolute inline-block w-2 h-5 top-0 left-0 right-0 bottom-0 m-auto text-white font-bold;
            content: "✓";
        }
    }
}