@import 'tailwindcss';
@plugin '@tailwindcss/typography';

/* use the fonts in /static/fonts */

@layer base {
	@font-face {
		font-family: 'PhantomSans';
		src: url('/fonts/PhantomSans_Regular.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'PhantomSans';
		src: url('/fonts/PhantomSans_Bold.woff') format('woff');
		font-weight: bold;
		font-style: normal;
	}

	html,
	body {
		font-family: 'PhantomSans', sans-serif;
		scrollbar-width: thin;
		scrollbar-color: black transparent;
	}

	body::-webkit-scrollbar {
		width: 12px;
	}
	body::-webkit-scrollbar-track {
		background: transparent;
	}
	body::-webkit-scrollbar-thumb {
		background-color: black;
		border-radius: 9999px;
		border: 4px solid transparent;
		border-right-width: 8px;
		background-clip: padding-box;
	}
}
