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

@layer base {
  @font-face {
    font-family: "AvenirLight";
    src: url("/fonts/Avenir-Light.woff") format("woff");
    font-weight: 400;
    font-style: lighter;
    font-display: swap;
  }
  @font-face {
    font-family: "AvenirRoman";
    src: url("/fonts/Avenir-Roman.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "AvenirMedium";
    src: url("/fonts/Avenir-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "AvenirHeavy";
    src: url("/fonts/Avenir-Heavy.woff") format("woff");
    font-weight: 800;
    font-style: bold;
    font-display: swap;
  }

  @font-face {
    font-family: "GraveNormal";
    src: url("/fonts/grave/Grava Display Normal.otf") format("woff");
    font-weight: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "GraveHeavy";
    src: url("/fonts/grave/Grava Display Bold.otf") format("woff");
    font-weight: bold;
    font-display: swap;
  }

  @font-face {
    font-family: "GraveMedium";
    src: url("/fonts/grave/Grava Display Medium.otf") format("woff");
    font-weight: bold;
    font-display: swap;
  }
}

@layer components {
  .em-container {
    @apply md:px-[105px] px-[25px] !important;
  }
  .body-regular-16 {
    @apply text-center text-[16px] leading-[25.6px] tracking-[-0.5%]
  }
}