@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");

@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";

@theme { --font-custom: "Lora", serif; }
body { @apply bg-ctp-crust text-ctp-text; }

h1 { @apply text-3xl; }
h2 { @apply text-2xl; }
h3 { @apply text-xl; }
h4 { @apply text-lg; }
h5 { @apply text-base; }
h6 { @apply text-sm; }
h1, h2, h3, h4, h5, h6 { @apply font-semibold my-2; }
h1 { @apply text-ctp-blue; }
h2, h3, h4, h5, h6 { @apply text-ctp-lavender; }
a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) { @apply decoration-ctp-blue underline hover:no-underline; }

p { @apply text-base; }
hr { @apply border-t border-ctp-surface1 my-6; }

ul, ol { @apply list-inside my-4 pl-2; }
ol { @apply list-decimal; }
ul { @apply list-disc; }
ul ul, ul ol, ol ul, ol ol { @apply my-0 pl-6; }
input[type="checkbox"] { @apply mr-2 align-middle cursor-default accent-ctp-blue; }

table { @apply block border-collapse overflow-x-auto my-4; }
table th, table td { @apply border border-ctp-surface1 px-4 py-2; }
table th { @apply bg-ctp-surface0 font-semibold; }

blockquote { @apply border-l-4 border-ctp-surface1 pl-4 italic my-4; }
code { @apply text-ctp-text rounded px-1; }
pre { @apply bg-ctp-base text-ctp-text rounded p-4 overflow-x-auto; }

/*pre code.hljs {
  display: block;
  overflow-x: auto;
}
.hljs-comment {
  color: #697070;
}
.hljs-punctuation,
.hljs-tag {
  color: #444a;
}
.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
  color: #444;
}
.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
  font-weight: 700;
}
.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
  color: #800;
}
.hljs-section,
.hljs-title {
  color: #800;
  font-weight: 700;
}
.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
  color: #ab5656;
}
.hljs-literal {
  color: #695;
}
.hljs-addition,
.hljs-built_in,
.hljs-bullet,
.hljs-code {
  color: #397300;
}
.hljs-meta {
  color: #1f7199;
}
.hljs-meta .hljs-string {
  color: #38a;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}*/