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

@import 'fonts';

body.dark * {
  @apply border-gray-600
}

* {
  font-family: GeneralSans, sans-serif !important;
}

#app {
   @apply min-h-screen;
}

@layer base {

  :root {
    --bg-form-color: #2563eb;
  }

  h1 {
    @apply text-2xl sm:text-3xl font-extrabold;
  }

  h2 {
    @apply text-3xl font-semibold;
  }

  p, div {
    @apply text-gray-900 dark:text-white text-inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-gray-900 dark:text-white text-inherit;
  }

  a {
    @apply text-blue-600 hover:underline text-inherit;
  }
}

.bg-white {
  @apply dark:bg-notion-dark;
}

.bg-gray-50 {
  @apply dark:bg-notion-dark-light;
}

.field-help {
  p, ol, ul, li {
    @apply text-gray-400 dark:text-gray-500;
  }

  ol {
    @apply list-decimal list-inside;
  }

  ul {
    @apply list-disc list-inside;
  }
}

.public-page {
  .fb-feedback-widget-feedback-button-container {
    display: none;
  }
}
