: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;
}

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

@function decToHex($dec) {
    $hex: "0123456789ABCDEF";
    $first: (($dec - $dec % 16)/16)+1;
    $second: ($dec % 16)+1;
    @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second)
}

@mixin content-separator {
  content: " | ";
  color: var(--base03);
  margin: auto 0.5em;
}

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

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