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

@layer base {
	@font-face {
		font-family: 'Minecraft';
		src: url('/fonts/MinecraftRegular.otf') format('opentype');
	}

	@font-face {
		font-family: 'Roboto';
		src: url('/fonts/Roboto-Regular.ttf') format('truetype');
		font-weight: normal;
	}

	@font-face {
		font-family: 'Roboto';
		src: url('/fonts/Roboto-Medium.ttf') format('truetype');
		font-weight: 500;
	}

	@font-face {
		font-family: 'Roboto';
		src: url('/fonts/Roboto-Bold.ttf') format('truetype');
		font-weight: bold;
	}

	@font-face {
		font-family: 'Roboto';
		src: url('/fonts/Roboto-Black.ttf') format('truetype');
		font-weight: 900;
	}

	html {
		@apply font-roboto scroll-smooth;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply font-minecraft;
	}
}

@layer components {
	.pixelated {
		image-rendering: pixelated;
	}

	.bg-horizontal-sprite {
		background-size: auto 100%;
	}
}