@import "code.css";
@import "elemence.css";

@layer base {
/* >> base */
	:root {
		--color-bg-2: #1A1A1A;
	}

	.light-mode {
		--color-bg-2: lavender;
	}


/* >> toc */
	#toc {
		width: 40%;
		margin-left: 20px;
		float: right;
		background-color: var(--color-bg);

		summary + div {
			margin-top: 12px;
		}
	}

	.toc-list {
		all: revert;
		margin: 4px auto 8px;

		li:hover::marker {
			color: unset;
		}

		ul& {
			margin-left: -16px;

			li::marker {
				content: "-";
				font-size: inherit;
			}
		}

		ol& {
			margin-left: -12px;

			> li {
				display: revert;
				padding-left: revert;
				text-indent: revert;
			}
		}
	}

	blockquote {
		display: flow-root;

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

		p:last-child {
			margin-bottom: 0;
		}
	}
}


/* >> mobile layout */
@media only screen and (max-width: 800px) {
	#toc {
		width: auto;
		float: none;
	}
}