:root{
	/*colors*/
		--gray_1: #333;
		--gray_2: #393939;
		--gray_3: #e3e3e3;
		--gray_4: #aaa;
		--gray_5: #f0f0f0;
		--green_1: #204051;
		--green_2: #3b6978;
		--green_3: #84a9ac;
		--green_4: #d8f3dc;
		--red_1: #a2453d;
		--red_2: #c45c54;
		--red_3: #e08b88;
		--red_4: #f8d4d2;
		--yellow_1: #f6bf4f;
		--yellow_2: #f0c775;
		--yellow_3: #ecdab5;
		--yellow_4: #f1efea;
	/*filter*/
		--filter: brightness(1.2) saturate(0.8);
		--filter_1: brightness(0.9) saturate(0.8);
	/*font_size*/
		--xs_font: 10px;/*12px*/
		--s_font: 12px;/*12px*/
	    --m_font: 14px;/*16px*/
	    --l_font: 17px;/*20px*/
	    --xl_font: 21px;/*24px*/
	    --xxl_font: 24px;/*28px*/
	/*shadows*/
		--shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	/*spaces*/
		--xxs_gap: 2px;
		--xs_gap: 4px;
		--s_gap: 8px;
		--m_gap: 12px;
		--l_gap: 16px;
		--xl_gap: 20px;
		--input_gap: 42px;
		--aside_width:340px;
		--aside_width_inverse:calc(100vw - var(--aside_width) - (3 * var(--m_gap)));
		--header_height:64px;
		--header_height_inverse:calc(100vh - var(--header_height) - (2 * var(--m_gap)));
		--main_width:calc(100vw - (2 * var(--m_gap)));
	/*transition*/
		--filter_transition: filter 0.3s ease;
		--scale_transition: transform 0.3s ease;
}