@tailwind base;

@layer base {
    h1 {
      @apply 2xl:text-[8.333vw] lg:text-[120px] text-[64px] leading-[120%] font-normal text-lnk;
    }
    h2 {
      @apply text-h2 lg:text-h2-lg 2xl:text-h2-2xl font-normal text-lnk;
    }
    h3 {
      @apply text-h3 md:text-h3-md lg:text-h3-lg 2xl:text-h3-2xl font-normal text-lnk;
    }
    h4 {
      @apply 2xl:text-[2.222vw] lg:text-[32px] text-[24px] leading-[120%] font-normal text-lnk;
    }
    h5 {
      @apply text-h5 md:text-h5-md lg:text-h5-lg 2xl:text-h5-2xl font-normal text-lnk;
    }
    h6 {
      @apply 2xl:text-[1.111vw] lg:text-[16px] text-[14px] leading-[130%] font-normal text-red;
    }
    p {
      @apply text-body-large md:text-body-large-md lg:text-body-large-lg 2xl:text-body-large-2xl text-graphite font-normal;
    }

    @font-face {
      font-family: "FHOscar";
      src: url("./assets/fonts/FHOscar-Regular.otf");
      src: url("./assets/fonts/FHOscar-Regular.otf"), url("./assets/fonts/FHOscar-Black.otf"),
        url("./assets/fonts/FHOscar-BlackItalic.otf"), url("./assets/fonts/FHOscar-Bold.otf"),
        url("./assets/fonts/FHOscar-BoldItalic.otf"), url("./assets/fonts/FHOscar-Light.otf"),
        url("./assets/fonts/FHOscar-LightItalic.otf"), url("./assets/fonts/FHOscar-Medium.otf"),
        url("./assets/fonts/FHOscar-MediumItalic.otf"),
        url("./assets/fonts/FHOscar-RegularItalic.otf"),
        url("./assets/fonts/FHOscar-SemiBold.otf"),
        url("./assets/fonts/FHOscar-SemiBoldItalic.otf");
      font-display: swap;
    }
    * {
      font-family: "FHOscar";
    }
  }

@tailwind components;


@tailwind utilities;

.tw-container {
  @apply px-20 md:px-20-md lg:px-40 2xl:px-40-2xl w-full overflow-hidden;
}