:root {
  /* base  (http://chriskempson.com/projects/base16/) */
  --base00: #181818;
  --base01: #282828;
  --base02: #383838;
  --base03: #585858;
  --base04: #b8b8b8;
  --base05: #d8d8d8;
  --base06: #e8e8e8;
  --base07: #f8f8f8;

  /* highlights */
  --base08: #ab4642;
  --base09: #dc9656;
  --base0A: #f7ca88;
  --base0B: #a1b56c;
  --base0C: #86c1b9;
  --base0D: #7cafc2;
  --base0E: #ba8baf;
  --base0F: #a16946;
}

@import 'https://fonts.googleapis.com/css?family=Galada:400|Open+Sans:400,300';

/* dark theme */
@media ( prefers-color-scheme: dark ),
       ( prefers-color-scheme: no-preference )
{
  body
  { color: var(--base05);
  ; background: var(--base00)
  }

  header, h1, h2, h3
  { color: var(--base0A) }

  a:link, a:visited
  { color: var(--base0D) }

  a:hover
  { color: var(--base0C) }

  pre
  { background-color: var(--base01) }

  code
  { color: var(--base0B)
  }

  hr
  { border: 0
  ; height: 1px
  ; width: 100%
  ; margin: 2rem
  ; background-image: linear-gradient(
      to right,
      /* same as --base0A */
      rgba(186, 139, 175, 0),
      rgba(186, 139, 175, 0.75),
      rgba(186, 139, 175, 0))
  }
}

/* light theme */

@media ( prefers-color-scheme: light)
{
  body
  { background-color: var(--base07)
  ; color: var(--base00)
  }

  a:link, a:visited
  { color: var(--base0D) }

  a:hover
  { color: var(--base0C) }

  pre
  { background-color: var(--base06) }

  code
  { color: var(--base0B) }
}

/* structure and layout */

body
{ max-width: 900px
; margin: 40px auto
; padding: 0 10px
; font: 18px/1.5
        "Open Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
; display: flex
; flex-direction: column
; align-items: auto
}

header#title-block-header,
h1,
h2,
h3
{ line-height: 1.2
; align-self: center
; text-transform: lowercase
}

pre
{ padding: .5rem }

pre,code
{ overflow-x: scroll
; white-space: pre
}

#quescripts-btn
{ border-width: 2px
; border-style: solid
}

#quescripts-btn
{ font-size: 1.2rem
; padding: 1rem
; text-decoration: none
; text-align: center
; display: block
; max-width: 400px
; margin: auto
}