:root {
	--white: #fff;
	--black: #000;

	--theme-color: #5cc9ff;
	--theme-color-light: #b8e7ff;
	--theme-color-dark: #0071a9;
	--sub-theme-color: #00abff;
	--theme-color-trans: #5cc9ff77;

	--success-color: green;
	--warning-color: orange;
	--error-color: red;

	--svg-color: var(--color);
}



:root {
	--color: #333;
	--bg-color: #fff;
	--bd-color: #ccc;

	--sub-color: #777;
	--sub-bg-color: #eee;

	--github-color: #1b1817;
	--notion-color: #fff;
/* } @media (prefers-color-scheme: dark) { */
} :root[darkmode="true"] {
	--color: #ddd;
	--bg-color: #232323;
	--bd-color: #444;

	--sub-bg-color: #333;

	--github-color: #fff;
}



:root {
	--width: 1100px;

	--header-height: 3rem;
	--sidebar-width: 250px;
	--footer-height: 5rem;

	--header-zIndex: 500;
	--msgbox-zIndex: 99999;

	--gap-2: calc(var(--gap) / 2);
	--gap: 1rem;
	--gap2: calc(var(--gap) * 2);
} @media (min-width: 768px) {
	:root {
		--nav-zIndex: 600;
	}
}