/* Use freely available fonts, avoids Google fonts too. */
:root {
  --md-text-font: 'Montserrat';
}

/* Trying to match a bit my color palette. */
:root > * {
  --md-primary-fg-color: #f00;
  --md-default-bg-color: #f7f7f7;
  --md-code-bg-color: #e8e8e8;
}
@media screen {
  /* Slate theme, i.e. dark mode */
  [data-md-color-scheme='slate'] {
    --md-default-bg-color: #272727;
    --md-code-bg-color: hsla(var(--md-hue), 15%, 15%, 1);
  }
}

/* Bump the default text size for larger screens.
Sadly, it makes tooltips looks un-centered, need to investigate
but it looks to be dynamically reajusted through JS. */
@media screen and (min-width: 45em) {
  .md-typeset {
    font-size: 0.9rem;
  }
  .md-typeset :is(.admonition, details) {
    font-size: 0.8rem;
  }
  .md-tooltip__inner.md-typeset {
    font-size: 0.8rem;
  }
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: inherit;
  font-weight: bold;
  font-family: Vollkorn;
  letter-spacing: inherit;
}
.md-header__topic {
  font-family: Vollkorn;
}

.md-grid {
  max-width: 54rem;
}

.side-by-side {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 45em) {
  .side-by-side {
    flex-direction: row;
  }
  figure {
    padding: 0 1rem;
  }
}
figure {
  text-align: center;
}
figure img {
  max-height: 60vh;
  margin: auto;
  border: 1px solid darkgreen;
  padding: 1px;
}

article p > a {
  text-decoration: underline;
}