/* Write your global styles here, in PostCSS syntax */

@tailwind base;

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply py-2.5 px-5 mr-2 mb-2 text-sm font-medium 
    text-gray-900 focus:outline-none bg-white rounded-lg 
    border border-gray-200 hover:bg-gray-100 
    hover:text-blue-700 focus:z-10 focus:ring-4 
    focus:ring-gray-200 dark:focus:ring-gray-700 
    dark:bg-gray-800 dark:text-gray-400 
    dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700
  }
  :root {
    @apply dark:bg-slate-900
  }
}