applications-tracker/site/src/app.css

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

@font-face {
    font-family: 'JetBrainsMono';
    src: url('/fonts/JetBrainsMono-VariableFont_wght.ttf');
}

@layer components {
    .grad-back {
        @apply bg-gradient-to-t from-violet-700 via-blue-400 to-violet-700;
        background-size: 100vw 400vh;
        animation: grad-back 100s linear infinite;
    }

    @keyframes grad-back {
        from {
            background-position: 0 0;
        }

        to {
            background-position: 0 400vh;
        }
    }

    .font-JetBrainsMono {
        font-family: 'JetBrainsMono';
    }

    h1 {
        @apply text-purple-500 font-bold font-JetBrainsMono text-xl;
    }

    dialog {
        @apply p-3 rounded-md;
    }

    dialog::backdrop {
        @apply bg-secudanry opacity-75 fixed top-0 right-0 bottom-0 left-0;
    }

    .flabel {
        @apply block text-purple-500;
    }

    .finput {
        @apply rounded-lg w-full p-2 drop-shadow-lg border-gray-300 border mb-1 bg-white;
    }

    .finput[type='color'] {
        @apply p-0;
    }

    .btns {
        @apply flex justify-center py-2 gap-2;
    }

    .btn-primary {
        @apply rounded-lg text-white bg-violet-500 p-2;
    }

    .btn-danger {
        @apply rounded-lg bg-danger p-2 text-white;
    }

    .btn-confirm {
        @apply rounded-lg bg-blue-400 text-white p-2;
    }

    .card {
        @apply bg-white rounded-lg drop-shadow-lg;
    }
}

@print {
    @page :footer {
        display: none;
    }

    @page :header {
        display: none;
    }
}

@page {
    size: auto;
    margin: 0;
}