tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700&display=swap");

:root {
	color-scheme: dark;
}

html {
	@apply scroll-smooth;

	&,
	& > body {
		@apply min-h-screen;
	}

	&.light {
		&,
		& > body {
			@apply bg-white;
		}
	}

	@media (prefers-color-scheme: light) {
		&,
		& > body {
			@apply bg-white;
		}
	}

	& > body {
		@apply flex flex-col overflow-x-hidden text-neutral-100;

		& * {
			@apply transition-all;

			&::selection {
				@apply bg-amber-300 text-neutral-900;
			}
		}

		& h1,
		& h2,
		& h3,
		& h4,
		& h5,
		& h6,
		& p,
		& span {
			& a {
				@apply text-cyan-500 underline;

				&:hover {
					@apply no-underline;
				}
			}
		}

		& h1 {
			@apply text-5xl;
		}

		& h2 {
			@apply text-4xl;
		}

		& h3 {
			@apply text-3xl;
		}

		& h4 {
			@apply text-2xl;
		}

		& h5 {
			@apply text-xl;
		}

		& h6 {
			@apply text-lg;
		}

		& .markdown {
			& h1,
			& h2,
			& h3,
			& h4,
			& h5,
			& h6 {
				@apply mt-8;
			}

			& p {
				@apply mt-4 mb-4 first:mt-0 last:mb-0;
			}

			& a {
				@apply text-cyan-500 underline;

				&:hover {
					@apply no-underline;
				}
			}

			& ul {
				@apply list-disc pl-6 flex flex-col gap-2 mt-2 mb-2;
			}

			& ol {
				@apply list-decimal pl-6 flex flex-col gap-2 mt-2 mb-2;
			}

			& code {
				@apply bg-neutral-500 px-1 py-0.5 rounded text-sm break-words;
			}

			& pre {
				@apply p-4 rounded text-sm relative mb-4 last:mb-0;

				& > code {
					@apply bg-transparent px-0 py-0;
				}
			}

			& blockquote {
				quotes: "\201C""\201D";
				@apply bg-black/25 p-4 rounded relative mb-4;

				&:before {
					content: open-quote;
					@apply text-6xl absolute -left-3 -top-3;
				}

				&:after {
					content: close-quote;
					@apply text-6xl leading-[0] absolute -right-3 -bottom-3;
				}
			}

			& table {
				@apply border-separate border-spacing-0 mt-4;
				border-spacing: 0px;

				& > thead {
					@apply bg-neutral-700;
				}

				& > thead,
				& > tbody {
					& > tr {
						& > th {
							@apply border-t;
						}

						& > th,
						& > td {
							@apply border-b border-r border-neutral-500 p-4 first:border-l;
						}

						&:first-child {
							& > th {
								&:first-child {
									@apply rounded-tl;
								}

								&:last-child {
									@apply rounded-tr;
								}
							}
						}

						&:last-child {
							& > td {
								&:first-child {
									@apply rounded-bl;
								}

								&:last-child {
									@apply rounded-br;
								}
							}
						}
					}
				}
			}
		}

		& .button {
			background-position: 0% 100%;
			background-size: 400% 100%;
	
			&:hover {
				background-position: 100% 100%;
			}
		}
	}
}


@layer base {

}

@layer components {
	
}

@layer utilities {

}