: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: 1920;
	--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 */

.t4-bold {
	color: var(--o1);
	font-size: 20px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0px;
}

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

.t3-bold {
	color: var(--o1);
	font-size: 16px;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}