
/* base style */

/* FONT FAMILIES */

:root {
  --heading-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --mono-default: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --body-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}

body,
.posts-list .post-preview p,
.posts-list .description p {
  font-family: var(--body-font), var(--body-default);
}

h1, h2, h3, h4, h5, h6,
.posts-list .post-preview h2,
.posts-list .description h2 {
  font-family: var(--heading-font), var(--heading-default);
}

d-article div.sourceCode code,
d-article pre code {
  font-family: var(--mono-font), var(--mono-default);
}


/*-- TITLE --*/
d-title h1,
.posts-list > h1 {
  color: var(--title-color, black);
}

d-title h1 {
  font-size: var(--title-size, 50px);
}

/*-- HEADERS --*/
d-article h1,
d-article h2,
d-article h3,
d-article h4,
d-article h5,
d-article h6 {
  color: var(--header-color, rgba(0, 0, 0, 0.8));
}

/*-- BODY --*/
d-article > p,  /* only text inside of <p> tags */
d-article > ul, /* lists */
d-article > ol {
  color: var(--body-color, rgba(0, 0, 0, 0.8));
  font-size: var(--body-size, 1.06rem);
}


/*-- CODE --*/
d-article div.sourceCode code,
d-article pre code {
  font-size: var(--code-size, 14px);
}

/*-- ASIDE --*/
d-article aside {
  font-size: var(--aside-size, 12px);
  color: var(--aside-color, rgba(0, 0, 0, 0.6));
}

/*-- FIGURE CAPTIONS --*/
figure .caption,
figure figcaption,
.figure .caption {
  font-size: var(--fig-cap-size, 13px);
  color: var(--fig-cap-color, rgba(0, 0, 0, 0.6));
}

/*-- METADATA --*/
d-byline h3 {
  font-size: var(--heading-size, 0.6rem);
  color: var(--heading-color, rgba(0, 0, 0, 0.5));
}

d-byline {
  font-size: var(--body-size, 0.8rem);
  color: var(--body-color, rgba(0, 0, 0, 0.8));
}

d-byline a,
d-article d-byline a {
  color: var(--body-color, rgba(0, 0, 0, 0.8));
}

/*-- TABLE OF CONTENTS --*/
.d-contents nav h3 {
  font-size: var(--heading-size, 18px);
}

.d-contents nav a {
  font-size: var(--contents-size, 13px);
}

/*-- APPENDIX --*/
d-appendix h3 {
  font-size: var(--heading-size, 15px);
  color: var(--heading-color, rgba(0, 0, 0, 0.65));
}

d-appendix {
  font-size: var(--text-size, 0.8em);
  color: var(--text-color, rgba(0, 0, 0, 0.5));
}

d-appendix d-footnote-list a.footnote-backlink {
  color: var(--text-color, rgba(0, 0, 0, 0.5));
}

/*-- WEBSITE HEADER + FOOTER --*/
.distill-site-header .title {
  font-size: var(--title-size, 18px);
  font-family: var(--navbar-font), var(--heading-default);
}

.distill-site-header a,
.nav-dropdown .nav-dropbtn {
  font-family: var(--navbar-font), var(--heading-default);
}

.nav-dropdown .nav-dropbtn {
  color: var(--text-color, rgba(255, 255, 255, 0.8));
  font-size: var(--text-size, 15px);
}

.distill-site-header a:hover,
.nav-dropdown:hover .nav-dropbtn {
  color: var(--hover-color, white);
}

.distill-site-header {
  font-size: var(--text-size, 15px);
  color: var(--text-color, rgba(255, 255, 255, 0.8));
  background-color: var(--bkgd-color, #0F2E3D);
}

.distill-site-footer {
  font-size: var(--text-size, 15px);
  color: var(--text-color, rgba(255, 255, 255, 0.8));
  background-color: var(--bkgd-color, #0F2E3D);
}

.distill-site-footer a:hover {
  color: var(--hover-color, white);
}
