@import 'tailwindcss';

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

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


@layer components {

    /* body */
    body {
        @apply bg-white h-screen w-screen;
        background-image: url('../images/bg-primary.png');
        @apply bg-cover bg-center;
        @apply overflow-y-hidden;
    }

    /*End body */

    /* Header - Navbar */
    .nav-bar {
        @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10 w-screen;
        /* Colors */
        @apply bg-white text-black;
        /* Border */
        @apply border-b border-white shadow-md shadow-blue-400;
    }

    .nav-bar a:hover,
    .nav-bar a {
        @apply transition-all duration-300 transform hover:scale-105;
        @apply mr-7;
        @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
    }

    .nav-bar-logo {
        @apply absolute left-0;
        /* Garantir que o container da logo seja posicionado corretamente */
        max-width: 8%;
        /* Garante que a largura não ultrapasse 100% */
        height: auto;
        /* Altura proporcional à largura */
    }

    .nav-bar-logo img {
        @apply w-full;
        /* Largura 100% para se ajustar ao container */
        height: auto;
        /* Mantém a proporção original da imagem */
    }

    .nav-bar>form>button {
        @apply mr-7;
        @apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
    }

    /*End Header - Navbar */

    /* Container */
    .container-title {
        @apply text-2xl absolute top-20;
        @apply text-black font-semibold;
        @apply border-b border-blue-500 rounded-md shadow-md shadow-blue-400;
        @apply p-4 transition-all duration-300 transform hover:scale-105;
    }

    .container {
        @apply flex flex-col justify-center items-center w-full h-full mx-auto px-4 sm:px-6 lg:px-8;
    }

    .form-class {
        @apply flex flex-col gap-4;
        @apply mb-10;
    }

    .form-input-class {
        @apply border border-gray-300 rounded-md p-2 outline-none;
    }

    .form-button-class {
        @apply bg-blue-500 text-white rounded-md p-2 cursor-pointer hover:bg-blue-800;
    }

    .container h1 {
        @apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
    }
}