* {
	box-sizing: border-box;
	user-select: none;
}

:root {
	--header-height: calc(38pt + 1.5px);
	--window-padding: 11pt;
	--content-padding: 10px;
	--sidebar-width: 220px;

	/* Colors */
	color-scheme: light dark;
	--accent-color: #0059d0af;
	--accent-color-dark: #fff2;
	--accent-color-sidebar: #5c9cec;
	--accent-color-sidebar-dark: #145cac;

	/* Set the colors for light mode by default */
	--main-background-color: rgb(255, 255, 255);
	--main-background-color-transparency: rgba(255, 255, 255, 0.63);
	--header-blur-color: rgb(246 246 246);
	--header-blur-color-transparency: rgba(246 246 246 / 30%);
}

@media (prefers-color-scheme: light) {
	.hide-in-light {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-background-color: rgb(28, 28, 30);
		--main-background-color-transparency: rgb(28, 28, 30, 0.63);
		--header-blur-color: rgb(0 0 0);
		--header-blur-color-transparency: rgba(0 0 0 / 30%);
	}

	.hide-in-dark {
		display: none;
	}
}

body {
	margin: auto;
	background-color: Canvas;
	background-color: transparent;
	font-size: 10pt;
	line-height: 1.5;
}

body,
button,
input {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.hide {
	display: none;
}

.show {
	display: block;
}

.active {
	background-color: var(--accent-color);
}