@tailwind base;

html,
body {
	@apply antialiased;
	@apply text-black;
}

@tailwind components;

details.hide-summary-arrow summary::-webkit-details-marker {
	display: none;
}

.from-markdown {
	@apply text-gray-900;
	@apply leading-relaxed;

	> * + * {
		@apply mt-6;
	}

	> :first-child {
		margin-top: 0;
	}

	ul,
	ol {
		@apply pl-10;
	}

	ul {
		@apply list-disc;
	}

	ol {
		@apply list-decimal;
	}

	li > * + * {
		@apply mt-4;
	}

	> ul > * + *,
	> ol > * + * {
		@apply mt-4;
	}

	> blockquote {
		@apply px-4 py-3 text-sm font-medium text-gray-900 border border-gray-400 rounded-md bg-gray-50;
	}

	> h1 {
		@apply text-4xl;
		@apply mt-16;
		@apply mb-4;
		@apply leading-none;
		@apply font-bold;
	}

	> h2 {
		@apply mt-16;
		@apply mb-4;
		@apply leading-none;
		@apply font-bold;
		@apply text-3xl;
	}

	> h3 {
		@apply mt-16;
		@apply mb-4;
		@apply leading-none;
		@apply font-bold;
		@apply text-2xl;
	}

	> a,
	> p a,
	> ul li a,
	> ol li a {
		@apply border-b border-gray-800;
		&:hover {
			@apply text-gray-700;
		}
	}

	tr > td,
	tr > th {
		@apply px-4 py-2 border border-gray-400;
	}

	th:empty {
		display: none;
	}

	.screenshot {
		@apply border border-gray-400 rounded-md;
	}
}

@tailwind utilities;

.blur-none {
	filter: blur(0rem);
}

.blur-sm {
	filter: blur(1rem);
}

.blur-md {
	filter: blur(1.5rem);
}

.blur-lg {
	filter: blur(2rem);
}