:root {
  /* The fonts. */
  --body-family: serif;
  --header-family: sans-serif;
  --mono-family: monospace;

  /* Spacing options. */
  --font-size: 20px;
  --mono-font-size: 0.9em;
  --vertical-rhythm: 24px;
  --content-width: 750px;

  --border-style: var(--base06) solid 1px;
}

$mobile-breakpoint: 600px;
$tablet-breakpoint: 860px;

:root {
  font-family: var(--body-family);
  font-size: var(--font-size);
  background: var(--base00);
  color: var(--base05);
  line-height: var(--vertical-rhythm);
  margin: 0;
  padding: 0;
}

@mixin header-link-hover-style {
  > *:hover {
    color: var(--base0C);
    text-decoration: none;
  }
}

@import "base";
@import "layout";
@import "extend";