/* 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;
  touch-action: manipulation;
}

[onclick],
.can,
.clickable,
button,
a {
  touch-action: manipulation;
}

.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);
}