:root > * {
  --md-primary-fg-color: #57a2d7;
  --md-accent-fg-color: #df77a6;
  --md-typeset-a-color: #57a2d7;
}

[data-md-color-scheme='slate'] {
  --md-default-bg-color: hsl(240, 12%, 14%);
  --md-accent-fg-color: hsl(333, 62%, 67%) !important;
  --md-typeset-a-color: hsl(198, 62%, 67%) !important;
}

.md-header,
.md-tabs {
  color: inherit !important;
  background-color: var(--md-default-bg-color);
}
[data-md-color-scheme='slate'] .md-header,
[data-md-color-scheme='slate'] .md-tabs {
  background-color: var(--md-default-bg-color);
}
@media screen and (min-width: 76.25em) {
  [data-md-color-scheme='slate'] .md-tabs {
    border-bottom: 0.05rem solid rgba(255, 255, 255, 0.07);
  }
}

.hero h1 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  font-size: 1.8em;
  letter-spacing: 0.01em;
}

.md-button--primary {
  color: #ffffff !important;
}

.hero {
  display: flex;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  margin-bottom: 4em;
}