/* 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: "Lucida Console", "Courier New", monospace
}

/* 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 10px var(--points);
}



.ma:not(.locked):not(.bought) {
	background: radial-gradient(circle, rgba(255,100,100,1) 0%, rgba(255,159,127,1) 50%);
	background-size: 200%;
	background-position: center;
	animation: mastery 4s linear infinite;
}


.en:not(.locked):not(.bought) {
	background: radial-gradient(#eaff00, #d6ff30, #eaff00, #d6ff30);
	background-size: 100% 50%;
	text-shadow: 0px 0px 7px #556125;
	animation: energy 10s linear infinite;
}



@keyframes mastery {
	0% {
		background-size: 200%;
	}
	50% {
		background-size: 100%;
	}
	100% {
		background-size: 200%;
	}
}

@keyframes energy {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 0% 400%;
	}
}

@keyframes idea {
	0% {
		filter: brightness(100%);
	}
	25% {
		filter: brightness(125%);
	}
	75% {
		filter: brightness(75%);
	}
	100% {
		filter: brightness(100%);
	}
}