:root {
	/* color variables */
	--gray-100: #f4f4f5;
	--green-800: #1c713c;
	--gray-400: #a1a1aa;
	--colors-blue-gray-50: #f8fafc;
	--colors-alpha-dark-900: #1a1a1a;
	--colors-alpha-dark-50: rgba(26, 26, 26, 0.08);
	--colors-green-50: #f2fdf5;
	--fill-00: var(--colors-alpha-light-900);
	--colors-green-600: #16a249;
	--state-success-active: var(--colors-green-600);
	--colors-alpha-light-900: #fff;
	--text-light-primary: var(--colors-alpha-light-900);
	--colors-gray-600: #52525b;
	--fill-600: var(--colors-gray-600);
	--colors-alpha-dark-400: rgba(26, 26, 26, 0.36);
	--text-dark-tertiary: var(--colors-alpha-dark-400);

	/* number variables */
	--spacing-12: 32px;
	--spacing-18: 64px;
	--blur-1: 2px;
	--radi-1: 2px;
	--spacing-7: 12px;
	--spacing-10: 24px;
	--spacing-0: 0px;
	--spacing-16: 48px;
	--spacing-5: 8px;
	--spacing-8: 16px;

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

* {
	--min-screen-size: 430;
	--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;
}

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	font-family: 'Inter';
	letter-spacing: 0px;
	text-align: center;
	background-color: #fff;
	overflow: auto;
}



/* text utility classes */

.text-base-font-bold {
	color: var(--fill-600);
	font-size: 16px;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-2xl-font-regular {
	color: var(--green-800);
	font-size: 24px;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	line-height: 1.583;
	letter-spacing: 0px;
}

.text-3xl-font-regular {
	color: var(--green-800);
	--min-font-size: 20; --max-font-size: 30; font-size: var(--interpolate);
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0px;
}

.text-base-font-regular {
	color: var(--colors-alpha-dark-900);
	font-size: 16px;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text-2xl-font-light {
	color: var(--colors-alpha-dark-900);
	--min-font-size: 18; --max-font-size: 24; font-size: var(--interpolate);
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	line-height: 1.583;
	letter-spacing: 0px;
}

.text-5xl-font-light {
	color: var(--colors-alpha-dark-900);
	--min-font-size: 29; --max-font-size: 48; font-size: var(--interpolate);
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	line-height: 1.333;
	letter-spacing: 0px;
}

.text-xl-font-regular {
	color: var(--colors-alpha-dark-900);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0px;
}



/* section utility classes */

.section2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4px 8px 0 8px;
}

.section1 {
	display: flex;
	flex-direction: column;
	background-color: var(--colors-green-50);
	padding: 60px var(--spacing-16) 137px var(--spacing-16);
	border-bottom: 1px solid var(--colors-alpha-dark-50);
}



/* button hover utility classes */

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