@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@600&family=Quicksand&display=swap");
:root {
	--black0: #121212;
	--black1: #1a1a1a;
	--black2: #2c2c2c;
	--black3: #3d3d3d;
	--white0: #eee;
	--grey: #444;
	--accent: #61f2ea;
	--shadow0: 0 0 1rem rgba(0, 0, 0, 0.35);
	--shadow1: 0 0 8px var(--grey);
	--fonts-norm: "Quicksand", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	--fonts-bold: "Lexend", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	/*  */
	--backdrop: var(--black0);
	--color: var(--white0);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-color: var(--black0);
	color: var(--color);
	min-height: 100vh;
	font-family: var(--fonts-norm);
	overflow-y: overlay;
}
h1,
h2,
h3 {
	padding: 0.5rem 0;
	font-family: var(--fonts-bold);
}
main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}
a {
	color: rgb(251, 99, 107);
}
button {
	display: inline-block;
	font-size: 1rem;
	padding: 8px;
	margin: 0 8px;
	background: none;
	border: 1px solid var(--grey);
	// background: rgba(grey, 0.45);
	border-radius: 4px;
	color: var(--color);
	font-family: var(--fonts-bold);
	cursor: pointer;
	transition-duration: 100ms;
	&:hover {
		background: rgba(grey, 0.25);
		box-shadow: var(--shadow0);
		// color: black;
	}
}
input {
	display: inline-block;
	font-size: 1rem;
	padding: 4px;
	border-radius: 3px;
	background: rgba(white, 0.1);
	border: 0;
	color: white;
	outline: none;
	font-family: var(--fonts-norm);
}

.chips {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
}
.chip {
	display: inline-flex;
	text-decoration: none;
	gap: 0.5rem;
	align-items: center;
	color: inherit;
	padding: 6px 8px;
	border: 1px solid var(--grey);
	border-radius: 8px;
	transition-duration: 100ms;
	text-rendering: geometricPrecision;
	// font-family: var(--fonts-bold);
	// color: var(--grey);
	svg {
		color: var(--grey);
	}
	&:hover,
	&:focus {
		outline: none;
		background: var(--black1);
		border: 1px solid var(--black1);
		box-shadow: var(--shadow0);
		transform: scale(1.1);
		svg {
			color: var(--color);
		}
	}
}

::-webkit-scrollbar {
	background: transparent;
	width: 4px;
}
::-webkit-scrollbar-thumb {
	background: #999;
	border-radius: 1337px;
}