/* Softer contrast for easier reading */
:root {
  --text-color: #222;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #e5e5e5;
  }
}

/* Table cell highlight colors */
.cell-success {
  background: rgba(34, 197, 94, 0.25);
}
.cell-fail {
  background: rgba(239, 68, 68, 0.25);
}
@media (prefers-color-scheme: dark) {
  .cell-success {
    background: rgba(34, 197, 94, 0.35);
  }
  .cell-fail {
    background: rgba(239, 68, 68, 0.35);
  }
}

/* Override monospace-web uppercase headings */
h1, h2, h3, h4, h5, h6 {
  text-transform: none;
}

/* Bigger main title */
h1 {
  font-size: 2.5rem;
  line-height: calc(3 * var(--line-height));
}

/* Bigger blog post titles */
h2 {
  font-size: 1.5rem;
  line-height: calc(2 * var(--line-height));
}

/* Space between blog posts on the homepage */
article {
  margin-bottom: calc(var(--line-height) * 3);
}

/* Range slider styling to match diagram line color */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--text-color);
  border-radius: 2px;
  opacity: 0.4;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-color);
  margin-top: -6px;
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--text-color);
  border-radius: 2px;
  border: none;
  opacity: 0.4;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--text-color);
}