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


@layer components {
  html {
    scroll-padding-top: 81px;
  }

  body {
    @apply font-gantari text-aubergine;
  }

  .container {
    max-width: 1100px;
  }

  .btn-primary {
    @apply font-semibold bg-cinnabar text-white text-sm uppercase py-3.5 px-5 rounded-md cursor-pointer hover:shadow-md;
  }

  .btn-primary--inverse {
    @apply font-semibold bg-white border border-white text-black text-sm uppercase py-2 px-5 rounded-md cursor-pointer hover:shadow-md;
  }

  .btn-secondary {
    @apply font-semibold border border-cinnabar text-cinnabar text-sm uppercase py-3.5 px-5 rounded-md cursor-pointer hover:shadow-md;
  }

  .btn-secondary--inverse {
    @apply font-semibold border border-white text-white text-sm uppercase py-2 px-5 rounded-md cursor-pointer hover:shadow-md;
  }

  .input {
    @apply rounded-md p-2 w-full border border-athensGray drop-shadow;
  }

  .header {
    @apply transition-all duration-300 ease-in-out;
  }

  .sticky-header {
    @apply fixed top-0 left-0 w-full z-50 bg-mandysPink transition-all duration-300 ease-in-out;
  }

  html {
    scroll-behavior: smooth;
  }
}

input:focus::placeholder {
  color: transparent;
}

textarea {
  appearance: none;
  -webkit-appearance: none;
}
/*
 * 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.
 *


 */