/* Local additions to Terminal.css. Keep the upstream stylesheet untouched. */

:root {
  color-scheme: light dark;
  --font-stack: 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', monospace;
  --mono-font-stack: 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', monospace;
  --background-color: light-dark(#f4f4f3, #1a1b1e);
  --font-color: light-dark(#35363a, #e4e5e7);
  --invert-font-color: light-dark(#f4f4f3, #1a1b1e);
  --primary-color: light-dark(#1e66f5, #89b4fa);
  --secondary-color: light-dark(#209fb5, #74c7ec);
  --tertiary-color: light-dark(#898c91, #747881);
  --error-color: light-dark(#d20f39, #f38ba8);
  --progress-bar-background: light-dark(#c9cbce, #36383d);
  --progress-bar-fill: light-dark(#1e66f5, #89b4fa);
  --code-bg-color: light-dark(#e9e9e7, #27282c);
  --block-background-color: light-dark(#ffffff, #27282c);
}

.components-grid {
  display: grid;
  gap: calc(var(--global-space) * 2);
  grid-template-columns: auto;
}

@media only screen and (min-width: 70em) {
  .components-grid {
    grid-template-columns: 3fr 5fr;
  }
}

aside .terminal-card {
  margin-bottom: calc(var(--global-space) * 2);
}

footer {
  margin-top: calc(var(--global-space) * 2);
}