@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap');

:root {
	--ff-regular: "Manrope", sans-serif;
	--ff-code: "Red Hat Mono", monospace;
	--clr-black: hsl(0, 0%, 0%);
	--clr-white: hsl(0, 0%, 100%);
	--clr-white-40: hsla(0, 0%, 100%, 0.4);
	--clr-purple: hsl(258, 100%, 97%);
	--clr-purple-50: hsla(257, 72%, 77%, 0.5);
	--clr-purple-90: hsl(260, 82%, 77%);

	--br-big: 12px;
	--br-med: 6px;
	--br-sm: 3px;
}

*:not(:is(ul, ol)),
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--ff-regular);
	color: var(--clr-black);
}

code {
	font-family: var(--ff-code);
}

.grab-cursor {
	cursor: -webkit-grab;
	cursor: grab;
}

.grab-cursor:active {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

input {
	accent-color: var(--clr-purple-90);
}

input[type='range'] {
	min-width: 300px;
}

select,
button {
	font-family: inherit;
}

button {
	cursor: pointer;
}