@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');

html, body {
	background-color: var(--ctp-macchiato-base);
	color: var(--ctp-macchiato-text);
	font-family: Miracode, 'Courier New', Courier, monospace;
	display: flex;
	justify-content: center;
}

#container {
	background-color: var(--ctp-macchiato-crust);
	border-radius: 12px;
	padding: 18px 12px 32px 12px;
	width: 50vw;
	min-height: fit-content;
	overflow-y: scroll;
}

#container > div {
	border: 1px solid var(--ctp-macchiato-pink);
	border-radius: 4px;
	padding: 12px;
}

.input-containers {
	width: 50%;
	display: flex;
	gap: 16px;
}

a {
	color: var(--ctp-macchiato-blue);
}

input, select, button {
	background-color: var(--ctp-macchiato-crust);
	border: 1px solid var(--ctp-macchiato-pink);
	color: var(--ctp-macchiato-text);
	font-family: Miracode, 'Courier New', Courier, monospace;
	width: 30%;
	height: 40px;
	border-radius: 4px;
}

#facets {
	flex-grow: 1;
}

input::placeholder {
	color: var(--ctp-macchiato-subtext1);
}

input[type='button']:hover, select, button:hover {
	background-color: var(--ctp-macchiato-pink);
	color: var(--ctp-macchiato-base);
	cursor: pointer;
}

#history > li {
	color: var(--ctp-macchiato-blue);
	list-style:inside;
}

#history > li:hover {
	cursor: pointer;
	text-decoration: underline;
}

#filters > ul > li:hover {
	cursor: pointer;
	color: var(--ctp-macchiato-red);
}

#filters > ul > li:hover::after {
	content: '  x';
}