AntimaterCalculator.css

:root {
  --color: #d9d9d9;
  --background: #1d1b22;
  --foreground: #121212;

  --companion-color: #ff99cc;
  --power-color: #22aa48;
  --infinity-color: #b67f33;
  --replication-color: #03a9f4;
  --time-color: #b241e3;
  --dilation-color: #64dd17;
  --effarig-color: #d13737;
  --cursed-color: #ff0000;
  --reality-color: #0ba00e;

  --common-color: #ffffff;
  --uncommon-color: #43a047;
  --rare-color: #0099ff;
  --epic-color: #990099;
  --legendary-color: #ff9900;
  --mythical-color: #d50000;
  --transcendent-color: #00bdad;
  --celestial-color: #5151ec;
}
html {
  background-color: var(--background);
  font-family: Typewriter, 'Inconsolata', monospace;
}
html, a, button, input, select {
  color: var(--color);
}
h2 {
  margin: 0;
}
input, select {
  background-color: transparent;
  border: 2px solid var(--color);
  margin: 8px;
}
.CalculatorTextDescription {
  font-style: italic;
}
.CalculatorBoxArea {
  border: 4px solid var(--color);
  margin: 20;
  padding: 20;
}
.CalculatorSubArea {
  display: inline-block;
}
.CalculatorResultGlyphBox {
  display: inline-block;
  border-radius: 0.5rem;
  vertical-align: top;
  background-color: var(--foreground);
  text-align: center;
  box-shadow: 2px 2px;
  padding: 20;
}
.green {
  display: inline-block;
  color: var(--dilation-color);
}