styles.css

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

/* NEXTRA OVERRIDES AND FIXES */
/* CODE COLUMNS */
.code-columns {
  display: flex;
  flex-direction: row;
  gap: 0rem 1.5rem;
  margin-top: 1.5rem;
}
.code-columns > div {
  width: calc(50% - 0.75rem);
  margin-top: 0rem;
}
@media (max-width: 768px) {
  .code-columns {
    flex-direction: column;
    gap: 1.5rem 0rem;
  }
  .code-columns > div {
    width: unset;
  }
}

/* EXCALIDRAW DIAGRAM */
.excalidraw {
  width: 100%;
  height: unset;
  margin-top: 24px;
  margin-bottom: 8px;
}
.dark .excalidraw {
  filter: invert(100%) hue-rotate(180deg);
}
.dark .excalidraw path:first-of-type {
  fill: #eee;
}

/* LOGO */
.logo {
  height: 16px;
}
.dark .logo path:first-of-type {
  fill: #fffbf5;
}

/* CAPTION */
.caption {
  color: #6b7280;
  font-size: smaller;
}
.dark .caption {
  color: #737373;
}
.caption > p {
  line-height: 1.5rem;
}

/* NAV SPACING OVERRIDES */
@media (min-width: 768px) {
  .nextra-nav-container > nav {
    gap: 22px;
  }
}

/* NEXTRA STEPS H4 SUPPORT */
.nextra-steps h4 {
  counter-increment: step;
  &:before {
    @apply absolute w-[33px] h-[33px];
    @apply border-4 border-[#ffffff] dark:border-[#111111] bg-gray-100 dark:bg-neutral-800;
    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
    @apply mt-[-1px] ml-[-41px];
    content: counter(step);
  }
}

/* NEXTRA SIDEBAR */
.nextra-menu-desktop {
  gap: 2px;
}
.nextra-menu-desktop li a {
  padding-top: 4px;
  padding-bottom: 4px;
}
.nextra-menu-desktop ul {
  gap: 2px;
}
/* this targets the separator bars (not currently used) */
/* .nextra-menu-desktop ._my-4 {
  margin-top: 11px;
  margin-bottom: 0px;
} */
.nextra-menu-desktop ._mt-5 {
  margin-top: 10px;
  margin-bottom: 2px;
}

/* LINK OVERRIDES */
._underline {
  text-decoration-line: none;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
._underline:hover {
  color: #39dff2;
}

/* HERO TEXTURE */
.hero-texture {
  background:
    radial-gradient(
      91.96% 91.96% at 50% 91.96%,
      rgba(0, 0, 0, 0) 0%,
      #fff 100%
    ),
    url("/h1.png") lightgray 50% / cover no-repeat;
}
.dark .hero-texture {
  background:
    radial-gradient(
      91.96% 91.96% at 50% 91.96%,
      rgba(0, 0, 0, 0) -20%,
      #111 100%
    ),
    url("/h1.png") lightgray 50% / cover no-repeat;
}

/* MISC NEXTRA OVERRIDES */
._list-decimal, ._list-disc {
  margin-top: 12px;
}

._list-decimal, ._list-disc > li {
  line-height: 1.75rem;
}