:root {
	--color: hsl(0, 0%, 95%);
	--background: hsl(225, 40%, 4%);
	--background-secondary: hsl(225, 20%, 6%);
	--lighter-background: hsl(0, 0%, 30%);
	--font: Arial, sans-serif;
	--normal-font-size: 16px;
	--border-radius: 4px;
	--spacing: 16px;
	--primary: hsl(220, 50%, 40%);
	--primary-trans: hsla(220, 50%, 40%, 0.33);
	--danger: hsl(0, 75%, 35%);
	--danger-trans: hsla(0, 75%, 35%, 0.33);
	--warning: hsl(30, 70%, 40%);
	--warning-trans: hsla(30, 70%, 40%, 0.33);
	--success: hsl(150, 80%, 30%);
	--success-trans: hsla(150, 80%, 30%, 0.33);
	--tint: hsl(220, 50%, 20%);
	--tint-trans: hsla(220, 50%, 20%, 0.33);
	--h1-size: 26px;
	--h2-size: 24px;
	--h3-size: 22px;
	--h4-size: 20px;
	--h5-size: 18px;
	--h6-size: 16px;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	background-color: var(--background);
	color: var(--color);
	padding: 0;
	margin: 0;
}

.dialog {
	background-color: var(--background-secondary);
	border-radius: var(--border-radius);
	padding: var(--spacing);
	text-align: center;
	max-width: 250px;
	margin: var(--spacing);
}
.dialog h2 { margin: 0; }

#export {
	--theme-color: #2e2e2e;
	--border-radius: 0px;
	--spacing: 16px;
	--color: #fff;
	margin-top: 16px;
}

.w-100 { width: 100%; }

.btn {
	background-color: var(--theme-color);
	border-radius: var(--border-radius);
	padding: calc(var(--spacing) / 3) var(--spacing);
	color: var(--color);
	cursor: pointer;
	border: none;
}
.bold { font-weight: bold; }
.normal { font-size: var(--normal-font-size); }
.danger { --theme-color: var(--danger); }
.font { font-family: var(--font); }
.tint { --theme-color: var(--tint); }
.warning { --theme-color: var(--warning); }
.success { --theme-color: var(--success); }
.primary { --theme-color: var(--primary); }

.d-flex { display: flex; }

.h1, .h2, .h3, .h4, .h5, .h6 { margin: 0; }
.h1 { font-size: var(--h1-size); }
.h2 { font-size: var(--h2-size); }
.h3 { font-size: var(--h3-size); }
.h4 { font-size: var(--h4-size); }
.h5 { font-size: var(--h5-size); }
.h6 { font-size: var(--h6-size); }

input.input, textarea.input, select.input {
	padding: calc(var(--spacing) / 3) calc(var(--spacing) / 2);
	border: solid 1px var(--lighter-background);
	background-color: var(--background);
	border-radius: var(--border-radius);
	color: var(--color);
	outline: none;
}

.pt-1 { padding-top: var(--spacing); }
.mb-1 { margin-bottom: var(--spacing); }
.ms-1 { margin-left: var(--spacing); }

#controls {
	background-color: #111;
	position: absolute;
	padding: 10px 15px;
	color: #fff;
	height: 100%;
	width: 400px;
	right: 0;
	top: 0;
}

.ctrl_font { font-family: 'Courier New', Courier, monospace; }
.ctrl_h2 { font-size: 24px; margin: 0; }
.ctrl_lbl {
	display: block;
	font-family: 'Courier New', Courier, monospace;
}

#controls input {
	border-radius: 0px;
	font-size: 14px;
	outline: none;
	border: none;
}

.hsl > input:nth-child(1) { width: 60px; }
.hsl > input:nth-child(2) { width: 60px; }
.hsl > input:nth-child(3) { width: 60px; }
.hsl > div {
	transform: translateY(4px);
	display: inline-block;
	height: 19px;
	width: 19px;
}

.single-control input {
	width: 188px;
}

.pseudotoast {
	border-radius: var(--border-radius);
	border: solid 1px var(--theme-color);
	background-color: var(--theme-blend);
	padding: calc(var(--spacing) / 2) calc(var(--spacing));
}

#export_dialog {
	background-color: #000000bd;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}

#export_dialog_content {
	font-family: 'Courier New', Courier, monospace;
	background-color: #0f0e0e;
	border-radius: 4px;
	padding: 10px 15px;
	white-space: pre;
	overflow-y: auto;
	margin: auto;
	height: 80%;
	width: 80%;
}