/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

:root {
  /* Font Families */
  --sans-serif-font: 'Inter', sans-serif;
  --display-font: 'Inter', sans-serif;
  --serif-font: sans-serif;
  
  --body-font: var(--sans-serif-font);
  --headline-font: var(--display-font);
  --subheadline-font: var(--sans-serif-font);
  
  --nav-offset: 100px;
  
  /* Font Size */
  --body-text-size: 16px;
  --button-text-size: 16px; 
  --small-text-size: 14px;
  
  /* Headline type scale */
  /*
  --headline-1-size: 58px; 
  --headline-2-size: 47px; 
  --headline-3-size: 33px; 
  --headline-4-size: 23px;
  --headline-5-size: 21px;
  --headline-6-size: 19px;
  */
  
  --headline-1-size: clamp(40px, 4.5vw, 53px);
  --headline-2-size: clamp(34px, 4vw, 47px);
  --headline-3-size: clamp(28px, 3.5vw, 37px);
  --headline-4-size: clamp(22px, 3vw, 29px);
  --headline-5-size: clamp(18px, 2.5vw, 21px);
  --headline-6-size: clamp(16px, 2vw, 18px);
    
  --headline-1-spacing: -0.25px;
  --headline-2-spacing: -0.125px;
  --headline-3-spacing: -0.125px;
  --headline-4-spacing: -0.125px;
  --headline-5-spacing: 0;
  --headline-6-spacing: 0;
  
  --lead-size: var(--headline-6-size);
  --lead-spacing: var(--headline-6-spacing);
  
  --blockquote-size: var(--lead-size);
  --blockquote-spacing: var(--lead-spacing);
  
  /* Line Height */
  --body-line-height: 1.5;
  --list-line-height: 1.7;
  
  /* Letter Spacing */
  --body-text-spacing: 0px;
  
  /* Font Weight */
  --body-text-weight: 400;
  --headline-weight: 800;
  --subheadline-weight: 700;
  
  /* Text Bottom Margins */
  --headline-bottom-margin: 1.5rem;
  --paragraph-bottom-margin: 2rem;
  
  /* Acid Colors */
  
  --violet: #7D2EFF;
  --indigo: #48008D;
  --chartreuse: #CCFF00;
  --rose: #FF0DA9;
  --tomato: #FF5436;
  --turquoise: #03DAC5;
  --yellow: #FFFF00;
  --ghost_white: #f8f8fd;
  --lavender: #EDE7F6;
  --lavender_dark: #DCDAF3;
  
    /* Utility Colors */
  --black: #000000;
  --white: #FFFFFF;
  --success: #95C623;
  --danger: #D00000;
  --secondary: #0776F5;
  --gray: #fcfafa !important;
  --gray-100: var(--ghost_white) !important; /* Light BG */
  --gray-200: #DAD8D7; /* Border color */
  --gray-300: #3C3C3C; /* Muted Text */
  --gray-400: #2D2D2D; /* Body Text */
  --gray-500: #1A1A1A; /* Dark Text */
  
  /* Font Colors */
  --text-color: var(--gray-400);
  --text-dark: var(--gray-500);
  --text-light: rgba(255,255,255,0.9);
  --text-muted: var(--gray-300);
  --text-marigold: #F29100;
  --primary: var(--violet); /* Purple */
  --primary-hover: var(--violet); /* Brighter Purple */
  --primary-over-dark: var(--chartreuse); /* Indigo +87.5%*/
  --primary-over-dark-hover: var(--chartreuse); /* Brighter Light Indigo */
  --primary-light: #E8D3F1; /* --primary lightened */
  
  /* Background Colors */
  --bg-white: var(--white);
  --bg-light: var(--ghost_white);
  --bg-dark: #3A0375; /* Indigo */
  --bg-dark-25: #340e70; /* Indigo -25% */
  --bg-dark-50: #250549; /* Indigo -50% */
  --bg-dark-75: #140128; /* Indigo -75%*/
  --bg-dark-25-gradient: linear-gradient(180deg, #340e70, #250549);
  --border-color: var(--gray-200);
  --navbar-border-color: #dddbda;
  
  /* Shadows */
  
  --shadow-sm: 13px 15px 8px rgba(0, 0, 0, 0.01), 7px 8px 7px rgba(0, 0, 0, 0.05), 3px 4px 5px rgba(0, 0, 0, 0.09), 1px 1px 3px rgba(0, 0, 0, 0.1); !important;
  --shadow-md: 35px 47px 16px 0px rgba(0, 0, 0, 0.00), 23px 30px 15px 0px rgba(0, 0, 0, 0.01), 13px 17px 13px 0px rgba(0, 0, 0, 0.05), 6px 7px 9px 0px rgba(0, 0, 0, 0.08), 1px 2px 5px 0px rgba(0, 0, 0, 0.09);
  
  /* Buttons */
  --button-border-radius: 64px;
  
  /* Dropdowns */
  --dropdown-border-radius: 0.875rem !important;
  
  /* Tables */
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--text-dark);
  --bs-table-striped-bg: var(--bg-light) !important;
  --bs-table-active-color: var(--text-dark);
  --bs-table-active-bg: var(--bg-light);
  --bs-table-hover-color: var(--text-dark);
  --bs-table-hover-bg: var(--bg-light);
  --table-striped-bg: transparent !important;
  
  /* Section Padding */
  --section-padding: 7.25rem; /* 120px */
  --section-padding-minor: 6.25rem; /* 100px */
  --section-padding-major: 9.25rem; /* 160px */
  
  /* Small Device Section Padding */
  --section-padding-sm: 4rem; /* 48px */
  --section-padding-minor-sm: 4rem; /* 24px */
  
  /* Mark */
  --bs-highlight-bg: #F7EE7F;
  
  /* Inputs */
  --input-lg-font-size: 1rem;
  --input-lg-vertical-padding: 0.75rem;
  --input-bg: var(--gray);
  
}

@media (min-width: 992px) {
  :root {
    --nav-offset: 120px;
  }
}

/*****************************************/
/* Start your style declarations here    */
/*****************************************/