/* set the viewport */
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* default to dark color theme */
:root {
/* backgrounds */
  --color0:  #1d2021; /* bg0_h */
  --color00: #282828; /* bg0 */
  --color01: #3c3836; /* bg1 */
  --color02: #504945; /* bg2 */
  --color03: #665c54; /* bg3 */
  --color04: #7c6f64; /* bg4 */
/* foregrounds */
  --color05: #fbf1c7; /* fg0 */
  --color06: #ebdbb2; /* fg1 */
  --color07: #d5c4a1; /* fg2 */
  --color08: #bdae93; /* fg3 */
  --color09: #a89984; /* fg4 */
/* colors */
  --color10: #fb4934; /* red */
  --color11: #cc241d; /* dark red */
  --color12: #b8bb26; /* green */
  --color13: #98971a; /* dark green */
  --color14: #fabd2f; /* yellow */
  --color15: #d79921; /* dark yellow */
  --color16: #83a598; /* blue */
  --color17: #458588; /* dark blue */
  --color18: #d3869b; /* purple */
  --color19: #b16286; /* dark purple */
  --color20: #8ec07c; /* aqua */
  --color21: #689d6a; /* dark aqua */
  --color22: #928374; /* gray */
  --color23: #fe8019; /* orange */
  --color24: #d65d0e; /* dark orange */
  --link: #fabd2f;    /* yellow */
  scrollbar-color: var(--color01) var(--color00); 
}

/* begin common settings */
/* page */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { margin: 0; padding: 0; }
body { height: 100%; margin: 0; padding: 0; font-family: 'Source Code Pro', monospace; font-size: 16px;
       color: var(--color05); background-color: var(--color0); }
/* scrollbar */

::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background: var(--color00); border-radius: 0px; }
::-webkit-scrollbar-thumb { background: var(--color01); border-radius: 0px; }

/* links */
a { color: var(--link); text-decoration: none; outline: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a.dead-link { color: var(--color11) !important; }

/* headers */
h1 { margin: 0; font-weight: bold; font-size: 2em; }
h2 { margin: 0; font-weight: bold; font-size: 1.4em; }
h3 { font-size: 1.2em; text-align: left; background: var(--color0); width: 100%; color: var(--color23);
     padding: 0.25em 1.0em 0.25em 0; margin-top: 2.0em; font-weight: bold; border-bottom: 1px solid var(--color01); }
h4 { font-size: 1.1em; text-align: left; background: var(--color0); width: 100%; color: var(--color23);
     padding: 0.25em 1.0em 0.25em 0; font-weight: bold; border-bottom: 1px solid var(--color01); margin-bottom: 0; }
h5,h6 { font-size: 1.0em; font-weight: bold; color: var(--color10); }
.page-content h5, h6 { margin-top: 0.67em;}

/* header links */
h3 a { color: var(--link); outline: none; }
h4 a { color: var(--link); outline: none; }

/* general elements */
section { overflow: auto; max-width: 600px; margin: 0 auto; }
abbr { display: block; background: var(--color06); padding: 0.5em; }
pre { text-align: left; padding: 5px; border: 1px solid var(--color01); }
code { font-family: 'Source Code Pro', monospace; font-size: 1.0em; min-width: 275px; -ms-overflow-style: none; scrollbar-width: none; overflow: auto; }
code::-webkit-scrollbar {
  display: none;
}
blockquote { margin-left: 2.0em; padding: 1em; border-left: 10px solid var(--color12); background: var(--color01); color: var(--color06); }
ul { list-style: square; }
ol li { margin-bottom: 1em; }
figure { margin: 20px auto; max-width: 500px; }
figcaption { width: 100%; max-width: 500px; font-size: 1.0em; background: var(--color00); padding: 5px; color: var(--color06); }

/* general classes */
.link-line { margin-top: 0; }
.thumbnail { display: block; margin: 10px 20px 10px 10px; border: 1px solid var(--color02); padding: 5px; height: 200px; width: 200px; float: left; }
.description-txt { }
.info-container { display: block; clear: both; overflow: auto; text-align: left; vertical-align: top; }
.smaller { font-size: 0.8em; }
.headspace { margin-top: 40px; }

/* header */
header { padding: 10px 0; text-align: center; vertical-align: middle; justify-content: center; max-width: 600px; margin: 0 auto;
               background: var(--color0); color: var(--color05); width: 100%; min-width: 300px; white-space: nowrap; }
.logo { display: block; margin: 0 auto; height: 50px; width: 50px; }
.nameplate { width: 100%; text-align: center; font-size: 2em; }
.site-description { color: var(--color09); font-weight: normal; width: 100%; text-align: center; font-size: 1.2em; }

/* footer */
footer { padding: 80px 0 10px 0; text-align: center; vertical-align: bottom; justify-content: center; max-width: 600px; margin: 0 auto;
               background: var(--color0); color: var(--color05); width: 100%; min-width: 300px; font-size: 0.8em; }

/* content */
main { height: 100%; padding: 25px 10px 10px 10px; min-width: 300px; }

/* navigation */
nav { padding: 10px; background: var(--color00); color: var(--color05); text-align: center; width: 100%; min-width: 300px; max-width: 600px; margin: 0 auto; }
.nav-menu { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.nav-menu-item { display: inline; padding: 0; border-bottom: none; font-size: 1.2em; font-weight: bold; margin-right: 20px; }
.nav-menu-item a { color: var(--link) !important; text-decoration: none !important; }
.nav-menu-item a:hover { color: var(--color12) !important; }
.nav-menu-item-active { color: var(--color12); padding: 0; font-weight: bold; margin-right: 20px; }
.nav-menu-item-active::before { content: "> " }
.nav-menu-item-active a { color: var(--color12) !important; text-decoration: none !important; }
a:hover.nav-menu-item-link { color: var(--color12); }
.nav-menu-feed { font-size: 1.0em; margin-top: 20px; white-space: nowrap; } 
.nav-feed-icon { width: 14px; height: 14px; }

/* image modal for screenshots */
.photo-modal { display: none; height: 100%; width: 100%; background-color: var(--color0); position: fixed; top: 0; left: 0; z-index: 1100;
                    overflow: auto; vertical-align: middle; }
.photo-modal-wrapper { overflow: auto; display: table-cell; vertical-align: middle; }
.photo-modal-close { position: absolute; top: 15px; right: 35px; color: var(--color04); font-size: 40px; font-weight: bold; transition: 0.3s; }
.photo-modal-close:hover,                                                  
.photo-modal-close:focus { color: var(--color06); text-decoration: none; cursor: pointer; }
.photo-modal-close a { color: var(--color04); }                            
.photo-modal-close a:hover { color: var(--color06); text-decoration: none; }
.photo-single { display: block; max-width: 1000px; margin: auto; }

/* error pages */
.error { text-align: center; padding: 100px 0; margin: 10px auto; }
.err-code { font-family: 'Source Code Pro', monospace; font-size: 1em; font-weight: bold; line-height: 1em; margin: 0; padding: 0; }
.err-link { font-size: 1.1em; margin: 0; padding: 0; }
.err-description { font-family: 'Source Code Pro', monospace; font-size: 1em; font-weight: bold; text-transform: uppercase; margin: 1em 0; padding: 0; }

/* responsive */
@media screen and (max-width: 599px) {
    .thumbnail { float: none; margin: 10px auto; }
    .nav-menu-item { display: inline; padding: 5px; font-weight: bold; font-size: 1.2em; line-height: 1.6em; text-shadow: none; }
    .nav-menu-item-link { display: inline; padding: 5px; }
    .nav-menu-item-active { padding: 5px; border-right: none; }
}