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

@layer base {
    body {
        @apply bg-ctp-crust;
        font-family: Inter,sans-serif;
        font-weight: 400;
    }

    a {
        @apply text-ctp-green;
    }

    .input {
        @apply w-full pl-3 pr-3 pt-2 pb-2 rounded border bg-ctp-mantle border-ctp-overlay0 hover:border-ctp-overlay1 focus:border-ctp-green text-ctp-text outline-none;
    }

    label {
        @apply text-ctp-text;
    }

    .button {
        @apply pt-2 pb-2 pl-5 pr-5 rounded bg-ctp-mantle hover:bg-ctp-base text-ctp-blue cursor-pointer;
    }

    .link-button {
        @apply button text-ctp-green cursor-pointer;
    }

    .hline {
        @apply border-t border-ctp-overlay0 ml-0 mr-0;
    }

    h1 {
        @apply text-ctp-text pt-5 pb-5 border-b border-ctp-overlay0 mb-5;
    }

    label {
        @apply text-ctp-text;
    }
}

@layer utilities {
    .bg-grid {

        background: 
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(187, 65, 143, 1) 10%, 
                rgba(187, 65, 143, 1) 2px, rgba(0, 0, 0, 0) 0px), 
            linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(187, 65, 143, 1) 10%, 
                rgba(187, 65, 143, 1) 2px, rgba(0, 0, 0, 0) 0px);
        background-size: 2em 4em, 6em 2em;
        transform: perspective(500px) rotateX(60deg) scale(0.5);
        transform-origin: 50% 0%;
        z-index: -1;

        @apply absolute w-[250%] -left-[75%] h-[200%];
    }
}