/* Dark mode colors. */
:root {
  --sl-color-accent-low: #131e4f;
  --sl-color-accent: #3447ff;
  --sl-color-accent-high: #b3c7ff;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #eceef2;
  --sl-color-gray-2: #c0c2c7;
  --sl-color-gray-3: #888b96;
  --sl-color-gray-4: #545861;
  --sl-color-gray-5: #353841;
  --sl-color-gray-6: #24272f;
  --sl-color-black: #17181c;
}

/* Light mode colors. */
:root[data-theme='light'] {
  --sl-color-accent-low: #c7d6ff;
  --sl-color-accent: #364bff;
  --sl-color-accent-high: #182775;
  --sl-color-white: #17181c;
  --sl-color-gray-1: #24272f;
  --sl-color-gray-2: #353841;
  --sl-color-gray-3: #545861;
  --sl-color-gray-4: #888b96;
  --sl-color-gray-5: #c0c2c7;
  --sl-color-gray-6: #eceef2;
  --sl-color-gray-7: #f5f6f8;
  --sl-color-black: #ffffff;
}

.main-pane img {
  max-width: 80%;
  width: auto;
  height: auto;
  display: block;
  image-rendering: auto;
  object-fit: contain;
}