@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html {
  scroll-padding-top: 5rem;
  scroll-behavior: smooth;
}
body {
  @apply dark:bg-gradient-dark dark:text-primary-text bg-slate-100 text-gradient-dark w-full mx-auto;
}
main {
  max-width: 800px !important;
  margin: auto !important;
}
.prose {
  margin: 0;
  min-width: 100%;
}

pre {
  @apply dark:bg-slate-800 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
}

pre > code {
  @apply bg-transparent text-gray-700 dark:text-slate-300 !important;
}

.codeStyle > code {
  background: transparent;
}

pre > div > div > button > svg:hover {
  @apply hover:text-action transition-all ease-in-out duration-100 !important;
}

h1 > a, h2 > a, h3 > a, h4 > a {
  @apply cursor-pointer relative text-gray-800 dark:text-gray-100 decoration-transparent font-bold !important;
}

h1 > a:hover::before,
h2 > a:hover::before,
h3 > a:hover::before,
h4 > a:hover::before {
  @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-600;
}

div > code, pre > code {
  @apply p-0 m-0 !important
}

#gradient-background {
  width:100%;
  height:100%;
  fill: rgba(0, 0, 0, 0.6);
  --gradient-color-1: #161926; 
  --gradient-color-2: #1E96FC; 
  --gradient-color-3: #FF3366;  
  --gradient-color-4: #1b2034;
}