@import url('https://fonts.googleapis.com/css2?family=Playwrite+GB+S:ital,wght@1,200&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {

    body {
        @apply bg-slate-600 text-slate-100;
    }

    main {
        @apply min-h-[100vh] bg-slate-600 p-4 md:py-8 md:px-16;
    }

    footer {
        @apply w-full p-4 bg-slate-600 border-t border-slate-100 shadow md:flex md:items-center md:justify-between md:p-6 text-white
    }

    nav {
        @apply bg-slate-600 border-slate-100 border-b-[1px] border-solid text-white
    }

    hr {
        @apply my-4 border-slate-100 !important
    }

    form {
        @apply bg-slate-600 border-primary rounded-lg shadow-lg p-8 rounded-md mt-8 grid grid-cols-1 caret-slate-400 placeholder-slate-300;
    }

    input[type='text'] {
        @apply bg-white rounded-md border-slate-200 min-w-full ring-1 ring-slate-500 focus:border-slate-200 focus:ring-2 focus:ring-slate-500 text-slate-500 mt-4 !important;
    }

    input[type='email'] {
        @apply bg-white rounded-md border-slate-200 min-w-full ring-1 ring-slate-500 focus:border-slate-200 focus:ring-2 focus:ring-slate-500 text-slate-500 mt-4 !important;
    }

    input[type='password'] {
        @apply bg-white rounded-md border-slate-200 min-w-full ring-1 ring-slate-500 focus:border-slate-200 focus:ring-2 focus:ring-slate-500 text-slate-500 mt-4 !important;
    }

    input[type='file'] {
        @apply bg-white rounded-md border-slate-200 min-w-full p-[5px] min-h-[2.5rem] ring-1 ring-slate-500 focus:border-slate-200 focus:ring-2 focus:ring-slate-500 text-slate-500 mt-4 !important;
    }

    input[type='date'] {
        @apply bg-white rounded-md border-slate-200 min-w-full ring-1 ring-slate-500 focus:border-slate-200 focus:ring-2 focus:ring-slate-500 text-slate-500 mt-4 !important;
    }

    input[type='checkbox'] {
        @apply rounded-full bg-white cursor-pointer w-4 h-4 border-slate-300 ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-green-500 checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    input[type='radio'] {
        @apply rounded-full bg-white cursor-pointer w-4 mx-2 h-4 border-slate-300 ring-0 ring-offset-0 active:ring-0 focus:ring-0 checked:ring-0 checked:ring-offset-0 checked:bg-green-500 checked:border-0 active:border-0 focus:ring-offset-0 !important;
    }

    textarea {
        @apply bg-white rounded-md border-slate-200 min-w-full ring-1 ring-slate-500 focus:border-slate-200 focus:ring-2 focus:ring-slate-500 text-slate-500 mt-4 !important;
    }

}
@layer components {
  .btn {
      @apply py-2 px-4 rounded-lg text-white cursor-pointer flex flex-row items-center justify-center
  }

  .btn-primary {
    @apply bg-slate-500 hover:bg-slate-400;
  }

  .btn-secondary {
      @apply bg-slate-300 hover:bg-gray-400
  }

  .btn-danger {
      @apply bg-rose-300 hover:bg-rose-400
  }

  .btn-normal {
      @apply w-[7rem]
  }

  .bg-primary {
    @apply bg-slate-600
  }

  .border-primary {
      @apply border-[1px] border-slate-100 border-solid rounded-lg shadow-lg
  }

  .index-container {
      @apply p-8 bg-slate-600 rounded-lg shadow-lg border-primary
  }

  .btn-carousel {
      @apply inline-flex items-center justify-center w-10 h-10 rounded-full bg-slate-300 group-hover:bg-slate-400 group-focus:ring-4 group-focus:ring-white group-focus:outline-none
  }

  .card {
      @apply col-span-3 p-8 bg-slate-600 border rounded-lg border-[1px] border-slate-100 border-solid shadow-lg
  }
}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */