@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");

:root {
  --h1-font-size: 32px;
  --h1-line-height: 36px;
  --h1-letter-spacing: -4%;
  --h1-font-weight: 400;

  --h2-font-size: 24px;
  --h2-line-height: 30px;
  --h2-letter-spacing: -4%;
  --h2-font-weight: 400;

  --h3-font-size: 20px;
  --h3-line-height: 28px;
  --h3-letter-spacing: -4%;
  --h3-font-weight: 400;

  --h4-font-size: 18px;
  --h4-line-height: 28px;
  --h4-letter-spacing: -4%;
  --h4-font-weight: 400;

  --h5-font-size: 14px;
  --h5-line-height: 20px;
  --h5-letter-spacing: -4%;
  --h5-font-weight: 400;

  --b1-font-size: 20px;
  --b1-line-height: 28px;
  --b1-letter-spacing: -4%;
  --b1-font-weight: 400;

  --b2-font-size: 16px;
  --b2-line-height: 24px;
  --b2-letter-spacing: 0%;
  --b2-font-weight: 400;

  --b3-font-size: 14px;
  --b3-line-height: 20px;
  --b3-letter-spacing: -4%;
  --b3-font-weight: 400;

  --b4-font-size: 12px;
  --b4-line-height: 14px;
  --b4-letter-spacing: 0%;
  --b4-font-weight: 400;

  --b5-font-size: 10px;
  --b5-line-height: 12px;
  --b5-letter-spacing: -4%;
  --b5-font-weight: 400;

  --t1-font-size: 24px;
  --t1-line-height: 32px;
  --t1-letter-spacing: 10%;
  --t1-font-weight: 400;

  --t2-font-size: 16px;
  --t2-line-height: 24px;
  --t2-letter-spacing: 10%;
  --t2-font-weight: 400;

  --t3-font-size: 14px;
  --t3-line-height: 18px;
  --t3-letter-spacing: 10%;
  --t3-font-weight: 400;

  --t4-font-size: 12px;
  --t4-line-height: 24px;
  --t4-letter-spacing: 10%;
  --t4-font-weight: 400;

  --t5-font-size: 12px;
  --t5-line-height: 16px;
  --t5-letter-spacing: -4%;
  --t5-font-weight: 400;

  --large-font-size: 24px;
  --large-line-height: 32px;
  --large-letter-spacing: -4%;
  --large-font-weight: 400;

  --small-font-size: 12px;
  --small-line-height: 16px;
  --small-letter-spacing: -4%;
  --small-font-weight: 400;

  --title-font-size: 40px;
  --title-line-height: 48px;
  --st-font-size: 16px;
  --st-line-height: 20px;

  --gap: 12px;
}

body {
  font-family: "Rethink Sans", serif;
  font-optical-sizing: auto;
  font-smooth: always;
}

h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  font-weight: var(--h1-font-weight);
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  font-weight: var(--h2-font-weight);
}

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  font-weight: var(--h3-font-weight);
}

h4 {
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  font-weight: var(--h4-font-weight);
}

h5 {
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  font-weight: var(--h5-font-weight);
}

.b1 {
  font-size: var(--b1-font-size);
  line-height: var(--b1-line-height);
  letter-spacing: var(--b1-letter-spacing);
  font-weight: var(--b1-font-weight);
}

.b2 {
  font-size: var(--b2-font-size);
  line-height: var(--b2-line-height);
  letter-spacing: var(--b2-letter-spacing);
  font-weight: var(--b2-font-weight);
}

.b3 {
  font-size: var(--b3-font-size);
  line-height: var(--b3-line-height);
  letter-spacing: var(--b3-letter-spacing);
  font-weight: var(--b3-font-weight);
}

.b4 {
  font-size: var(--b4-font-size);
  line-height: var(--b4-line-height);
  letter-spacing: var(--b4-letter-spacing);
  font-weight: var(--b4-font-weight);
}

.b5 {
  font-size: var(--b5-font-size);
  line-height: var(--b5-line-height);
  letter-spacing: var(--b5-letter-spacing);
  font-weight: var(--b5-font-weight);
}

.t1 {
  font-size: var(--t1-font-size);
  line-height: var(--t1-line-height);
  letter-spacing: var(--t1-letter-spacing);
  font-weight: var(--t1-font-weight);
}

.t2 {
  font-size: var(--t2-font-size);
  line-height: var(--t2-line-height);
  letter-spacing: var(--t2-letter-spacing);
  font-weight: var(--t2-font-weight);
}

.t3 {
  font-size: var(--t3-font-size);
  line-height: var(--t3-line-height);
  letter-spacing: var(--t3-letter-spacing);
  font-weight: var(--t3-font-weight);
}

.t4 {
  font-size: var(--t4-font-size);
  line-height: var(--t4-line-height);
  letter-spacing: var(--t4-letter-spacing);
  font-weight: var(--t4-font-weight);
}

.t5 {
  font-size: var(--t5-font-size);
  line-height: var(--t5-line-height);
  letter-spacing: var(--t5-letter-spacing);
  font-weight: var(--t5-font-weight);
}

.large {
  font-size: var(--large-font-size);
  line-height: var(--large-line-height);
  letter-spacing: var(--large-letter-spacing);
  font-weight: var(--large-font-weight);
  font-style: italic;
}

.small {
  font-size: var(--small-font-size);
  line-height: var(--small-line-height);
  letter-spacing: var(--small-letter-spacing);
  font-weight: var(--small-font-weight);
  font-style: italic;
}

.gap-2-5 {
  gap: var(--gap);
}

.title {
  font-size: var(--title-font-size);
  line-height: var(--title-line-height);
}

.st {
  font-size: var(--st-font-size);
  line-height: var(--st-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0px;
}

@media (max-width: 768px) {
  :root {
    --h1-font-size: 24px;
    --h1-line-height: 30px;
    --h1-letter-spacing: -4%;
    --h1-font-weight: 400;

    --h2-font-size: 20px;
    --h2-line-height: 24px;
    --h2-letter-spacing: -4%;
    --h2-font-weight: 400;

    --h3-font-size: 18px;
    --h3-line-height: 28px;
    --h3-letter-spacing: -4%;
    --h3-font-weight: 400;

    --h4-font-size: 16px;
    --h4-line-height: 24px;
    --h4-letter-spacing: -4%;
    --h4-font-weight: 400;

    --h5-font-size: 14px;
    --h5-line-height: 16px;
    --h5-letter-spacing: -4%;
    --h5-font-weight: 400;

    --h6-font-size: 12px;
    --h6-line-height: 16px;
    --h6-letter-spacing: -4%;
    --h6-font-weight: 400;

    --b1-font-size: 16px;
    --b1-line-height: 24px;
    --b1-letter-spacing: -0.5%;
    --b1-font-weight: 400;

    --b2-font-size: 14px;
    --b2-line-height: 20px;
    --b2-letter-spacing: -4%;
    --b2-font-weight: 400;

    --b3-font-size: 12px;
    --b3-line-height: 16px;
    --b3-letter-spacing: 0%;
    --b3-font-weight: 400;

    --t1-font-size: 24px;
    --t1-line-height: 32px;
    --t1-letter-spacing: 0%;
    --t1-font-weight: 400;

    --t2-font-size: 16px;
    --t2-line-height: 24px;
    --t2-letter-spacing: 10%;
    --t2-font-weight: 400;

    --t3-font-size: 14px;
    --t3-line-height: 20px;
    --t3-letter-spacing: 0%;
    --t3-font-weight: 400;

    --t4-font-size: 12px;
    --t4-line-height: 16px;
    --t4-letter-spacing: 10%;
    --t4-font-weight: 400;

    --large-font-size: 24px;
    --large-line-height: 32px;
    --large-letter-spacing: -4%;
    --large-font-weight: 400;

    --small-font-size: 16px;
    --small-line-height: 24px;
    --small-letter-spacing: -4%;
    --small-font-weight: 400;


    --large-font-size: 16px;
    --large-line-height: 24px;
    --large-letter-spacing: -4%;
    --large-font-weight: 400;
  }
}