@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  --waddle-deep: #0d1b2a;
  --waddle-mid: #1b263b;
  --waddle-slate: #415a77;
  --waddle-muted: #778da9;
  --waddle-coral: #e05c6c;
  --waddle-coral-hover: #c94e5d;
  --waddle-sage: #83af84;
  --waddle-gold: #ffe356;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--waddle-deep);
  --md-primary-fg-color--light: var(--waddle-mid);
  --md-primary-fg-color--dark: #060d14;
  --md-accent-fg-color: var(--waddle-coral);
  --md-typeset-a-color: var(--waddle-coral);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--waddle-deep);
  --md-accent-fg-color: var(--waddle-coral);
  --md-typeset-a-color: var(--waddle-gold);
}

.md-typeset {
  font-family: "DM Sans", var(--md-text-font, system-ui), sans-serif;
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.8rem;
}

.md-typeset img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgb(13 27 42 / 0.12);
}

.md-typeset .waddle-hero {
  margin: 1.5rem 0 2rem;
}

.md-typeset .grid.cards > ul > li {
  border-color: rgb(65 90 119 / 0.25);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--waddle-coral);
}

.md-typeset h1 {
  font-weight: 700;
}

.md-typeset a:hover {
  color: var(--waddle-coral-hover);
}