@font-face
{
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;

		src: url( "fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth,wght.woff2" ) format( "woff2-variations" ),
	     url( "fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth,wght.ttf" ) format( "truetype-variations" ),
	     url( "fonts/Instrument_Sans/InstrumentSans-VariableFont_wdth,wght.ttf" ) format( "truetype" );
}

@font-face
{
	font-family: "Instrument Sans";
	font-style: italic;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;

	src: url( "fonts/Instrument_Sans/InstrumentSans-Italic-VariableFont_wdth,wght.woff2" ) format( "woff2-variations" ),
	     url( "fonts/Instrument_Sans/InstrumentSans-Italic-VariableFont_wdth,wght.ttf" ) format( "truetype-variations" ),
	     url( "fonts/Instrument_Sans/InstrumentSans-Italic-VariableFont_wdth,wght.ttf" ) format( "truetype" );
}

@font-face
{
	font-family: "Bitter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;

	src: url( "fonts/Bitter/Bitter[wght].woff2" ) format( "woff2-variations" ),
	     url( "fonts/Bitter/Bitter[wght].ttf" ) format( "truetype-variations" ),
	     url( "fonts/Bitter/Bitter[wght].ttf" ) format( "truetype" );
}

@font-face
{
	font-family: "Bitter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;

	src: url( "fonts/Bitter/Bitter-Italic[wght].woff2" ) format( "woff2-variations" ),
	     url( "fonts/Bitter/Bitter-Italic[wght].ttf" ) format( "truetype-variations" ),
	     url( "fonts/Bitter/Bitter-Italic[wght].ttf" ) format( "truetype" );
}

:root
{
		--font-ui: "Instrument Sans", var( --font-system );

		--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

		--font-document: "Bitter", Georgia, "Times New Roman", serif;

		--font-ui-width: 100%;

		--text-2xs: .74rem;
	--text-xs: .8rem;
	--text-sm: .84rem;
	--text-base: .9rem;
	--text-md: 1rem;
	--text-lg: 1.1rem;
	--text-xl: 1.4rem;
	--text-2xl: 1.7rem;
}

@media ( max-width: 46rem )
{
	:root
	{
		--text-2xs: .8rem;
		--text-xs: .86rem;
		--text-sm: .92rem;
		--text-base: 1rem;
		--text-md: 1.06rem;
		--text-lg: 1.15rem;
		--text-xl: 1.45rem;
	}
}