@import url('/fonts/TTHovesProAll/stylesheet.css');

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

body {
  font-family: 'TTHovesPro';
  color: #fff;
  background-color: #14161f;
}

*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-thumb {
  background-color: #798fff;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
}

@layer components {
  .h1 {
    @apply -tracking-[.02em] text-[clamp(36px,36px+(100vw-360px)/1240*76,112px)] leading-[90%];
  }
  .h2 {
    @apply -tracking-[.02em] text-[clamp(24px,24px+(100vw-360px)/1240*40,64px)] lg:leading-[90%] leading-none;
  }

  .h3 {
    @apply text-[clamp(18px,18px+(100vw-360px)/1240*22,40px)] leading-none;
  }

  .h4 {
    @apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[120%];
  }

  .accent {
    @apply -tracking-[.02em] md:text-[clamp(28px,28px+(100vw-768px)/832*4,32px)] text-[clamp(20px,20px+(100vw-360px)/408*8,28px)] md:leading-[clamp(28px,28px+(100vw-768px)/832*7.2,35.2px)] leading-[clamp(20px,20px+(100vw-360px)/408*8,28px)];
  }

  .l-text {
    @apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[135%];
  }

  .m-text {
    @apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] leading-[140%];
  }

  .l-caption {
    @apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-none;
  }

  .m-caption {
    @apply text-[clamp(10px,10px+(100vw-360px)/1240*2,12px)] leading-[clamp(12px,12px+(100vw-360px)/1240*2.4,14.4px)];
  }

  .btn-text {
    @apply -tracking-[.01em] text-[clamp(12px,12px+(100vw-360px)/1240*8,20px)] leading-none;
  }

  .link-text {
    @apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] tracking-[.02em] lg:leading-[120%] leading-[140%];
  }

  .descriptor {
    @apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-[120%];
  }

  .text-gradient {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    @apply bg-gradient-to-r from-[#798FFF] to-[#D375FF] bg-clip-text;
  }

  .bg-gradient {
    background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
  }

  .text1 {
    @apply lg:text-[clamp(18px,1.25vw,24px)] md:max-lg:text-[clamp(14px,14px+(100vw-768px)/672*4,18px)] text-sm leading-[1.35];
  }

  .heading2 {
    @apply min-[1440px]:text-[clamp(20px,20px+(100vw-1440px)/480*4,24px)] sm:text-[clamp(16px,16px+(100vw-360px)/1080*4,20px)] text-base min-[1440px]:leading-[1.2] leading-[1.125];
  }

  .heading1 {
    @apply min-[1440px]:text-[clamp(24px,24px+(100vw-1440px)/480*4,28px)] md:text-2xl text-xl leading-[1.167];
  }

  .text2 {
    @apply min-[1440px]:text-[clamp(12px,12px+(100vw-1440px)/480*2,14px)] text-xs leading-[1.35];
  }
}
