code {
  @apply text-sm;
}

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

/*
 * Increase the contrast of this text (used in the left sidebar) in dark mode to be WCAG AA compliant.
 * Nextra does not expose a way of customizing just this color without creating a new theme, so use custom
 * css. Includes the class name in the selector twice to increase specificity without using `!important`.
 */
html[class~="dark"] .dark\:nx-text-neutral-500.dark\:nx-text-neutral-500 {
  color: rgba(150, 150, 150, var(--tw-text-opacity));
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v13/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXskPMBBSSJLm2E.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v13/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUXskPMBBSSJLm2E.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
  font-display: swap;
}

.turborepoCardBg {
  background: #fff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03),
    0px 2px 4px rgba(0, 0, 0, 0.05), 0px 12px 24px rgba(0, 0, 0, 0.05);
}

.dark .turborepoCardBg {
  /* background: rgba(0, 0, 0, 0.8); */
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2);
}

.turbopackCardBg {
  background: #fff;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03),
    0px 2px 4px rgba(0, 0, 0, 0.05), 0px 12px 24px rgba(0, 0, 0, 0.05);
}

.dark .turbopackCardBg {
  background: rgba(0, 0, 0, 0.8);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0px 20px 48px rgba(0, 0, 0, 0.2);
}

.list,
.list:focus-visible,
.list:focus {
  outline: none !important;
  box-shadow: none !important;
}