:root {
	/* color variables */
	--white: #fff;
	--prmary-bue: #4e73df;
	--primary: #4e73df;
	--grey-300: #b0b0b0;
	--grey-900: #3d3d3d;
	--grey-800: #454545;
	--grey-50: #f6f6f6;
	--black: #000;
	--grey-100: #e7e7e7;
	--grey-200: #d1d1d1;
	--grey-700: #4f4f4f;
	--grey-500: #6d6d6d;
	--grey-600: #5d5d5d;
	--grey-400: #888;

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

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



/* ui objects utility classes */

.card2 {
	display: flex;
	align-items: center;
	background-color: var(--white);
	padding: 11px;
	border: 1px solid var(--grey-100);
	border-radius: 16px;
}

.input {
	width: 220px;
	border-radius: 12px;
}

.card1 {
	width: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 3px;
	padding-bottom: 1px;
	border: 1px solid var(--grey-500);
	border-radius: 2px;
}



/* button hover utility classes */

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

.hover-zoom:hover {
	scale: 1.05;
}