/**
 * This is a minimal config.
 *
 * If you need the full config, get it from here:
 * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
 */

module.exports = {
	content: [
		/**
		 * HTML. Paths to Django template files that will contain Tailwind CSS classes.
		 */

		/*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
		"../templates/**/*.html",

		/*
		 * Main templates directory of the project (BASE_DIR/templates).
		 * Adjust the following line to match your project structure.
		 */
		"../../templates/**/*.html",

		/*
		 * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
		 * Adjust the following line to match your project structure.
		 */
		"../../**/templates/**/*.html",

		/**
		 * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
		 * patterns match your project structure.
		 */
		/* JS 1: Ignore any JavaScript in node_modules folder. */
		// '!../../**/node_modules',
		/* JS 2: Process all JavaScript files in the project. */
		// '../../**/*.js',

		/**
		 * Python: If you use Tailwind CSS classes in Python, uncomment the following line
		 * and make sure the pattern below matches your project structure.
		 */
		// '../../**/*.py'
	],
	theme: {
		container: {
			center: true,
			padding: {
				DEFAULT: "2rem",
				xl: "4rem",
			},
		},
		extend: {
			fontFamily: {
				nerd: ["DejaVuSansMono"],
				trunic: ["Trunic-Regular"],
			},
			colors: {
				bluelight: {
					light: "#378ec880",
					DEFAULT: "#317eb1",
					dark: "#006bb380",
					translucent: {
						light: "#317eb140",
						DEFAULT: "#317eb180",
						dark: "#2facff40",
					},
					background: {
						light: "#317eb1",
						DEFAULT: "#26638c",
						dark: "#1b4764",
					},
					link: "hsl(203.91, 56.64%, 75%)",
				},
				"trans-pride": {
					cyan: {
						DEFAULT: "#5adefc",
						translucent: "#5adefc69",
					},
					white: {
						DEFAULT: "#eeeeeeff",
						translucent: "#eeeeee69",
					},
					pink: {
						DEFAULT: "#ff8cda",
						translucent: "#ff8cda69",
					},
				},
				highlight: {
					checks: {
						text: "hsl(210, 92.86%, 90%)",
						light: "hsla(293.9,72.3%,45%,1)",
						DEFAULT: "#A431B1",
						dark: "hsla(293.9,72.3%,30%,1)",
					},
					entrances: {
						text: "hsla(41.86,95.56%,90%,1)",
						light: "hsla(23.9,85%,40%,1)",
						DEFAULT: "#B16431",
						dark: "hsla(23.9,85%,25%,1)",
					},
					both: {
						text: "hsla(116.4,75.76%,90%,1)",
						light: "hsla(113.9,72.3%,40%,1)",
						DEFAULT: "#3EB131",
						dark: "hsla(113.9,72.3%,25%,1)",
					},
					undiscovered: {
						text: "hsla(0,0%,96%,1)",
						light: "hsla(0,0%,45%,1)",
						dark: "hsla(0,0%,20%,1)",
					},
					empty: {
						text: "hsla(0,100%,100%,1)",
						light: "hsla(0,100%,100%,0.05)",
						dark: "hsla(0,100%,100%,0.17)",
					},
				},
				"holy-cross": {
					DEFAULT: "fffae0",
				},
			},
			keyframes: {
				shake: {
					"2%": { transform: "translate(-0.5px, 2.5px) " },
					"2%": { transform: "rotate(-0.5deg)" },
					"4%": { transform: "translate(0.5px, -1.5px) " },
					"4%": { transform: "rotate(-0.5deg)" },
					"6%": { transform: "translate(1.5px, -1.5px) " },
					"6%": { transform: "rotate(1.5deg)" },
					"8%": { transform: "translate(0.5px, 2.5px) " },
					"8%": { transform: "rotate(-0.5deg)" },
					"10%": { transform: "translate(-1.5px, 2.5px) " },
					"10%": { transform: "rotate(1.5deg)" },
					"12%": { transform: "translate(2.5px, -0.5px) " },
					"12%": { transform: "rotate(-0.5deg)" },
					"14%": { transform: "translate(2.5px, 2.5px) " },
					"14%": { transform: "rotate(1.5deg)" },
					"16%": { transform: "translate(1.5px, 1.5px) " },
					"16%": { transform: "rotate(0.5deg)" },
					"18%": { transform: "translate(0.5px, 2.5px) " },
					"18%": { transform: "rotate(1.5deg)" },
					"20%": { transform: "translate(1.5px, -1.5px) " },
					"20%": { transform: "rotate(-0.5deg)" },
					"22%": { transform: "translate(0.5px, 1.5px) " },
					"22%": { transform: "rotate(1.5deg)" },
					"24%": { transform: "translate(-0.5px, 1.5px) " },
					"24%": { transform: "rotate(0.5deg)" },
					"26%": { transform: "translate(-1.5px, -1.5px) " },
					"26%": { transform: "rotate(0.5deg)" },
					"28%": { transform: "translate(1.5px, 2.5px) " },
					"28%": { transform: "rotate(1.5deg)" },
					"30%": { transform: "translate(2.5px, -1.5px) " },
					"30%": { transform: "rotate(1.5deg)" },
					"32%": { transform: "translate(1.5px, 1.5px) " },
					"32%": { transform: "rotate(1.5deg)" },
					"34%": { transform: "translate(2.5px, 0.5px) " },
					"34%": { transform: "rotate(-0.5deg)" },
					"36%": { transform: "translate(2.5px, -0.5px) " },
					"36%": { transform: "rotate(-0.5deg)" },
					"38%": { transform: "translate(0.5px, 0.5px) " },
					"38%": { transform: "rotate(0.5deg)" },
					"40%": { transform: "translate(1.5px, -1.5px) " },
					"40%": { transform: "rotate(1.5deg)" },
					"42%": { transform: "translate(0.5px, -0.5px) " },
					"42%": { transform: "rotate(0.5deg)" },
					"44%": { transform: "translate(-0.5px, -0.5px) " },
					"44%": { transform: "rotate(-0.5deg)" },
					"46%": { transform: "translate(1.5px, 2.5px) " },
					"46%": { transform: "rotate(-0.5deg)" },
					"48%": { transform: "translate(2.5px, 2.5px) " },
					"48%": { transform: "rotate(1.5deg)" },
					"50%": { transform: "translate(0.5px, 2.5px) " },
					"50%": { transform: "rotate(1.5deg)" },
					"52%": { transform: "translate(1.5px, -1.5px) " },
					"52%": { transform: "rotate(1.5deg)" },
					"54%": { transform: "translate(0.5px, 0.5px) " },
					"54%": { transform: "rotate(1.5deg)" },
					"56%": { transform: "translate(1.5px, 1.5px) " },
					"56%": { transform: "rotate(0.5deg)" },
					"58%": { transform: "translate(0.5px, 0.5px) " },
					"58%": { transform: "rotate(1.5deg)" },
					"60%": { transform: "translate(-0.5px, 0.5px) " },
					"60%": { transform: "rotate(-0.5deg)" },
					"62%": { transform: "translate(2.5px, -1.5px) " },
					"62%": { transform: "rotate(1.5deg)" },
					"64%": { transform: "translate(2.5px, -0.5px) " },
					"64%": { transform: "rotate(0.5deg)" },
					"66%": { transform: "translate(0.5px, 0.5px) " },
					"66%": { transform: "rotate(1.5deg)" },
					"68%": { transform: "translate(-1.5px, -0.5px) " },
					"68%": { transform: "rotate(0.5deg)" },
					"70%": { transform: "translate(2.5px, 0.5px) " },
					"70%": { transform: "rotate(-0.5deg)" },
					"72%": { transform: "translate(1.5px, 0.5px) " },
					"72%": { transform: "rotate(1.5deg)" },
					"74%": { transform: "translate(0.5px, 0.5px) " },
					"74%": { transform: "rotate(1.5deg)" },
					"76%": { transform: "translate(-1.5px, -0.5px) " },
					"76%": { transform: "rotate(0.5deg)" },
					"78%": { transform: "translate(-1.5px, -1.5px) " },
					"78%": { transform: "rotate(-0.5deg)" },
					"80%": { transform: "translate(-0.5px, -0.5px) " },
					"80%": { transform: "rotate(0.5deg)" },
					"82%": { transform: "translate(-0.5px, 1.5px) " },
					"82%": { transform: "rotate(1.5deg)" },
					"84%": { transform: "translate(-1.5px, 2.5px) " },
					"84%": { transform: "rotate(-0.5deg)" },
					"86%": { transform: "translate(-1.5px, -0.5px) " },
					"86%": { transform: "rotate(-0.5deg)" },
					"88%": { transform: "translate(2.5px, -0.5px) " },
					"88%": { transform: "rotate(-0.5deg)" },
					"90%": { transform: "translate(2.5px, -1.5px) " },
					"90%": { transform: "rotate(-0.5deg)" },
					"92%": { transform: "translate(2.5px, 0.5px) " },
					"92%": { transform: "rotate(-0.5deg)" },
					"94%": { transform: "translate(0.5px, 1.5px) " },
					"94%": { transform: "rotate(-0.5deg)" },
					"96%": { transform: "translate(1.5px, 2.5px) " },
					"96%": { transform: "rotate(0.5deg)" },
					"98%": { transform: "translate(2.5px, -0.5px) " },
					"98%": { transform: "rotate(1.5deg)" },
					"0%, 100%": { transform: "translate(0, 0) rotate(0)" },
				},
			},
		},
	},
	plugins: [
		/**
		 * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
		 * for forms. If you don't like it or have own styling for forms,
		 * comment the line below to disable '@tailwindcss/forms'.
		 */
		require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
		require("@tailwindcss/aspect-ratio"),
		require("tailwind-scrollbar"),
	],
};