@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(.light, .light *));

body {
  font-family: "JetBrains Mono Variable", monospace;
}

@layer base {
  h1 {
    font-size: var(--text-2xl);
  }
  h2 {
    font-size: var(--text-xl);
  }
}

code {
  border-radius: 0.25rem;
  background-color: rgba(249, 115, 22, 0.5);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.dark code {
  background-color: rgba(249, 115, 22, 0.8);
}

code::before,
code::after {
  content: none !important;
}

ol,
ul {
  list-style-type: "- ";
}

.nav-links,
.markdown-link {
  text-decoration: none;
  position: relative;
  padding-right: 1em;
}

.markdown-link::after,
.nav-links::after {
  content: "↗";
  position: absolute;
  right: 0.1em;
  top: 0;
  font-size: 1em;
  line-height: 1;
  display: inline-block;
}

.nav-links:hover,
.markdown-link:hover {
  text-decoration: underline;
}
