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

.break-wrap-words {
  word-wrap: break-word;
  word-break: break-word;
}

.prose {
  @apply !max-w-5xl scroll-smooth text-gray dark:text-gray-300;
}

.prose p {
  @apply text-justify;
}

.prose [id]::before {
  content: "";
  display: block;
  height: 90px;
  margin-top: -90px;
  visibility: hidden;
}

.prose a,
.prose strong {
  @apply text-yellow dark:text-yellow-dark;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  @apply mt-1 text-gray dark:text-gray-dark;
}

.prose code {
  color: #ce9178;
}
.prose :where(code):not(:where([class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"] *))::after {
  content: "";
}
.shiki {
  white-space: pre-wrap !important;
}
code {
  counter-reset: step;
  counter-increment: step 0;
}
code .line::before {
  content: counter(step);
  counter-increment: step;
  width: 1rem;
  margin-right: 1.5rem;
  display: inline-block;
  text-align: right;
  color: rgba(133, 133, 133, 0.8);
  word-wrap: normal;
  word-break: normal;
}

.katex .base {
  display: inline !important;
  white-space: normal !important;
  width: 100% !important;
}