@font-face { font-family: "Zilla Slab"; src: url('fonts/ZillaSlab-Regular.otf'); }
@font-face { font-family: "Fira Sans"; src: url('fonts/FiraSans-Light.otf'); }
* { box-sizing: border-box; font-family: "Fira Sans", "sans-serif"; }
body { text-rendering: optimizeLegibility; margin: 0 auto; max-width: 800px; padding: 20px; background-color: #fafafa; color: #595959; line-height: 1.5em; }
a { color: lightseagreen; }
a:visited { color: teal; }
a:hover { color: turquoise; }
body,
.form__textarea,
.form__button,
.form__field { font-family: "Zilla Slab", serif; font-size: 20px; }
h1,h2,h3,h4,h5,h6 { font-family: "Zilla Slab", "serif"; }
h1 { line-height: 1.25em;}
hr,
h1,
h2 { margin-top: 60px;}
hr { border: 0; }
li { padding: 5px 0; }
code { background-color: #f4f4f4; border-radius: 5px;}
pre { font-size: 15px; overflow-x: auto; line-height: 1.4em; color: #666666; background-color: #f4f4f4; border-radius: 5px; padding: 1em;}
pre b { color: #000000; }
pre strong { background-color: #0000cc; color: #ffffff; }
pre em { background-color: #ffeeaa; }
pre i { font-style: normal; color: #444444; }
pre i::before { content: "> "; color: #aaaaaa; }
pre,
blockquote { margin-bottom: 20px; }
blockquote { padding-left: 10px; border-left: 5px #dddddd solid; } 
p img,
table { width: 100%; }
p { text-align: justify; clear: both; }
.avatar { width: 60px; heigth: 60px; border-radius: 60px; }
.left { float: left; margin: 8px 24px 24px 0; }
.quote { text-indent: -16px; font-size: 32px; line-height: 1.24em; }
.form__error { font-weight: bold; color: #aa0000; }
.form__label,
.form__textarea,
.form__button,
.form__field { margin-bottom: 10px; display: inline-block; }
.form__field,
.form__textarea { width: 100%; max-width: 400px; }
.form__button,
.form__textarea,
.form__field { -webkit-appearance: none; padding: 15px; }
.form__textarea,
.form__field { background-color: #ffffff; color: #000000; border: solid 1px #888888; }
.form__button { background-color: #334f83; border: solid 1px #334f83; color: #ffffff; font-weight: bold; display: inline-block; text-align: center; text-decoration: none; }
.form__button-paypal { background-color: #ffc469; border: solid 1px #ffc469; color: #000000; }
.form__button-xrp { background-color: #808080; border: solid 1px #808080; color: #ffffff; }
.form__button-patreon { background-color: #f96854; border: solid 1px #f96854; color: #ffffff; }
.form__button-vultr { background-color: #1e88e5; border: solid 1px #1e88e5; color: #ffffff; }
.form__button-oams { background-color: #ec0000; border: solid 1px #ec0000; color: #ffffff; }
.form__button-small { padding: 0 10px; font-size: 12px; background-color: #f4f4f4; border: solid 1px #444444; color: #444444; }
.form__button-paypal-hover:hover { background-color: #ffc469; border: solid 1px #ffc469; color: #000000; }
.form__button-patreon-hover:hover { background-color: #f96854; border: solid 1px #f96854; color: #ffffff; }
.form__button-xrp-hover:hover { background-color: #808080; border: solid 1px #808080; color: #ffffff; }
.form__button-vultr-hover:hover { background-color: #1e88e5; border: solid 1px #1e88e5; color: #ffffff; }
.form__button-oams-hover:hover { background-color: #ec0000; border: solid 1px #ec0000; color: #ffffff; }
.form__button-hover:hover { background-color: #334f83; border: solid 1px #334f83; color: #ffffff; }
@media (prefers-color-scheme: dark) {
 :root {
  --red:   #E05434;
  --green: #20B700;
  --blue:  #A7C1E5;
  --buildhead: #474749;
 }

 a:link {
  color: mediumorchid;
 }

 a:visited {
  color: darkorchid;
 }

 a:hover {
  color: violet;
 }

 body {
  background-color: #444444;
  color: #f2f2f2;
 }

 .cmdbox {
  background: #000000;
  color: #FFFFFFF;
 }

 code { background-color: #2b2a33; border-radius: 5px;}
 pre { font-size: 15px; overflow-x: auto; line-height: 1.4em; color: #aaaaaa; background-color: #2b2a33; border-radius: 5px; padding: 1em;}
 pre b { color: #000000; }
 pre strong { background-color: #0000cc; color: #ffffff; }
 pre em { background-color: #ffeeaa; }
 pre i { font-style: normal; color: #444444; }
 pre i::before { content: "> "; color: #aaaaaa; }
 pre,

 #OpenBSD :link {
  text-decoration-color: #CF4229;
 }

 #OpenBSD :link i, #OpenBSD :visited i {
  color: #F2CA30;
 }

 #OpenBSD :link b, #OpenBSD :visited b {
  color: #CF4229;
 }

 #OpenBSD {
  color: #EEEFF1;
 }

 #faq #OpenBSD small :link {
  text-decoration-color: #BAD7FF;
 }

 #project-main nav,
 #project-main figure {
  background-color: #202F51;
  border-color: #97BADB;
 }

 #callout {
  color: #E05434;
 }

 .not-openbsd #callout {
  color: #E05434;
 }
}