/* Modus Vivendi Tinted Color Scheme */

:root {
  /* Base colors */
  --bg-main: #0d0e1c;
  --bg-dim: #1d2235;
  --fg-main: #ffffff;
  --fg-dim: #989898;
  --fg-alt: #c6daff;
  --bg-active: #4a4f69;
  --bg-inactive: #2b3045;
  --border: #61647a;

  /* Color palette */
  --red: #ff5f59;
  --red-warmer: #ff6b55;
  --red-cooler: #ff7f86;
  --red-faint: #ef8386;
  --red-intense: #ff5f5f;
  --green: #44bc44;
  --green-warmer: #75c13e;
  --green-cooler: #11c777;
  --green-faint: #88ca9f;
  --green-intense: #44df44;
  --yellow: #d0bc00;
  --yellow-warmer: #fec43f;
  --yellow-cooler: #dfaf7a;
  --yellow-faint: #d2b580;
  --yellow-intense: #efef00;
  --blue: #2fafff;
  --blue-warmer: #79a8ff;
  --blue-cooler: #00bcff;
  --blue-faint: #82b0ec;
  --blue-intense: #338fff;
  --magenta: #feacd0;
  --magenta-warmer: #f78fe7;
  --magenta-cooler: #b6a0ff;
  --magenta-faint: #caa6df;
  --magenta-intense: #ff66ff;
  --cyan: #00d3d0;
  --cyan-warmer: #4ae2f0;
  --cyan-cooler: #6ae4b9;
  --cyan-faint: #9ac8e0;
  --cyan-intense: #00eff0;

  /* Additional colors */
  --rust: #db7b5f;
  --gold: #c0965b;
  --olive: #9cbd6f;
  --slate: #76afbf;
  --indigo: #9099d9;
  --maroon: #cf7fa7;
  --pink: #d09dc0;

  /* Background variants */
  --bg-red-intense: #9d1f1f;
  --bg-green-intense: #2f822f;
  --bg-yellow-intense: #7a6100;
  --bg-blue-intense: #1640b0;
  --bg-magenta-intense: #7030af;
  --bg-cyan-intense: #2266ae;
  --bg-red-subtle: #620f2a;
  --bg-green-subtle: #00422a;
  --bg-yellow-subtle: #4a4000;
  --bg-blue-subtle: #242679;
  --bg-magenta-subtle: #552f5f;
  --bg-cyan-subtle: #004065;
  --bg-red-nuanced: #3a0c14;
  --bg-green-nuanced: #092f1f;
  --bg-yellow-nuanced: #381d0f;
  --bg-blue-nuanced: #12154a;
  --bg-magenta-nuanced: #2f0c3f;
  --bg-cyan-nuanced: #042837;

  /* Special backgrounds */
  --bg-clay: #49191a;
  --fg-clay: #f1b090;
  --bg-ochre: #462f20;
  --fg-ochre: #e0d09c;
  --bg-lavender: #38325c;
  --fg-lavender: #dfc0f0;
  --bg-sage: #143e32;
  --fg-sage: #c3e7d4;

  /* Graph colors */
  --bg-graph-red-0: #b52c2c;
  --bg-graph-red-1: #702020;
  --bg-graph-green-0: #0fed00;
  --bg-graph-green-1: #007800;
  --bg-graph-yellow-0: #f1e00a;
  --bg-graph-yellow-1: #b08940;
  --bg-graph-blue-0: #2fafef;
  --bg-graph-blue-1: #1f2f8f;
  --bg-graph-magenta-0: #bf94fe;
  --bg-graph-magenta-1: #5f509f;
  --bg-graph-cyan-0: #47dfea;
  --bg-graph-cyan-1: #00808f;

  /* UI elements */
  --bg-completion: #483d8a;
  --bg-hover: #45605e;
  --bg-hover-secondary: #64404f;
  --bg-hl-line: #303a6f;
  --bg-region: #555a66;
  --fg-region: #ffffff;
  --bg-mode-line-active: #484d67;
  --fg-mode-line-active: #ffffff;
  --border-mode-line-active: #979797;
  --bg-mode-line-inactive: #292d48;
  --fg-mode-line-inactive: #969696;
  --border-mode-line-inactive: #606270;
  --modeline-err: #ffa9bf;
  --modeline-warning: #dfcf43;
  --modeline-info: #9fefff;

  /* Tab bar */
  --bg-tab-bar: #2c3045;
  --bg-tab-current: #0d0e1c;
  --bg-tab-other: #4a4f6a;

  /* Diff colors */
  --bg-added: #003a2f;
  --bg-added-faint: #002922;
  --bg-added-refine: #035542;
  --bg-added-fringe: #23884f;
  --fg-added: #a0e0a0;
  --fg-added-intense: #80e080;
  --bg-changed: #363300;
  --bg-changed-faint: #2a1f00;
  --bg-changed-refine: #4a4a00;
  --bg-changed-fringe: #8f7a30;
  --fg-changed: #efef80;
  --fg-changed-intense: #c0b05f;
  --bg-removed: #4f1127;
  --bg-removed-faint: #380a19;
  --bg-removed-refine: #781a3a;
  --bg-removed-fringe: #b81a26;
  --fg-removed: #ffbfbf;
  --fg-removed-intense: #ff9095;
  --bg-diff-context: #1a1f30;

  /* Syntax highlighting */
  --bg-paren-match: #4f7f9f;
  --bg-paren-expression: #453040;
  --cursor: var(--magenta-intense);
  --keybind: var(--magenta-cooler);
  --name: var(--magenta);
  --identifier: var(--yellow-faint);
  --err: var(--red);
  --warning: var(--yellow);
  --info: var(--green-cooler);
  --underline-err: var(--red-intense);
  --underline-warning: var(--yellow);
  --underline-note: var(--cyan);
  --bg-prominent-err: var(--bg-red-intense);
  --fg-prominent-err: var(--fg-main);
  --bg-prominent-warning: var(--bg-yellow-intense);
  --fg-prominent-warning: var(--fg-main);
  --bg-prominent-note: var(--bg-cyan-intense);
  --fg-prominent-note: var(--fg-main);
  --bg-active-argument: var(--bg-yellow-nuanced);
  --fg-active-argument: var(--yellow-cooler);
  --bg-active-value: var(--bg-cyan-nuanced);
  --fg-active-value: var(--cyan-cooler);

  /* Code syntax */
  --builtin: var(--magenta);
  --comment: var(--red-faint);
  --constant: var(--magenta-cooler);
  --docstring: var(--cyan-faint);
  --fnname: var(--magenta-warmer);
  --keyword: var(--blue-warmer);
  --preprocessor: var(--red-cooler);
  --property: var(--cyan-warmer);
  --rx-backslash: var(--magenta-warmer);
  --rx-construct: var(--magenta-cooler);
  --string: var(--blue);
  --type: var(--green-cooler);
  --variable: var(--cyan-warmer);

  /* Accent colors */
  --accent-0: var(--magenta-cooler);
  --accent-1: var(--cyan);
  --accent-2: var(--magenta-warmer);
  --accent-3: var(--yellow-warmer);

  /* Button colors */
  --fg-button-active: var(--fg-main);
  --fg-button-inactive: var(--fg-dim);
  --bg-button-active: var(--bg-active);
  --bg-button-inactive: var(--bg-dim);

  /* Completion colors */
  --fg-completion-match-0: var(--blue-cooler);
  --fg-completion-match-1: var(--magenta-warmer);
  --fg-completion-match-2: var(--cyan-cooler);
  --fg-completion-match-3: var(--yellow);
}

html {
  background-color: var(--bg-main);
}

body {
  margin: auto;
  width: 60%;
  background-color: var(--bg-main);
  color: var(--fg-main);
  font-family: sans-serif;
}

.title {
  text-align: center;
  margin: 0.5em 2% 0.3em 2%;
  font-weight: bold;
  font-size: 2em;
}

#descr, #date {
  text-align: center;
  color: var(--fg-dim);
  word-wrap: break-word;
  font-style: italic;
}

#back {
  text-align: center;
}

hr {
  border: 0;
  margin: 0;
  padding: 0;
  height: 1px;
  background-color: var(--bg-active);
  color: var(--bg-active);
}

p.nav {
  text-align: center;
  margin: 0.5em 2% 0.5em 2%;
  font-size: .95em;
  font-style: italic;
}

a, a:visited, a:active {
  color: var(--blue-warmer);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: .9em;
  margin-bottom: .9em;
  border-collapse: collapse;
}

th {
  color: var(--fg-dim);
  padding: 0.1em 0.5em;
  font-family: "Iosevka";
  font-weight: normal;
  text-align: center;
}

td {
  padding: .3em 1em;
}

td a {
  font-size: 0.96em;
}

td samp {
  font-size: 1.1em;
}

tr:nth-child(odd) {
  background: var(--bg-dim);
}

tr:hover {
  background-color: var(--bg-active);
}

div.content {
  margin: auto;
  width: 95%;
  padding: 5px;
  line-height: 1.5em;
}

p.footer {
  font-size: 0.9em;
  font-family: "Iosevka";
  background: transparent;
  text-align: center;
}

img {
  height: 65%;
  width: 65%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}