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

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

#root {
  min-height: 100dvh;
  min-width: 0;
  overflow-x: clip;
}

body {
  font-family: "TTHovesPro", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  color: #fff;
  background-color: #0f1011;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

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

*::-webkit-scrollbar-thumb {
  background-color: #798fff;
  border-radius: 4px;
}
.scrollbar-gradient::-webkit-scrollbar-thumb {
  background: linear-gradient(87deg, #798fff 15%, #d375ff 100%);
}

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

.hide-scrollbars {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbars::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@layer utilities {
  .line1 {
    @apply 2xl:text-[128px] lg:text-[clamp(96px,96px+(100vw-1440px)/96*32,128px)] md:text-[clamp(56px,56px+(100vw-768px)/672*40,96px)] xs:text-[clamp(40px,40px+(100vw-360px)/408*16,56px)] text-[40px] leading-[85%];
  }

  .line2 {
    @apply lg:text-[clamp(64px,4.444vw,88px)] md:text-[clamp(40px,40px+(100vw-768px)/672*24,64px)] xs:text-[clamp(32px,32px+(100vw-360px)/408*8,40px)] max-xs:text-[32px] leading-[95%];
  }

  .heading1 {
    @apply lg:text-[clamp(28px,1.944vw,42px)] md:text-[clamp(24px,24px+(100vw-768px)/672*4,28px)] text-2xl leading-[1.167];
  }

  .heading2 {
    @apply lg:text-[clamp(24px,1.667vw,36px)] md:text-[clamp(20px,20px+(100vw-768px)/672*4,24px)] xs:text-[clamp(16px,16px+(100vw-360px)/408*4,20px)] text-base lg:leading-[1.2] leading-[1.125];
  }

  .accent {
    @apply lg:text-[clamp(32px,2.222vw,56px)] md:text-[clamp(24px,24px+(100vw-768px)/672*8,32px)] text-2xl lg:leading-[1.1] leading-none;
  }

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

  .text2 {
    @apply lg:text-[clamp(12px,0.972vw,20px)] md:text-[clamp(12px,12px+(100vw-768px)/672*2,14px)] text-xs leading-[1.35];
  }

  .btnl {
    @apply lg:text-[clamp(18px,1.25vw,28px)] md:text-[clamp(16px,16+(100vw-768px)/256*2,18px)] text-base leading-none;
  }

  .btnm {
    @apply lg:text-[clamp(16px,1.111vw,24px)] md:text-[clamp(14px,14px+(100vw-768px)/256*2,16px)] text-sm leading-none;
  }

  .btns {
    @apply lg:text-[clamp(14px,0.972vw,20px)] md:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] text-xs leading-none;
  }

  .headline1 {
    @apply font-medium text-[1.667vw] leading-[1.944vw] tracking-[-0.02em] md:max-lg:text-[3.125vw] md:max-lg:leading-[3.646vw] max-md:text-[6.667vw] max-md:leading-[7.778vw];
  }

  .headline2 {
    @apply font-medium text-[1.389vw] leading-[1.667vw] tracking-[-0.02em] md:max-lg:text-[2.083vw] md:max-lg:leading-[2.344vw] max-md:text-base max-md:leading-[4.444vw] max-md:font-normal;
  }

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

  .bg-gradient-saturated {
    background: linear-gradient(45deg, #7a55ff 0%, #c932e8 75%, #ff79d2 95%);
  }
}

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}
