@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Lexend+Deca:wght@100..900&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');/* Global things */
body {
	color: var(--color);
	overflow: hidden;
	--background: #0f0f0f;
	--color: #dfdfdf;
	--points: #ffffff;
	background: var(--background)
}

/* General text */
h1, h2, h3, b, input {
	display: inline;
	font-family: "Outfit"
}

/* These are styles for different states of components. You can make layer-specific versions with .c.locked, for example */
.locked {
	background-color: #bf8f8f;
	cursor: not-allowed;
}

/* Can meens can be clicked/bought/etc */
.can {
	cursor: pointer;
}

.can:hover {
	transform: scale(1.15, 1.15);
	box-shadow: 0 0 20px var(--points)
}

.bought {
	background-color: #77bf5f;
	cursor: default;
}

#points {
	color: var(--points);
	text-shadow: 0 0 1px var(--points);
}