index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/Poppins/Poppins-Regular.ttf);
}

@font-face {
	font-family: 'Poppins';
	font-style: bold;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/Poppins/Poppins-Bold.ttf);
}

@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/Amiri/Amiri-Regular.ttf);
}

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

/**
 * Make sure the app fills the height of the screen.
 */
body {
	height: 100dvh;
	box-sizing: border-box;
}

/**
 * Keep 1 rem as 16px for better Tailwind integration.
 */
html {
	font-size: 16px;
}

body {
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		avenir next,
		avenir,
		segoe ui,
		helvetica neue,
		helvetica,
		Ubuntu,
		roboto,
		noto,
		arial,
		sans-serif;
	font-size: 1.8rem;
	line-height: 1.4;
	margin: 0;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

code {
	border-radius: 4px;
	display: inline-block;
	font-family:
		Menlo,
		Consolas,
		Monaco,
		Liberation Mono,
		Lucida Console,
		monospace;
	font-size: 0.9em;
	padding: 0.15em 0.15em;
}