/* =========================
   Fonts
   ========================= */

@import url("https://fonts.googleapis.com/css?family=Roboto:200,300,350,400&display=swap");

:root {
  /* Colors */
  --jet: #3d3d3d;
  --accent: #666666;
  --accent2: #901A1E;

  /* Typography */
  --font-sans: "Roboto", sans-serif;
}

/* =========================
   Base layout
   ========================= */

html {
  font-size: 18px;
}

body {
  font-family: var(--font-sans);
  color: var(--jet);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* =========================
   Headings
   ========================= */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 300;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

h1 {
  font-size: 2.2rem;
  color: var(--jet);
}

h2 {
  font-size: 1.6rem;
  color: var(--accent2);
}

h3 {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--accent);
}

h4 {
  font-size: 1rem;
  color: var(--accent2);
}

/* =========================
   Text & links
   ========================= */

p {
  margin-top: 1em;
  font-weight: 300;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =========================
   Lists
   ========================= */

ul, ol {
  padding-left: 1.2em;
  font-weight: 300;
}

ul li::marker {
  color: #b3b3b3;
}

ul ul {
  list-style: none;
  padding-left: 1em;
}

/* =========================
   Buttons / links-as-buttons
   ========================= */

.button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 400;
  background-color: var(--accent);
  color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.button::before {
  content: "▶";
  margin-right: 6px;
}

.button:hover {
  background-color: #4d4d4d;
}

/* =========================
   Tables
   ========================= */

table {
  margin: 1.5em auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  padding: 0.3em 0.6em;
  text-align: left;
  font-weight: 300;
}

thead th {
  font-weight: 400;
  border-bottom: 2px solid #d3d3d3;
}

table tr:last-child td {
  border-bottom: 2px solid #d3d3d3;
}

caption {
  color: var(--accent);
  font-variant: small-caps;
  margin-bottom: 0.5em;
}

/* =========================
   Utility classes
   ========================= */

.alert {
  color: var(--accent2);
}

.fg {
  color: var(--jet);
}

.bg {
  background-color: #f5f5f5;
  padding: 0.15em 0.3em;
  border-radius: 4px;
  display: inline-block;
}

.references,
.cite {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--accent);
}