:root {
  --base-font-size: 16px;
  --base-font-weight: 500;
  --base-font-line-height: 1.6;
  --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --tag-text-color: hslab(95.05% -0.3 -1.21)

  color-scheme: dark;
  --primary: hsl(0, 0%, 88%);
  --tertiary: hsl(215, 6%, 60%);
  --accent: hsl(215, 6%, 40%);
  --background: hsl(0, 0%, 7%);
  --cta: hsl(215, 85%, 68%);
  --ctaInvert: hsl(215, 65%, 80%);
  --code-background-color: rgba(200, 211, 221, 0.15);
  --pre-background-color: #1E2131;
  --main-border-color: rgba(221, 221, 221, 0.4);
  --logo-color: #fff;
}

body {
  margin: 0;
  font-size: var(--base-font-size);
  font-weight: var(--base-font-weight);
  line-height: var(--base-font-line-height);
  font-kerning: normal;
  color: var(--primary);
  background-color: var(--background);
  font-family: var(--body-font-family);
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: subpixel-antialiased;
}

h1,
.h1 {
  font-size: 2.7rem;
  line-height: 1.35;
  margin-top: 0;
}

h2,
.h2 {
  font-size: 2.1rem;
  line-height: 1.38;
  margin-top: 0;
}

h3,
.h3 {
  font-size: 1.8rem;
  line-height: 1.45;
  margin-top: 0;
}

h4,
.h4 {
  font-size: 1.45rem;
  line-height: 1.4;
  margin-top: 0;
}

h5,
.h5 {
  font-size: 1.27rem;
  line-height: 1.5;
  margin-top: 0;
}

h6,
.h6 {
  font-size: 1.1rem;
  margin-top: 0;
  line-height: 1.53;
}

a {
  color: var(--cta);
}

a:hover,
a:active,
a:focus {
  color: var(--ctaInvert);
  text-decoration: none;
}