:root {
	--nav-height: 50px;
	--control-height: 36px;

	--color-bg: #1E201E;
	--color-bg-2: #2a2c2a;
	--color-bg-slate: #131413;

	--color-primary: #f8fce6;
	--color-secondary: #A2A2A2;

	--color-accent: #8A4FFF;
	--color-anti-accent: white;
	--color-accent-weak: #3c354a;

	--color-shade: #545747;
	--color-subtle: #2d2e2b;
	/* translucent hover wash for buttons, works over any background */
	--color-hover: color-mix(in srgb, var(--color-primary) 10%, transparent);

	--color-link: #aa83fc;
	--color-success: #80ff80;
	--color-warn: #ffcc80;
	--color-error: #ff8080;
	--color-info: #50a0f0;

	--color-chip-tag: #f0a050;
	--color-chip-cast: #50a0f0;
	--color-chip-collection: #2f855a;
}

html {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;

	--gap-tiny: 4px;
	--gap-small: 8px;
	--gap-medium: 16px;
	--gap-large: 32px;
	--gap-huge: 64px;

	--border-radius: 8px;

	background-color: var(--color-bg);
	color: var(--color-primary);
}

/* Hide scrollbars globally for Chrome, Safari and Opera */
::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}

/* For Firefox - hide scrollbars */
html {
	scrollbar-width: none;
}

media-player::-webkit-scrollbar,
media-player *::-webkit-scrollbar,
video::-webkit-scrollbar {
	display: none !important;
}

pre {
	white-space: pre-wrap;
	font-family: inherit;
}

a {
	color: var(--color-link);
}

textarea {
	font-size: 0.9rem;
	box-sizing: border-box;
	color: var(--color-primary);
	background-color: var(--color-bg);
	border-color: var(--color-shade);
}

textarea:focus {
	outline: none;
	border-color: var(--color-accent);
}

i, button {
	color: var(--color-primary);
}

::selection {
	background: var(--color-accent-weak);
}

hr {
	color: var(--color-subtle);
	width: 100%;
}

.muted {
	color: var(--color-secondary);
}

.squash {
	padding-left: var(--gap-small);
	padding-right: var(--gap-small);
}

.media-area {
	max-height: var(--viewer-height);
	width: 100%;
	background-color: black;
}