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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer utilities {
  .bg-grid-white {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='white' stroke-width='0.5' stroke-opacity='0.12'/%3E%3C/svg%3E");
  }
}

@layer components {
  mux-player {
    @apply rounded-lg overflow-hidden;
  }

  .trix-content {
    @apply text-gray-900;
  }

  .trix-content h1 {
    @apply text-2xl font-bold mb-4;
  }

  .trix-content ul {
    @apply list-disc list-inside mb-4;
  }

  .trix-content ol {
    @apply list-decimal list-inside mb-4;
  }

  .trix-content li {
    @apply mb-2;
  }

  .trix-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 my-4 italic;
  }

  .trix-content a {
    @apply text-blue-600 hover:text-blue-800 underline;
  }
}