@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;500;700;800&display=swap');

:root {
	--font: 'Mukta';
	--font-weight: 300;

	--size-tiny: .5rem;
	--size-small: 1rem;
	--size-medium: 2rem;
	--size-large: 4rem;
	--size-huge: 8rem;

	--color-primary: #202020;
	--color-onprimary: #fff;
	--color-primary-bg: #fff;
	--color-onprimary-bg: #505050;
	--color-muted: #888;
	--color-danger: #e53935;
	--color-ondanger: #fff;

	--color-gray-0: #eee;
	--color-gray-1: #ddd;
	--color-gray-2: #bbb;
	--color-gray-3: #999;
	--color-gray-4: #777;
	--color-gray-5: #555;
	--color-gray-6: #333;

	--background-ambient: #f8f8f8;
	--background-muted: #ddd;

	--box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

	--avatar-size: 1.2rem;
	--drawer-width: 250px;
	--navbar-height: 4rem;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	--scrollbarBG: transparent;
	--thumbBG: #ddd;

	text-rendering: optimizeLegibility;

	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

::-webkit-scrollbar {
	width: 11px;
}

::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}

::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 6px;
}

:root {
  --color-primary: #2196f3;
  --color-onprimary: #fff;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Mukta', sans-serif;
  background: #f0f0f0;
  color: #333;
  height: 100%;
  overflow: auto;
}

#root {
  height: 100%;
}