:root {
  /* color variables */
  --gray-scales-black: #272343;
  --gray-scales-gray: #9a9caa;
  --gray-scales-off-white: #f0f2f3;
  --icon: #8e8e93;
  --text-body-text: #3a3a3c;
  --gray-scales-white: #fff;
  --gray-scales-dark-gray: #636270;

  /* responsive margins / paddings */
  --margin-sm: 16px;
  --margin-md: 32px;
}

* {
  --min-screen-size: 430;
  --max-screen-size: 1920;
  --interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
  --interpolate: clamp(
    calc(var(--min-font-size) * 1px),
    calc(
      (var(--min-font-size) * 1px) + var(--interpolate-diff) *
        (
          (100vw - calc(var(--min-screen-size) * 1px)) /
            (var(--max-screen-size) - var(--min-screen-size))
        )
    ),
    calc(var(--max-font-size) * 1px)
  );
}

html {
  height: 100%;
  font-size: 16px;
}

/* text utility classes */

.subtitle-gray-scales-black {
  color: var(--gray-scales-black);
  --min-font-size: 18;
  --max-font-size: 32;
  font-size: var(--interpolate);
  font-weight: 600;
  line-height: 1.1;
}

.text1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.nav-links {
  color: var(--gray-scales-black);
  font-size: 14px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0px;
}

.text2 {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}

.subtitle1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.text-red {
  color: #cc0001;
  font-size: 18px;
  font-family: "Inter";
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0px;
}

.sub-text-blue {
  color: #0236a3;
  font-size: 48px;
}

.sub-text-blue3 {
  color: #003bb8;
  font-size: 48px;
}

.sub-text-blue4 {
  color: #003bb8;
  font-size: 48px;
  letter-spacing: -8px;
}

.sub-text-blue2 {
  color: #0236a3;
  font-size: 48px;
  letter-spacing: -8px;
}

/* section utility classes */

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

/* ui objects utility classes */

.input {
  border-radius: 8px;
}

/* button hover utility classes */

.hover-bright:hover {
  filter: brightness(1.2);
}

.hover-dark:hover {
  filter: brightness(0.85);
}