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

body{
}

@layer components {  
 .container{
   @apply mx-auto px-2 tablet:px-8;
   @apply max-w-screen-laptop;
  } 
  
  .empty-state{
    @apply p-5 rounded-xl border-2 border-black;
  }
  
  .rounded-white{
    @apply p-8 rounded-xl bg-white shadow-lg;
  }
}

/* Typo */
@layer components{
  
  h2{ 
    @apply text-3xl font-semibold; 
  }
  
  h3{ 
    @apply text-lg font-semibold; 
  }
}

/* Forms */
@layer components {  
  .btn{
    @apply border border-black bg-black px-10 py-2 text-white;
    @apply rounded inline-block;
    @apply hover:bg-opacity-75 cursor-pointer;
  }
  
  .btn-outline{
    @apply border border-black px-10 py-2 text-black;
    @apply rounded inline-block;
    @apply hover:bg-slate-100 cursor-pointer;
  }
  
  .btn-pink{ 
    @apply text-white text-center px-8 py-2 uppercase tracking-wider;
    @apply rounded-full bg-pink-600 text-sm;
  }
  
  .form-group{
    @apply block mb-8;
  }
  
  .form-group > label{
    @apply block mb-1.5 font-semibold;
  }
  
  .form-group > .form-control{
    @apply w-full
  }
  
  .form-actions{
    @apply mt-4 block;
  }
  
  .flash{
    @apply text-center;
    @apply mt-5;
  }
  .flash > div{
    @apply bg-yellow-200 text-black font-semibold rounded-full px-4 py-1.5 inline-block;
  }
}
/*
 * 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.
 *


 */