@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

:root {
	/* https://github.com/catppuccin/catppuccin?tab=readme-ov-file#-palette */
	--red: #f38ba8;
	--text: #cdd6f4;
	--subtext1: #bac2de;
	--subtext0: #a6adc8;
	--overlay2: #9399b2;
	--overlay0: #6c7086;
	--surface1: #45475a;
	--surface0: #313244;
	--base: #1e1e2e;
	--mantle: #181825;
	--crust: #11111b;

	height: 100%;
	color: var(--text);
	user-select: none;
	scrollbar-color: var(--surface1) var(--surface0);
	scrollbar-width: thin;
}

:root,
button,
input,
select,
textarea {
	font-family: "Courier New", Courier, monospace;
}

body {
	margin: 0px;
	height: 100%;
	background-color: var(--mantle);
}

button,
input,
select,
textarea {
	padding: 5px;
	border-width: 0px;
	color: var(--text);
	background-color: var(--base);
	transition: color 100ms ease-out, background-color 100ms ease-in;
}

button:hover,
input:hover,
select:hover {
	background-color: var(--surface0);
}

button:disabled,
input:disabled,
select:disabled {
	color: var(--overlay0);
	background-color: inherit;
}

input:focus,
select:focus,
textarea:focus {
	outline-width: 0px;
}

input,
progress {
	accent-color: var(--accent-color);
}

button > span {
	vertical-align: middle;
}

button.negative * {
	vertical-align: middle;
}

button.negative:hover {
	background-color: var(--red);
}

button.negative:hover * {
	color: var(--crust);
}