:root {
  --md-primary-fg-color: #4f3f91;
  --md-primary-fg-color--light: #7768b5;
  --md-primary-fg-color--dark: #362a69;
  --md-accent-fg-color: #df3c43;
}

[data-md-color-scheme="slate"] {
  --md-hue: 244;
  --md-default-bg-color: hsla(var(--md-hue), 15%, 12%, 1);
  --md-code-bg-color: hsla(var(--md-hue), 18%, 16%, 1);
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  transition:
    border-color 180ms,
    box-shadow 180ms,
    transform 180ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.35rem 1rem rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.md-typeset .route-grid > ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.md-typeset .route-grid > ul > li {
  min-height: 17rem;
  padding: 1.25rem 1.4rem;
}

.md-typeset .route-grid > ul > li > p:first-child {
  font-size: 1.05rem;
}

@media screen and (max-width: 44.9844em) {
  .md-typeset .route-grid > ul {
    grid-template-columns: 1fr;
  }

  .md-typeset .route-grid > ul > li {
    min-height: auto;
  }
}

.md-typeset .md-button {
  border-radius: 2rem;
}

.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
}

.md-typeset .paper-figure {
  display: block;
  width: 100%;
  height: auto;
  margin: 1rem auto 1.25rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
}