@font-face {
    font-family: 'general sans';
    src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.font-title { font-family: 'general sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans'; }

:root {
  --font-title: 'general sans';
}

:root {
  --color-primary: #622181;
  --color-secondary: #AFD149;
  --color-tertiary: #F8B333;
  --color-quaternary: #56B6DD;
  --color-quinary: #F2F2F8;
  --color-senary: #3E1551;
  --color-septenary: #92B42D;
  --color-octonary: #7900FF;
  --color-nonary: #7900FF;
  --color-white: #ffffff;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-black: #000000;
}


.btn-primary {
    font-size: 1rem; font-weight: 400;
    background-color: #622181;
    color: #AFD149;
    border: 0 solid transparent;
    border-radius: 0.3125rem;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
}

.btn-primary:hover {
    background-color: #62218180;
}


.btn-secondary {
    font-size: 1rem; font-weight: 400;
    background-color: #AFD149;
    color: #622181;
    border: 0 solid transparent;
    border-radius: 0.3125rem;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
}

.btn-secondary:hover {
    background-color: #AFD14980;
}


.btn-ghost {
    font-size: 1rem; font-weight: 400;
    background-color: transparent;
    color: #622181;
    border: 0.0625rem solid #622181;
    border-radius: 0.3125rem;
    padding: 0.75rem 1.5rem 0.75rem 1.5rem;
}

.btn-ghost:hover {
    background-color: transparent;
}


.btn-text {
    font-size: 1rem; font-weight: 400;
    background-color: transparent;
    color: #622181;
    border: 0 solid transparent;
    border-radius: 0;
    padding: 0 0 0 0;
}

.btn-text:hover {
    background-color: transparent;
}

.display_1 {
  font-weight: 600;;
  font-size: 4.375rem;
  line-height: 110%;
}

.display_2 {
  font-weight: 600;;
  font-size: 4rem;
  line-height: 110%;
}

.display_3 {
  font-weight: 600;;
  font-size: 3.625rem;
  line-height: 110%;
}

.display_4 {
  font-weight: 600;;
  font-size: 3.25rem;
  line-height: 110%;
}

.display_5 {
  font-weight: 600;;
  font-size: 2.875rem;
  line-height: 110%;
}

.display_6 {
  font-weight: 600;;
  font-size: 2.5rem;
  line-height: 110%;
}

.heading_1 {
  font-weight: 600;;
  font-size: 2.5rem;
  line-height: 120%;
}

.heading_2 {
  font-weight: 600;;
  font-size: 2.25rem;
}

.heading_3 {
  font-weight: 600;;
  font-size: 2rem;
}

.heading_4 {
  font-weight: 600;;
  font-size: 1.75rem;
}

.heading_5 {
  font-weight: 600;;
  font-size: 1.5rem;
}

.heading_6 {
  font-weight: 600;;
  font-size: 1.25rem;
}

.subheading {
  font-weight: 500;;
  font-size: 0.875rem;
  line-height: 160%;
  letter-spacing: 0.175rem;
}

.intro {
  font-weight: 400;;
  font-size: 1.25rem;
  line-height: 160%;
}

.paragraph {
  font-weight: 400;;
  font-size: 1rem;
  line-height: 160%;
}

.paragraph_bold {
  font-weight: 600;;
  font-size: 1rem;
  line-height: 160%;
}

.small {
  font-weight: 400;;
  font-size: 0.875rem;
  line-height: 160%;
}

.small_bold {
  font-weight: 600;;
  font-size: 0.875rem;
  line-height: 160%;
}

.smaller {
  font-weight: 400;;
}

.smaller_bold {
  font-weight: 400;;
}