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

html {
  @apply text-orange-50 antialiased font-mono tracking-tighter;
}

body {
  @apply bg-gradient-to-br from-zinc-900 to-zinc-950 bg-fixed;
}

nav {
  @apply shadow-sm shadow-zinc-950;
}

nav li {
  @apply border-b-2 mx-1.5 sm:mx-6;
  @apply border-transparent hover:border-orange-700 duration-300;
}

nav li:has(> a[aria-current="page"]) {
  @apply border-b-orange-700 border-b-2;
}

/* Shadows don't work inline for some reason */
container-lg {
  @apply bg-zinc-900 shadow-inner shadow-zinc-950;
}

/* for innerHTML articles */
article p {
  @apply mt-5 indent-4;
}

article h3 {
  @apply mt-8 text-2xl text-orange-600;
}

article h3 > a {
  @apply text-orange-600;
}

article a {
  @apply text-orange-300 hover:underline;
}

article ul,
article ol {
  @apply mt-5 list-inside;
}

article ul {
  @apply list-disc;
}

article ol {
  @apply list-decimal;
}

/* Code blocks */
.hh4 {
  @apply text-orange-600;
}

.hh3 {
  @apply text-blue-500;
}

.hh13 {
  @apply text-orange-800;
}

.hh10 {
  @apply text-slate-500;
}

.hh5 {
  @apply text-orange-300;
}

/* dunno what this is yet */
.hh18 {
  color: red;
}

.code-block {
  @apply bg-black bg-opacity-50 p-3 rounded-lg shadow-lg shadow-black max-w-fit m-auto;
}

.code-block-inner {
  @apply p-2 mt-2 text-sm border-t-gray-500 overflow-x-scroll border-t-2;
}