@import url("reset.css");
@import url("https://fonts.cdnfonts.com/css/poppins");
@import url("https://fonts.cdnfonts.com/css/space-grotesk");
:root {
  --color-cream: #fbf7ec;
  --color-orange: #e76c21;
  --color-yellow: #d7a167ff;
  --color-orange-dark: #9e4a17;
  --color-gray-muted: #9a9890;
  --color-blue-muted: #b6cade;
  --color-blue: #0a4a7b;
  --color-gray: #b1b2b5;
  --color-orange-bullet: #ff6b00;
  --color-error: #ef4444;
  --color-gold: #d7a167;
  --color-blue-dark: #094a7b;
  --color-black: #0d0d14;
  --color-dark-gray: #333;
  --color-gray-medium: #888;
  --color-gray-light: #ccc;
  --color-gray-disabled: #9ca3af;
  --color-midnight: #0f0f19;
  --color-coffee: #301f1c;
  --color-charcoal: #5b575a;
  --color-overlay: rgb(75 85 99 / 0.8);
  --color-shadow: rgb(0 0 0 / 0.1);
  --color-article-card-bg: rgba(82, 82, 82, 0.8);
  --color-article-header-bg: rgba(12, 14, 15, 0.9);
  --color-table-header-bg: rgba(255, 255, 255, 0.1);
  --color-input-border: rgba(255, 255, 255, 0.5);
}
* {
  font-family: "Poppins", sans-serif;
  color: var(--color-cream);
  line-height: 1.2;
}
html {
  font-size: 1.2vw;
}
body {
  background-color: #000000;
  overflow-x: hidden;
}
main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10rem;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
.active {
  color: var(--color-orange);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.field-error,
.form-error {
  color: var(--color-error);
  font-size: 2rem;
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}
input[data-autocompleted] {
  background-color: transparent !important;
}
button:focus,
a,
button,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
a,
button {
  position: relative;
  text-decoration: none;
  color: var(--color-cream);
  font-weight: 300;
  cursor: pointer;
  z-index: 10;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  background: var(--color-orange-dark);
  color: var(--color-cream);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
}
.content {
  h1,
  h2,
  h3,
  h4 {
    font-family: "Poppins", sans-serif;
  }
  h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(12px, 5.7vw, 25.1px);
    color: var(--color-blue-muted);
    font-weight: 400;
    line-height: 1.2;
  }
  h2 {
    font-size: 3.5rem;
  }
  h3 {
    font-size: 3rem;
  }
  h4 {
    font-size: 2rem;
  }
  p {
    font-size: clamp(10px, 2.95vw, 13px);
    font-style: normal;
    line-height: 1.2;
    font-weight: 100;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: 0.3rem;
      font-size: clamp(10px, 2.73vw, 12px);
      line-height: 1.2;
      font-weight: 300;
      &::before {
        content: "—";
        position: absolute;
        left: 0;
        color: var(--color-orange-bullet);
      }
    }
  }
}
hr {
  background-color: var(--color-cream);
}
form {
  label {
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-cream);
  }
  input,
  textarea {
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-cream);
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 0.1rem solid var(--color-input-border);
    outline: none;
  }
  textarea {
    resize: none;
    height: 3rem;
  }
  button {
    border-radius: 0.1rem;
    background-color: var(--color-orange);
    font-weight: bold;
  }
}
@media screen and (min-width: 768px) {
  .field-error,
  .form-error {
    font-size: 1rem;
  }
  .content {
    h1 {
      font-size: clamp(18px, 2.43vw, 35px);
    }
    h2 {
      font-size: 1.2rem;
    }
    h3 {
      font-size: 1.1rem;
    }
    h4 {
      font-size: 1rem;
    }
    p {
      font-size: clamp(12px, 1.25vw, 18px);
      line-height: 1.2;
      color: var(--color-gray-muted);
    }
    ul {
      li {
        font-size: clamp(16px, 1.67vw, 24px);
      }
    }
  }
  form {
    label {
      font-size: 1.2rem;
    }
    input,
    textarea {
      font-size: 1.2rem;
    }
    textarea {
      height: 5rem;
    }
  }
}
.blue {
  color: var(--color-blue);
}
.orange {
  color: var(--color-orange) !important;
}
.gray {
  color: var(--color-gray) !important;
}

.line {
  --line-width: attr(data-width %, 100%);
  width: var(--line-width);
  height: 1rem;
  background-color: #383838;
  border-radius: 2rem;
  .line-percentage {
    --line-percentage-color: attr(data-color type(<color>), transparent);
    --line-percentage-width: attr(data-width %, 100%);
    width: var(--line-percentage-width);
    height: 1rem;
    border-radius: 2rem;
    background: var(--line-percentage-color);
  }
  .line-percentage[data-color="#e76c21"] {
    background: linear-gradient(to right, #e76c21, #e67732, #e19b64);
  }
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;

  border-right: 1rem solid blue;
}