:root {
  /* 
   * base16 "eighties" color scheme
   * http://chriskempson.com/projects/base16/
   */

  --color0: rgb(45, 45, 45);
  --color1: rgb(57, 57, 57);
  --color2: rgb(81, 81, 81);
  --color3: rgb(116, 115, 105);
  --color4: rgb(160, 159, 147);
  --color5: rgb(211, 208, 200);
  --color6: rgb(232, 230, 223);
  --color7: rgb(242, 240, 236);
  --color8: rgb(242, 119, 122);
  --color9: rgb(249, 145, 87);
  --colorA: rgb(255, 204, 102);
  --colorB: rgb(153, 204, 153);
  --colorC: rgb(102, 204, 204);
  --colorD: rgb(102, 153, 204);
  --colorE: rgb(204, 153, 204);
  --colorF: rgb(210, 123, 83);

  /*
   * colorX is an addition to the
   * "eighties" base16 scheme. It's
   * used as a darkest color, freeing
   * up color0 to be used elsewhere.
   */
  --colorX: rgb(20, 20, 20);
}

/* General */

body {
  font-family: "Roboto";
  background-color: var(--colorX);
  color: var(--color5);

  line-height: 1.75;
  max-width: 40rem;
  padding: 0 0.6rem;
  margin: 0 auto;
}

header {
  display: flex;

  /* For the index header. */
  h1 {
    font-family: "Roboto";
  }

  .jander {
    display: inline-block;
    color: var(--colorE);
    font-size: 25px;
  }

  .land {
    display: inline-block;
    color: var(--colorD);
    font-size: 22px;
  }
}

header.home {
  padding-left: 120px;

  .jander {
    font-size: 100px;
    margin-left: -120px;
  }

  .land {
    font-size: 85px;
  }
}

.date {
  color: var(--color4)
}

p {
  margin: 1rem 0;
}

figure {
	margin-left: 0;
	margin-right: 0;
}

/* Headers */

h1 {
  font-size: 3rem;
  line-height: 1.25;
  font-family: Merriweather;
}

h2 {
  font-size: 2rem;
  margin: 2rem 0 0.5rem 0;
  line-height: 1.25;
  font-family: Merriweather;
}

/* Links */

a:link {
  color: var(--color8);
}

a:visited {
  color: var(--color9);
}

a:hover {
  color: var(--colorA);
}

/* Images */

img {
  border-radius: 0.5rem;
  width: 100%;
}

/* Callouts */

blockquote {
  border-left: 1rem solid var(--colorF);
  padding: 0.5rem 1rem;
  margin: 2rem 0;
  background-color: var(--color1);
  border-radius: 0.5rem;
}

/* Inline Code */

code {
  font-family: "Fira Code", monospace;
  border-radius: 0.3rem;
  padding: 0 0.2rem 0 0.2rem;
  background-color: var(--color1);
}

/* Code Blocks */

pre {
  position: relative;
  z-index: 1;

  /* This is the label at the top-left
   * of the code block. The 'content'
   * property must be overriden for
   * it to be displayed.
   */
  > ::before {
    position: absolute;
    top: 0;
    left: 0.5rem;
    font-size: 0.7rem;
    color: var(--color4);
  }

  code {
    width: 100%;
    display: block;
    margin: 2rem 0;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    overflow-x: auto;
    color: var(--color6);
    background-color: var(--color1);
  }
}

.lang-go, .language-go {
  font-size: 0.85rem;
}

pre.query, pre.lang-go {
  code {
    padding: 1.5rem 1rem 0.5rem 1rem;
  }
}

pre.result, pre.lang-go {
  code {
    background-color: var(--color0);
  }
}

pre.result, pre.equiv-go {
  z-index: 0;

  > ::before {
    top: 1rem;
    color: var(--color3);
  }

  code {
    margin-top: -3rem;
    padding: 2.5rem 1rem 0.5rem 1rem;
  }
}

pre.query > ::before {
  content: "query";
}

pre.result > ::before {
  content: "result";
}

pre.lang-go > ::before {
  content: "pseudo go";
}

/* Tables */

/* This div hides it's table child
 * when it's larger than the screen
 * width and provides scollability.
 */
div:has(> table) {
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 0.5rem;
  background-color: var(--color0);
}

table {
  width: 100%;
  border-spacing: 0;
  background-color: var(--color0);
  border-radius: 0.5rem;

  /* Hide inline code's bg color by matching
   * the table's bg color. Within the tables,
   * code is always next to code so there's
   * no need to highlight it.
   */
  code {
    background-color: var(--color0);
  }

  tr {
    th {
      background-color: var(--color1);
    }

    th, td {
      padding: 0.5rem 1rem;
    }
  }

  tr:first-child {
    th:first-child {
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
    }

    th:last-child {
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
    }
  }
}