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

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

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

@layer components {
  .h1 {
    @apply -tracking-[.02em] text-[clamp(36px,36px+(100vw-360px)/1240*76,112px)] leading-[clamp(36px,36px+(100vw-360px)/1240*50.4,86.4px)];
  }
  .h2 {
    @apply -tracking-[.02em] text-[clamp(24px,24px+(100vw-360px)/1240*48,72px)] leading-none;
  }

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

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

  /* .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-[clamp(21.6px,21.6px+(100vw-360px)/1240*5.4,27px)];
  }

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

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

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

  /* .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;
  }
}