@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-base 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 bg-ctp-surface0 text-ctp-text rounded px-1; }
pre { @apply bg-ctp-surface0 text-ctp-text rounded p-4 overflow-x-auto; }