---
---
;
$page-background: #FCFEFF;
$page-text-color: #07203B;
$content-font-family: Georgia,serif;
$selection-background: rgba($page-text-color, .3);

html {
  font: normal 14pt/1.5 $content-font-family;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0 auto;
  max-width: 40em;
  box-sizing: border-box;
}

h1 {
  font-weight: normal;
}

.subHeader {
  font-style: italic;
}

.flow > * {
  display: inline-block;
}

.flow.gutter > *:not(:last-child) {
  margin-right: 1.5em;
}

@media screen {
  html {
    background: $page-background;
    color: $page-text-color;
  }

  body {
    padding: 0 1em;
  }

  ::selection {
    background: $selection-background;
  }

  .dimmedText {
    color: rgba($page-text-color, .6);
  }
}

@media only screen and (max-width: 640px) {
  html {
    font-size: 10pt;
  }
}

@media print {
  html {
    font-size: 11pt;
  }

  body {
    max-width: none;
  }

  .dimmedText {
    color: lighten(#000, 40%);
  }
}
---
---
;
$page-background: #FCFEFF;
$page-text-color: #07203B;
$selection-background: #BDE9FF;
$content-font-family: Georgia,serif;

html {
  font: normal 14pt/1.5 $content-font-family;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0 auto;
  max-width: 40em;
  box-sizing: border-box;
}

h1 {
  font-weight: normal;
}

.subHeader {
  font-style: italic;
}

.flow > * {
  display: inline-block;
}

.flow.gutter > *:not(:last-child) {
  margin-right: 1.5em;
}

@media screen {
  html {
    background: $page-background;
    color: $page-text-color;
  }

  body {
    padding: 0 1em;
  }

  ::selection {
    background: $selection-background;
  }

  .dimmedText {
    color: rgba($page-text-color, .6);
  }
}

@media only screen and (max-width: 640px) {
  html {
    font-size: 10pt;
  }
}

@media print {
  html {
    font-size: 11pt;
  }

  body {
    max-width: none;
  }

  .dimmedText {
    color: lighten(#000, 40%);
  }
}
Tweak color of selected text
Tweak color of selected text
