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

@layer base {
  body,
  html {
    font-family: var(--fonts-main), sans-serif;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    font-feature-settings: 'lnum';
    font-feature-settings: 'lnum';
    font-feature-settings: 'lnum';
    height: auto;
    @apply text-text;
  }

  body {
    margin: 0;
    letter-spacing: 0.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  button:focus {
    outline: 0;
  }

  i {
    width: 100%;
    height: 100%;
  }

  svg {
    width: 100%;
    height: 100%;
  }

  video {
    max-width: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--fonts-head), serif;
  }

  h1 {
    @apply text-h1;
  }

  h2 {
    @apply text-h2;
  }

  h3 {
    @apply text-h3;
  }

  h4 {
    @apply text-h4;
  }

  h5 {
    @apply text-h5;
  }

  h6 {
    @apply text-h6;
  }
}