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

pre {
	background-color: rgb(242, 242, 242);
	white-space: pre-wrap;
	width: 100%;
}

@layer base {
	html {
		-webkit-text-size-adjust: 100%;
		font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
		line-height: 1.5;
		-moz-tab-size: 4;
		tab-size: 4;
	}

	/* Do not change these. Changing this affect components as well */
	main p {
		@apply text-gray-900 dark:text-white;
	}
  
  .related-components,
	.references {
		@apply w-full flex flex-wrap;
	}

	.related-components p,
	.references p {
		@apply w-full md:w-1/2 lg:w-1/3;
	}

	main p>code,
	main ul>li>code,
	main ol>li>code {
		@apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400 whitespace-nowrap;
	}
}