: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;
  --code-block-size: 50vh;

  --border-style: var(--base05) solid 1px;
  --background: var(--base00);
  --foreground: var(--base05);
  --accent-color: var(--base0C);
}

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

:root {
  font-family: var(--body-family);
  font-size: clamp(var(--font-size), 1.4vw, calc(var(--font-size) * 3));
  background: var(--background);
  color: var(--foreground);
  line-height: var(--vertical-rhythm);
  margin: 0;
  padding: 0;
}

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

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