styles.css

@tailwind utilities;

code {
  @apply text-sm;
}

html {
  color-scheme: none !important;
}

body {
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 300px
    ),
    fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
}

.dark .invert-on-dark {
  filter: invert(1) brightness(1.8);
}

#__next .nextra-body > main h1 {
  margin-top: 0;
}

#__next article :not(pre) > code {
  color: var(--shiki-token-string-expression);
  background-color: transparent;
  border: 0;
  font-size: 90%;
}

#__next article :not(pre) > code::before,
#__next article :not(pre) > code::after {
  content: "\`";
}

.dark body article pre {
  background-color: transparent;
  border: 1px solid rgba(224, 243, 255, 0.1);
  border-radius: 5px;
}

.light body article pre {
  background-color: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
}

.light body {
  --shiki-color-text: #111;
  --shiki-token-constant: var(--shiki-color-text);
  --shiki-token-comment: #999;
  --shiki-token-keyword: #ff0078;
  --shiki-token-function: #0077FF;
  --shiki-token-string-expression: #028265;
  --shiki-token-punctuation: var(--shiki-color-text);
}

.dark body {
  --shiki-color-text: #EAEAEA;
  --shiki-token-constant: var(--shiki-color-text);
  --shiki-token-comment: #666;
  --shiki-token-keyword: #ff0078;
  --shiki-token-function: #0099FF;
  --shiki-token-string-expression: #50e3c2;
  --shiki-token-punctuation: var(--shiki-color-text);

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 300px),
    fixed 0 0 / 20px 20px radial-gradient(#313131 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, transparent 0);
}

code[data-language="sh"] {
  --shiki-token-string: var(--shiki-color-text);
}

#__next article.nextra-body h1 {
  font-size: 2em;
}

#__next article.nextra-body h2 {
  font-size: 1.5em;
}

#__next article.nextra-body h3 {
  font-size: 1.25em;
}

#__next article.nextra-body h4 {
  font-size: 1em;
}

#__next article.nextra-body h5 {
  font-size: .875em;
}

#__next article.nextra-body h5 {
  font-size: .85em;
}