/* Accent: indigo instead of the theme's crimson (light) and neon green (dark) */
:root {
  --color-primary: #3b5bdb;
  --color-primary-hover: #364fc7;
  --color-primary-dark: #91a7ff;
  --color-primary-hover-dark: #748ffc;
}

/* Home: header + intro + footer fill the top third of the window, with the
   slack going above the footer line. The footer's visible bottom (its text)
   lands at 1/3, so add back its 2rem bottom padding and remove body's 8px margin. */
.content.home {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh / 3 + 2rem - 8px);
}

.content.home main {
  flex: 1 0 auto;
}

.home-intro {
  margin-bottom: 2rem;
}

.home-intro p:first-child {
  margin-bottom: 1.2rem;
}

.info-table {
  display: table;
  border-collapse: collapse;
}

.info-row {
  display: table-row;
}

.info-label {
  display: table-cell;
  color: #888;
  padding-right: 2rem;
  white-space: nowrap;
  font-family: monospace;
  font-size: 0.92em;
  vertical-align: top;
  padding-bottom: 0.2rem;
}

.info-value {
  display: table-cell;
  font-family: monospace;
  font-size: 0.92em;
  padding-bottom: 0.2rem;
}

.info-value a {
  margin-right: 1rem;
}

/* Dotted separators (hr and footer) use the theme accent instead of the border color */
hr,
footer {
  border-top-color: var(--color-primary);
  border-block-start-color: var(--color-primary);
}

/* The "|" dividers between the footer icons */
footer .border {
  border-color: var(--color-primary);
}

/* data-theme is set by static/js/themetoggle.js */
:root[data-theme="dark"] footer .border {
  border-color: var(--color-primary-dark);
}

:root[data-theme="dark"] hr,
:root[data-theme="dark"] footer {
  border-top-color: var(--color-primary-dark);
  border-block-start-color: var(--color-primary-dark);
}

/* The theme's dark.css never recolors list bullets, so they'd keep the light accent */
:root[data-theme="dark"] ul > li::before {
  color: var(--color-primary-dark);
}