:root {
	/* color variables */
	--y5: rgba(255, 200, 0, 0.1);
	--p1: #fb7299;
	--v1: #ffdd98;
	--y3: #ffae00;
	--r3: #2f0a0a;
	--v2: #1e140a;
	--g1: #e98431;
	--r2: #8c1d1d;
	--g3: #2f1a0a;
	--y4: rgba(255, 200, 0, 0.5);
	--r1: #e93131;
	--y2: #fff300;
	--o3: #ff1f00;
	--y1: #ffc800;
	--o5: rgba(255, 92, 0, 0.1);
	--b1: #1f51ff;
	--o4: rgba(255, 92, 0, 0.5);
	--o2: #ff9700;
	--g2: #542f11;
	--n3-10: rgba(255, 255, 255, 0.1);
	--t3: rgba(255, 255, 255, 0.5);
	--t2: rgba(255, 255, 255, 0.7);
	--n4-5: rgba(255, 255, 255, 0.05);
	--n1: #101014;
	--t1: #fff;
	--n2: #202024;
	--o1: #ff5c00;

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

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

.t2-regular {
	color: var(--t3);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
}

.t1-regular-a3 {
	font-size: 12px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	font-weight: 400;
	line-height: 1.667;
}

.t2-bold1 {
	color: var(--t1);
	font-size: 14px;
	font-style: normal;
	line-height: 1.571;
}

.t2-bold3 {
	color: var(--o1);
	font-size: 14px;
	font-style: normal;
	line-height: 1.571;
	letter-spacing: 0px;
}

.t1-bold1 {
	color: var(--g1);
	font-size: 12px;
	font-style: normal;
	line-height: 1.667;
}

.t3-regular2 {
	color: var(--t1);
	font-size: 16px;
	font-style: normal;
	line-height: 1.5;
}

.t3-bold {
	color: var(--t1);
	font-size: 16px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	line-height: 1.5;
}

.t5-bold2 {
	color: var(--t1);
	font-size: 24px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	line-height: 1.333;
}

.t4-regular {
	color: var(--t3);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
}

.t3-regular3 {
	color: var(--t1);
	font-size: 16px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
}

.t1-regular-a2 {
	color: var(--t2);
	font-size: 12px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	font-weight: 400;
	line-height: 1.667;
	letter-spacing: 0px;
}

.t1-regular-a1 {
	color: var(--t3);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.667;
}

.t2-bold2 {
	color: var(--t1);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.571;
	letter-spacing: 0px;
}

.t3-regular1 {
	color: var(--t1);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
}

.t3-bold1 {
	color: var(--o1);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
}

.t2-regular1 {
	color: var(--t3);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.571;
}

.t5-bold1 {
	font-size: 24px;
	font-style: normal;
	line-height: 1.333;
}

.t8-heavy {
	color: #fff;
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.25;
}

.t4-bold {
	color: var(--t1);
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
}

.t1-bold2 {
	color: var(--t1);
	font-size: 12px;
	font-style: normal;
	line-height: 1.667;
	letter-spacing: 0px;
}

.t3-heavy {
	color: var(--n1);
	font-size: 16px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: 0px;
}

.t1-regular {
	color: var(--t1);
}



/* ui objects utility classes */

.btn3 {
	display: flex;
	background-color: var(--o5);
	padding: 6px 12px;
	border-radius: 8px;
}

.group2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0 16px;
}

.card-dark {
	display: flex;
	flex-direction: column;
	background-color: rgba(32, 32, 36, 0.8);
	padding-top: 4px;
	padding-bottom: 16px;
	border: 0.5px solid var(--n4-5);
	border-radius: 20px;
}

.input2 {
	width: 118px;
	border-radius: 8px;
}

.btn1 {
	display: flex;
	background-color: var(--n3-10);
	padding: 3px 7px;
	border: 1px solid var(--n3-10);
	border-radius: 8px;
}

.input3 {
	border-radius: 16px;
}

.group1 {
	height: 78px;
	display: flex;
	flex-direction: column;
	padding: 0 4px;
}

.btn-white {
	display: flex;
	background-color: #fff;
	padding: 12px 36px 12px 41px;
	border-radius: 15px;
}

.btn2 {
	display: flex;
	background-position: top left;
	background-size: auto auto;
	background-repeat: no-repeat;
	padding: 8px 27px 8px 28px;
	border-radius: 20px;
}

.input1 {
	border-radius: 20px;
}



/* button hover utility classes */

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

.hover-dark:hover {
	filter: brightness(0.85);
}
:root {
    /* color variables (aligned with b.html) */
    --n1: #101014;           /* page background */
    --n2: #202024;           
    --n3-10: rgba(255, 255, 255, 0.1);
    --n4-5: rgba(255, 255, 255, 0.05);
    --t1: #fff;              /* primary text */
    --t2: rgba(255, 255, 255, 0.7);
    --t3: rgba(255, 255, 255, 0.5);
    --o1: #ff5c00;           /* accent */
    --o4: rgba(255, 92, 0, 0.5);
    --o5: rgba(255, 92, 0, 0.1);
}