@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

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

@layer base {
  html {
    font-size: 10px;

    /* Undoes MUI's font smoothing via the `CssBaseline` preflight
    See https://mui.com/material-ui/react-css-baseline/#typography */
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
  }

  strong {
    @apply font-semibold;
  }

  ul {
    @apply list-disc;
  }

  code,
  pre {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  }

  code:not(pre code) {
    @apply rounded-lg bg-fuchsia-100 px-2 py-1 text-fuchsia-700;
  }

  pre {
    @apply rounded-lg border border-solid border-neutral-300 bg-neutral-100 p-4;
  }

  blockquote {
    @apply m-0 border-0 border-l-4 border-solid border-neutral-200 px-6 text-neutral-500;
  }

  button,
  [type='button'],
  [type='reset'],
  [type='submit'],
  [role='button'] {
    @apply cursor-pointer;
  }

  /* For embed videos */
  figure.media {
    @apply m-0 relative aspect-video max-w-3xl;
  }

  figure.media > iframe {
    @apply w-full h-full absolute;
  }
}

@layer utilities {
  .key {
    @apply rounded-xl border border-solid px-2 py-0.5;
  }

  /* For Firefox 64+ and Firefox for Android 64+ */
  .scrollbar-hidden {
    scrollbar-width: none;
  }

  /* For Blink- and WebKit-based browsers */
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }
}

@import './bouncing-dot.css';
@import './sidebar.css';
@import './syntax-highlighting.css';
