@import "tailwindcss";@import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap';@import 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap';@layer base{html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-gray-800 leading-relaxed;
  }
}@layer components{.btn-primary {
    @apply text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-green-600  bg-clip-text text-transparent;
  }
  
  .nav-link {
    @apply text-gray-600 font-medium transition-colors duration-200 text-xl;
  }
  
  .nav-link.active {
    @apply underline text-purple-400;
  }
}h2{@apply text-2xl my-4 font-bold}@layer components{h3 {
    @apply text-xl my-4 font-bold
  }
}h4{@apply my-4 font-bold}p{@apply mt-2 text-justify}code,kbd,pre,samp{overflow:auto}p code{@apply text-purple-600 text-base font-bold}p a{@apply text-purple-400 underline text-base}.highlight{@apply my-4 block}.highlight>pre{padding:1em 0 1em 1em}.highlight div{padding:0 0 0 1em}.highlight div,.highlight>pre{overflow-x:auto}.highlight .chroma .lntable .lnt,.highlight .chroma .lntable .hl{display:flex}.highlight .chroma .lntable .lntd+.lntd{width:100%}blockquote p{@apply italic pl-4 border-l-4 border-purple-300}article li{@apply list-disc ml-6}body{@apply text-[18px]}