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



@layer base {
  /* styles for displaying markdown */
  .md h1 {
    @apply text-6xl;
  }
  .md h2 {
    @apply text-5xl;
  }
  .md h3 {
    @apply text-4xl;
  }
  .md h4 {
    @apply text-3xl;
  }
  .md h5 {
    @apply text-2xl;
  }
  .md h6 {
    @apply text-xl;
  }

  .md blockquote{
    @apply border-l-4 pl-2 rounded-lg ml-4 mt-2 mb-2;
    @apply bg-zinc-200 border-zinc-400;
    @apply dark:bg-zinc-800 dark:border-zinc-600;
    @apply pb-2;
  }

  .md hr {
    @apply mb-4 mt-4 border-2 rounded-lg;
  }

  .md ul{
    @apply list-disc list-inside ml-4;
  }

  .md li ul {
    @apply list-disc list-inside;
  }

  .md ol{
    @apply list-decimal list-inside ml-4;
  }

  .md li ol{
    @apply list-decimal list-inside ml-4;
  }

  .md-code {
    @apply p-1;
    @apply rounded-lg;
    @apply bg-zinc-200 border-zinc-400;
    @apply dark:bg-zinc-800 dark:border-zinc-600 overflow-scroll;
  }

  .md a {
    @apply inline-block bg-transparent text-blue-600;
  }

  .md table {
    @apply w-1/2;
    border-style: hidden;
  }

  

  .md table thead {
    @apply bg-zinc-200 dark:bg-zinc-800;
    
  }

  .md table tr {
    @apply border-2 border-zinc-400;
  }

  .md img {
    @apply w-96 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105 rounded-2xl hover:drop-shadow-2xl transition duration-500 lg:ml-5;
  }

  .md p, .math-inline { display: inline-block; }
  .md li p {
    display: inline;
  }

  /* other styles */

  .blog-pre {
    @apply mt-2 mb-2 relative;
  }
  
  .code-copy-btn {
    @apply text-zinc-400 dark:text-zinc-300 absolute right-2 top-2 cursor-pointer;
  }
  
  .code-copy-btn:hover {
    @apply text-zinc-500 dark:text-zinc-400;
  }
}