import plugin from 'tailwindcss/plugin';

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		// colors: {
		// 	white: '#FFFFFF',
		// 	transparentblue: '#2447f779',
		// 	blue: '#2446f7',
		// 	black: '#000000',
		// 	transparentblack1: '#000000BB',
		// 	transparentblack0: '#00000011',
		// 	darkblue: '#091856',
		// 	navyblue: '#0f2898',
		// 	gray: '#e2e2e2',
		// 	lightblue: '#0092ff',
		// 	transparent: 'transparent'
		// },
		extend: {
			fontFamily: {
				sans: ['Lineyka', 'sans-serif'],
				disket: ['Disket Mono', 'monospace'],
			},
			// height: {
			// 	// 64 px for navbar
			// 	screen: 'calc(100vh - 64px)'
			// },
			// dropShadow: {
			// 	md: '0px 0px 2px #091856',
			// 	hover: '0px 6px 2px #091856'
			// },
			// backgroundImage: {
			// 	pixel: "url('/common/pixel-overlay.png')",
			// 	'pixel-dark': "url('/common/pixel-overlay-dark.png')",
			// 	'pixel-white': "url('/common/pixel-overlay-white.png')",
			// 	'pixel-large': "url('/common/pixel-overlay-large.png')"
			// },
			// backgroundSize: {
			// 	pixel: '7px',
			// 	'pixel-lg': '14px'
			// },
			typography: {
				DEFAULT: {
					css: {
						maxWidth: '100%'
					}
				}
			}
		}
	},
	plugins: [
		require('@tailwindcss/typography')
	]
};