@font-face {
  font-family: "Archivo Black";
  src: url('./fonts/ARCHIVOBLACK-REGULAR-2.TTF') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: "Archivo Black_Bold";
  src: url('./fonts/ARCHIVOBLACK-REGULAR-2.TTF') format('truetype');
  font-style: normal;
}

:root {
  --title-second-color: #262626;
}

:root {
  --font-80: 80px;
  --font-70: 70px;
  --font-64: 64px;
  --font-60: 60px;
  --font-56: 56px;
  --font-46: 46px;
  --font-40: 40px;
  --font-36: 36px;
  --font-30: 30px;
  --font-28: 28px;
  --font-24: 24px;
  --font-20: 20px;
  --font-18: 18px;
  --font-16: 16px;
  --font-14: 14px;

  --component-gap: 80px;
  /* 组件间距 */
  --gap-50: 50px;
}

@media (max-width: 1280px) {
  :root {
    --font-80: 70px;
    --font-70: 60px;
    --font-64: 56px;
    --font-60: 52px;
    --font-56: 48px;
    --font-46: 40px;
    --font-40: 36px;
    --font-36: 32px;
    --font-30: 26px;
    --font-28: 24px;
    --font-24: 22px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 15px;
    --font-14: 14px;

    --component-gap: 60px;
    --gap-50: 40px;
  }
}

@media (max-width: 992px) {
  :root {
    --font-80: 60px;
    --font-70: 50px;
    --font-64: 48px;
    --font-60: 44px;
    --font-56: 40px;
    --font-46: 34px;
    --font-40: 32px;
    --font-36: 28px;
    --font-30: 24px;
    --font-28: 22px;
    --font-24: 20px;
    --font-20: 18px;
    --font-18: 16px;
    --font-16: 14px;
    --font-14: 13px;

    --component-gap: 45px;
    --gap-50: 30px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-80: 50px;
    --font-70: 42px;
    --font-64: 40px;
    --font-60: 36px;
    --font-56: 32px;
    --font-46: 24px;
    --font-40: 22px;
    --font-36: 20px;
    --font-30: 19px;
    --font-28: 18px;
    --font-24: 18px;
    --font-20: 16px;
    --font-18: 14px;
    --font-16: 13px;
    --font-14: 12px;

    --component-gap: 30px;
    --gap-50: 20px;
  }
}

@media (max-width: 576px) {
  :root {
    --font-80: 40px;
    --font-70: 34px;
    --font-64: 32px;
    --font-60: 28px;
    --font-56: 26px;
    --font-46: 22px;
    --font-40: 20px;
    --font-36: 18px;
    --font-30: 17px;
    --font-28: 16px;
    --font-24: 16px;
    --font-20: 14px;
    --font-18: 13px;
    --font-16: 12px;
    --font-14: 12px;

    --component-gap: 20px;
    --gap-50: 15px;
  }
}