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

/* Custom Fonts: */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: GeistMono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/GeistMonoVF.woff2") format("woff2");
}

/* 🏋️‍♀️ Scroll for heading with sticky header */
h2,
h3,
h4 {
  scroll-margin-top: 65px;
}

/* Shiki Light/Dark Theme: */

html.light .astro-code,
html.light .astro-code span {
  background-color: #fafafa !important;
}

html.light .astro-code .highlighted {
  background-color: #fafafa !important;
}

html.dark .astro-code .line .highlighted {
  background-color: green !important;
}

html.dark .astro-code,
html.dark .astro-code span {
  color: var(--shiki-dark) !important;
  background-color: #111827 !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

@media (prefers-color-scheme: dark) {
  .astro-code,
  .astro-code span {
    .astro-code,
    .astro-code span {
      color: var(--shiki-dark) !important;
      background-color: transparent !important;
      font-style: var(--shiki-dark-font-style) !important;
      font-weight: var(--shiki-dark-font-weight) !important;
      text-decoration: var(--shiki-dark-text-decoration) !important;
    }
  }
}
