:root {
  --mmv-ink: #19323a;
  --mmv-primary: #245f73;
  --mmv-accent: #2f7d6d;
  --mmv-muted: #65747a;
  --mmv-surface: #f5f8f7;
  --mmv-border: #dbe5e2;
}

body {
  color: var(--mmv-ink);
}

.navbar {
  border-bottom: 1px solid var(--mmv-border);
  box-shadow: 0 2px 14px rgb(25 50 58 / 7%);
}

.navbar-brand {
  font-weight: 750;
}

.contents > h1:first-child {
  margin-top: 0.4rem;
  color: var(--mmv-ink);
  font-weight: 800;
}

.contents > h1:first-child + p {
  color: var(--mmv-muted);
  font-size: 1.08rem;
}

.contents h2 {
  margin-top: 2.2rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--mmv-border);
}

.contents table {
  overflow: hidden;
  border: 1px solid var(--mmv-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(25 50 58 / 6%);
}

.contents table img {
  display: block;
  width: 100%;
  min-width: 220px;
  border-radius: 6px;
}

.contents pre,
.sourceCode {
  border: 1px solid var(--mmv-border);
  border-radius: 8px;
}

.contents code {
  color: var(--mmv-primary);
}

.template-home .contents ul:first-of-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  padding-left: 0;
}

.template-home .contents ul:first-of-type li {
  list-style: none;
  padding: 0.8rem 0.9rem;
  background: var(--mmv-surface);
  border: 1px solid var(--mmv-border);
  border-radius: 8px;
}