/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

html {
  -moz-text-size-adjust: none;
}

body {
  padding: 20px;
  transition-property: background-color, color;
  transition-duration: 0.4s;
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
}

body.light {
  background-color: #ffffff;
  color: #222222;
}

body.dark {
  background-color: #222222;
  color: #eeeeee;
}

body.sans-serif {
  font-family: sans-serif;
}

body.serif {
  font-family: serif;
}

#container.font-size1 {
  font-size: 10px;
}

#container.font-size2 {
  font-size: 12px;
}

#container.font-size3 {
  font-size: 14px;
}

#container.font-size4  {
  font-size: 16px;
}

#container.font-size5 {
  font-size: 18px;
}

#container.font-size6 {
  font-size: 20px;
}

#container.font-size7 {
  font-size: 22px;
}

#container.font-size8 {
  font-size: 24px;
}

#container.font-size9 {
  font-size: 26px;
}

/* Override some controls and content styles based on color scheme */

body.light > .container > .header > .domain {
  color: #ee7600;
  border-bottom-color: #d0d0d0; 
}

body.light > .container > .header > h1 {
  color: #222222;
}

body.light > .container > .header > .credits {
  color: #898989;
}

body.dark > .container > .header > .domain {
  color: #ff9400;
  border-bottom-color: #777777; 
}

body.dark > .container > .header > h1 {
  color: #eeeeee;
}

body.dark > .container > .header > .credits {
  color: #aaaaaa;
}

body.light > .container > .content .caption,
body.light > .container > .content .wp-caption-text,
body.light > .container > .content figcaption {
  color: #898989;
}

body.dark > .container > .content .caption,
body.dark > .container > .content .wp-caption-text,
body.dark > .container > .content figcaption {
  color: #aaaaaa;
}

body.light > .container > .content blockquote {
  color: #898989 !important;
  border-left-color: #d0d0d0 !important;
}

body.dark > .container > .content blockquote {
  color: #aaaaaa !important;
  border-left-color: #777777 !important;
}