app.css

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	body {
		@apply text-zinc-800;
	}

	.prose {
		@apply text-zinc-800 text-justify;
	}

	.prose p {
		@apply text-sm text-zinc-500 font-normal;
	}

	.prose ul {
		@apply text-zinc-500 flex flex-col gap-2 my-5;
	}

	.prose ol {
		@apply text-zinc-500 flex flex-col gap-2 my-5;
	}

	.prose li {
		@apply my-0;
	}

	.prose a {
		@apply text-sm text-indigo-500 font-semibold;
	}

	p {
		@apply text-sm text-zinc-500 font-normal;
	}

	@media only screen and (min-width: 640px) {
		.prose h1 {
			@apply text-3xl font-bold my-5;
		}

		.prose h2 {
			@apply text-2xl font-bold my-5;
		}

		.prose h3 {
			@apply text-xl font-bold my-5;
		}

		.prose h4 {
			@apply text-lg font-bold my-5;
		}

		.prose h5 {
			@apply text-base font-semibold my-2;
		}

		.prose h6 {
			@apply text-sm font-semibold my-2;
		}

		h1 {
			@apply text-3xl font-bold;
		}

		h2 {
			@apply text-2xl font-bold;
		}

		h3 {
			@apply text-xl font-bold;
		}

		h4 {
			@apply text-lg font-bold;
		}

		h5 {
			@apply text-base font-semibold;
		}

		h6 {
			@apply text-sm font-semibold;
		}
	}

	@media only screen and (max-width: 640px) {
		.prose h1 {
			@apply text-2xl font-bold my-5;
		}

		.prose h2 {
			@apply text-xl font-bold my-5;
		}

		.prose h3 {
			@apply text-lg font-bold my-5;
		}

		.prose h4 {
			@apply text-base font-bold my-5;
		}

		.prose h5 {
			@apply text-sm font-semibold my-2;
		}

		.prose h6 {
			@apply text-xs font-semibold my-2;
		}

		h1 {
			@apply text-2xl font-bold;
		}

		h2 {
			@apply text-xl font-bold;
		}

		h3 {
			@apply text-lg font-bold;
		}

		h4 {
			@apply text-base font-bold;
		}

		h5 {
			@apply text-sm font-semibold;
		}

		h6 {
			@apply text-xs font-semibold;
		}
	}
}

@layer components {
	.wiggle {
		animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		perspective: 1000px;
	}

	@keyframes shake {
		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}

		20%,
		80% {
			transform: translate3d(2px, 0, 0);
		}

		30%,
		50%,
		70% {
			transform: translate3d(-4px, 0, 0);
		}

		40%,
		60% {
			transform: translate3d(4px, 0, 0);
		}
	}
}