/* FONT 
========================================================================
*/

/**
 * Add the correct system-ui font-family in Firefox.
 */

@font-face {
	font-family: system-ui;
	src: local('.AppleSystemUIFont'), local('Segoe UI'), local('Ubuntu'), local('Roboto-Regular'),
		local('HelveticaNeue');
}

@font-face {
	font-family: system-ui;
	font-style: italic;
	src: local('.AppleSystemUIFont'), local('Segoe UI Italic'), local('Ubuntu-Italic'),
		local('Roboto-Italic'), local('HelveticaNeue-Italic');
}

@font-face {
	font-family: system-ui;
	font-weight: bold;
	src: local('.AppleSystemUIFont'), local('Segoe UI Bold'), local('Ubuntu-Bold'),
		local('Roboto-Bold'), local('HelveticaNeue-Bold');
}

@font-face {
	font-family: system-ui;
	font-style: italic;
	font-weight: bold;
	src: local('.AppleSystemUIFont'), local('Segoe UI Bold Italic'), local('Ubuntu-BoldItalic'),
		local('Roboto-BoldItalic'), local('HelveticaNeue-BoldItalic');
}

/**
 * Use the default user interface font in all browsers (opinionated).
 */

:root {
	--font-family: system-ui;
}

:where(html) {
	font-family:
		var(--font-family),
		/* macOS 10.11-10.12 */ -apple-system,
		/* Windows 6+ */ 'Segoe UI',
		/* Android 4+ */ 'Roboto',
		/* Ubuntu 10.10+ */ 'Ubuntu',
		/* Gnome 3+ */ 'Cantarell',
		/* KDE Plasma 5+ */ 'Noto Sans',
		/* fallback */ sans-serif,
		/* macOS emoji */ 'Apple Color Emoji',
		/* Windows emoji */ 'Segoe UI Emoji',
		/* Windows emoji */ 'Segoe UI Symbol',
		/* Linux emoji */ 'Noto Color Emoji';
}

/**
   * Use the default monospace user interface font in all browsers (opinionated).
   */

:where(code, kbd, samp, pre) {
	font-family:
		ui-monospace,
		/* macOS 10.10+ */ 'Menlo',
		/* Windows 6+ */ 'Consolas',
		/* Android 4+ */ 'Roboto Mono',
		/* Ubuntu 10.10+ */ 'Ubuntu Monospace',
		/* KDE Plasma 5+ */ 'Noto Mono',
		/* KDE Plasma 4+ */ 'Oxygen Mono',
		/* Linux/OpenOffice fallback */ 'Liberation Mono',
		/* fallback */ monospace,
		/* macOS emoji */ 'Apple Color Emoji',
		/* Windows emoji */ 'Segoe UI Emoji',
		/* Windows emoji */ 'Segoe UI Symbol',
		/* Linux emoji */ 'Noto Color Emoji';
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  * 3. Prevent overflow of the container in all browsers (opinionated).
  */

:where(pre) {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
	overflow: auto; /* 3 */
}