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

@layer base {
  @font-face {
    font-family: 'Sora';
    font-style: normal;
    src: url(/assets/fonts/Sora-Medium.ttf)
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    src: url(/assets/fonts/Inter-VariableFont_opsz,wght.ttf)
  }

  @font-face {
    font-family: 'Inter';
    font-style: italic;
    src: url(/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf)
  }

  @font-face {
    font-family: 'VictorMono';
    font-style: normal;
    src: url(/assets/fonts/VictorMono-Light.ttf)
  }

  @font-face {
    font-family: 'VictorMono';
    font-style: italic;
    src: url(/assets/fonts/VictorMono-LightItalic.ttf)
  }
}

@layer components {
  .link {
    @apply text-blue underline underline-offset-2 ;
  }
  .link:visited {
    @apply text-mauve dark:text-lavender;
  }
  .link:hover,
  .link:active,
  .link:focus {
    @apply no-underline text-sky outline-2 outline-sky;
  }

  .outline-link {
    @apply outline-offset-4 outline-2 outline-sky;
  }
}

pre, p > code {
  font-family: "VictorMono", monospace;
  font-variant-ligatures: contextual;
  color: rgb(var(--ctp-text));
  outline: 1px solid rgb(var(--ctp-surface0));
  border-radius: 0.25rem;
}
p > code {
  padding: 0 .25rem;
  display: inline-block;
  background-color: rgb(var(--ctp-mantle));
  color: rgb(var(--ctp-blue));
  font-size: 0.875rem;
}
pre {
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0 ;
  overflow: auto;
  max-width: 100%;
  white-space: pre-wrap;
  page-break-inside: avoid;
  background-color: rgb(var(--ctp-crust));
}

.hljs-comment {
  font-style: italic;
}