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

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

html {
  scroll-behavior: smooth;
}

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

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

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

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

@layer components {
  .h1 {
    @apply -tracking-[.02em] leading-[90%] 2xl:text-[clamp(96px,6vw,128px)] lg:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] md:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] sm:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] text-[clamp(36px,11.11vw,44px)];
  }
  .h2 {
    @apply -tracking-[.02em] leading-[100%] 2xl:text-[clamp(64px,4vw,80px)] lg:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] md:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] sm:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] text-[clamp(28px,7.78vw,32px)];
  }

  .h3 {
    @apply leading-[100%] 2xl:text-[clamp(32px,2vw,40px)] lg:text-[clamp(28px,28px+(100vw-1024px)/576*4,32px)] md:text-[clamp(24px,24px+(100vw-768px)/256*4,28px)] sm:text-[clamp(20px,20px+(100vw-640px)/128*4,24px)] text-[clamp(20px,5.55vw,24px)];
  }

  .h4 {
    @apply leading-[120%] 2xl:text-[clamp(14px,0.875vw,16px)] lg:text-sm md:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] text-[clamp(14px,3.89vw,16px)];
  }

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

  .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 leading-[135%] 2xl:text-[clamp(18px,1.125vw,20px)] lg:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] md:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] text-[clamp(14px,3.89vw,16px)];
  }

  .m-text {
    @apply leading-[140%] 2xl:text-[clamp(14px,0.875vw,16px)] lg:text-sm md:text-[clamp(12px,12px+(100vw-768px)/576*2,14px)] sm:text-xs text-[clamp(12px,3.33vw,14px)];
  }

  .btn-text {
    @apply -tracking-[.02em] leading-[100%] 2xl:text-[clamp(18px,1.125vw,20px)] lg:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] md:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] sm:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] text-[clamp(12px,3.89vw,16px)];
  }

  .link {
    @apply tracking-[.02em] leading-[120%] 2xl:text-[clamp(14px,0.875vw,16px)] lg:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] md:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] sm:text-xs text-[clamp(12px,3.33vw,14px)];
  }

  .descriptor {
    @apply tracking-[.02em] leading-[120%] 2xl:text-[clamp(14px,0.875vw,16px)] lg:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] md:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] sm:text-xs text-[clamp(12px,3.33vw,14px)];
  }

  .feedback-field:focus ~ .feedback-placeholder {
    top: 0;
  }

  .feedback-field:focus ~ .feedback-placeholder-2 {
    opacity: 0;
  }

  .feedback-field:valid ~ .feedback-placeholder {
    top: 0;
  }

  .feedback-field:valid ~ .feedback-placeholder-2 {
    opacity: 0;
  }

  .feedback-field::placeholder {
    @apply lg:text-base text-sm font-semibold text-[#77787d];
  }

  .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];
  }
}
