:root {
	--error-rgb: 225, 72, 72;
	--notice-rgb: 71, 158, 225;
	--success-rgb: 71, 225, 81;
	--warning-rgb: 223, 147, 33;
	--gold-rgb: 223, 188, 33;

	--mix-cl-rgb: 0, 0, 0;

	--text-50-rgb: 10, 15, 15;
	--text-100-rgb: 20, 29, 31;
	--text-200-rgb: 40, 58, 62;
	--text-300-rgb: 60, 87, 93;
	--text-400-rgb: 81, 116, 123;
	--text-500-rgb: 101, 145, 154;
	--text-600-rgb: 132, 167, 174;
	--text-700-rgb: 162, 189, 195;
	--text-800-rgb: 193, 211, 215;
	--text-900-rgb: 224, 233, 235;
	--text-950-rgb: 240, 244, 245;

	--background-50-rgb: 13, 13, 13;
	--background-100-rgb: 26, 26, 26;
	--background-200-rgb: 51, 51, 51;
	--background-300-rgb: 77, 77, 77;
	--background-400-rgb: 102, 102, 102;
	--background-500-rgb: 128, 128, 128;
	--background-600-rgb: 153, 153, 153;
	--background-700-rgb: 179, 179, 179;
	--background-800-rgb: 204, 204, 204;
	--background-900-rgb: 230, 230, 230;
	--background-950-rgb: 242, 242, 242;

	--primary-50-rgb: 7, 15, 18;
	--primary-100-rgb: 15, 30, 36;
	--primary-200-rgb: 30, 61, 72;
	--primary-300-rgb: 44, 91, 109;
	--primary-400-rgb: 59, 122, 145;
	--primary-500-rgb: 74, 152, 181;
	--primary-600-rgb: 110, 173, 196;
	--primary-700-rgb: 146, 193, 211;
	--primary-800-rgb: 183, 214, 225;
	--primary-900-rgb: 219, 234, 240;
	--primary-950-rgb: 237, 245, 248;

	--secondary-50-rgb: 6, 16, 19;
	--secondary-100-rgb: 12, 32, 39;
	--secondary-200-rgb: 25, 63, 77;
	--secondary-300-rgb: 37, 95, 116;
	--secondary-400-rgb: 50, 126, 154;
	--secondary-500-rgb: 62, 158, 193;
	--secondary-600-rgb: 101, 177, 205;
	--secondary-700-rgb: 139, 197, 218;
	--secondary-800-rgb: 178, 216, 230;
	--secondary-900-rgb: 216, 236, 243;
	--secondary-950-rgb: 236, 245, 249;

	--accent-50-rgb: 5, 16, 20;
	--accent-100-rgb: 10, 33, 41;
	--accent-200-rgb: 20, 65, 82;
	--accent-300-rgb: 31, 98, 122;
	--accent-400-rgb: 41, 131, 163;
	--accent-500-rgb: 51, 163, 204;
	--accent-600-rgb: 92, 182, 214;
	--accent-700-rgb: 133, 200, 224;
	--accent-800-rgb: 173, 218, 235;
	--accent-900-rgb: 214, 237, 245;
	--accent-950-rgb: 235, 246, 250;
}

form {
	background-color: transparent;
	backdrop-filter: blur(5px);
}

.button, input::file-selector-button {background-color: rgb(var(--background-500-rgb), 0.25); backdrop-filter: blur(5px)}

.button.green {background-color: rgba(var(--success-rgb), 0.25)}
.button.red {background-color: rgba(var(--error-rgb), 0.25)}
.button.yellow {background-color: rgba(var(--warning-rgb), 0.25)}
.button.blue, input::file-selector-button {background-color: rgba(var(--notice-rgb), 0.25)}

.top-bar {background-color: rgba(var(--background-50-rgb), 0.5); backdrop-filter: blur(5px); border-bottom: var(--background-50);}

.top-bar.green {background-color: rgba(var(--success-rgb), 0.5); border-bottom: 1px solid var(--success-rgb)}
.top-bar.red {background-color: rgba(var(--error-rgb), 0.5); border-bottom: 1px solid var(--error)}
.top-bar.blue {background-color: rgba(var(--notice-rgb), 0.5); border-bottom: 1px solid var(--notice)}
.top-bar.yellow {background-color: rgba(var(--warning-rgb), 0.5); border-bottom: 1px solid var(--warning)}

.messagebox {background-color: rgb(var(--background-500-rgb), 0.25); backdrop-filter: blur(5px)}

.messagebox.green {background-color: rgba(var(--success-rgb), 0.25)}
.messagebox.red {background-color: rgba(var(--error-rgb), 0.25)}
.messagebox.yellow {background-color: rgba(var(--warning-rgb), 0.25)}
.messagebox.blue {background-color: rgba(var(--notice-rgb), 0.25)}