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

/* begin common settings */

/* page */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { margin: 0; padding: 0; }
body { min-height: 100vh; margin: 0; padding: 0;
       font-family: "Agdasima", Helvetica, sans-serif; font-size: 16px;
       color: var(--fg_2); background-color: var(--bg_1); }

/* links */
a { color: var(--blue); text-decoration: none; outline: none; }
a:hover { color: var(--blue); text-decoration: none; outline: none; }

/* headers */
h1,h2 { margin: 0; font-weight: bold; font-size: 1.1em; }
h3 { font-size: 1em; text-align: center; width: 100%; color: var(--fg_3);
     padding: 0.5em 0; font-weight: 400; margin: 0; border-top: 1px solid var(--bg_3);
     border-bottom: 1px solid var(--bg_3); text-transform: uppercase;
     background: var(--bg_2); }
h3.first { border-top: none; border-top-left-radius: 19px; border-top-right-radius: 19px; }
h3.last { border-bottom: none; border-bottom-left-radius: 19px; border-bottom-right-radius: 19px; }
h4 { font-size: 1.05em; text-align: center; width: 100%; color: var(--fg_4);
     padding: 0.25em 0; font-weight: bold; margin: 0; }
h5 { font-size: 1.0em; font-weight: bold; color: var(--fg_1); }
h5 { font-size: 1.0em; font-weight: bold; color: var(--fg_1); }
.page-content h5, h6 { margin-top: 0.67em;}

/* general elements */
section { margin: 0 auto 10px auto; border-radius: 20px; border: 1px solid var(--bg_2);
          background: var(--section); }
article { margin: 0 auto 10px auto; border-radius: 50px; border: 1px solid var(--bg_4);
          background: linear-gradient(var(--gradtop), var(--gradbot)); padding: 0.5em 0; }
article img { width: 100%; max-width: 620px; }
article p { margin: 0.5em 0; }
article:hover { background: linear-gradient(var(--gradhvt), var(--gradhvb)); border: 1px solid var(--gradbdr); }
abbr { display: block; background: var(--fg_2); padding: 0.5em; }
pre { font-family: 'Source Code Pro', monospace; font-size: 16px; text-align: left; }
code { font-family: 'Source Code Pro', monospace; font-size: 1.0em; min-width: 275px; overflow: auto; }
blockquote { margin-left: 2.0em; padding: 1em; border-left: 10px solid var(--bg_5); background: var(--bg_3); color: var(--fg_2); }
ul { list-style: none; padding-left: 1.75em; }
li { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
ol { margin-bottom: 1em; }
figure { margin: 20px auto; max-width: 500px; }
figcaption { width: 100%; max-width: 500px; font-size: 0.8em; background: var(--bg_4); padding: 1em; color: var(--fg_1); }
details { margin: 0; font-size: 1.0em; padding: 0.5em; background: var(--bg_2); border: 1px solid var(--bg_3); width: 100%; min-width: 100%; cursor: pointer; }
details p { margin-top: 10px; padding: 0.5em; }
details summary { color: var(--blue); width: 100%; min-width: 100%; }
dl { margin-block: 0; }
dt { font-weight: bold; color: var(--fg_5); text-align: center; }
dd { text-align: center; margin-left: 0; margin-bottom: 0; }
table { margin: 10px auto 20px auto; text-align: left; border-collapse: collapse; border: 1px solid var(--fg_6); width: 100%; }
th { background: var(--bg_5); color: var(--fg_2); border-bottom: 1px solid var(--fg_6); padding: 0.25em 0.25em; }
td { padding: 0.25em 0.25em; }
tr { background: var(--bg_1); }
tr:nth-child(even) { background: var(--bg_3); }
tr:hover { background: var(--bg_4); }

/* general classes */
.smallest { font-size: 0.8em; color: var(--bg_6); }
.smaller { font-size: 0.85em; }
.bitsmaller { font-size: 0.9em; }
.bitbigger { font-size: 1.1em; }
.bigger { font-size: 1.15em; }
.biggest { font-size: 1.2em; }
.callout { margin-left: 10px; padding-left: 10px; border-left: 10px solid var(--bg_5); }
.doubleblock { margin: 2.0em 3.0em 2.0em 3.0em; padding: 0.25em 1.1em 0.25em 1.1em; background: var(--bg_2);
               border-left: 10px solid var(--bg_5); border-right: 10px solid var(--bg_5); color: var(--fg_2); text-align: center; }
.invisible { display: none !important; }
.centered { text-align: center; }
.text-block { margin: 0; height: 100%; font-size: 1.0em; padding: 0 1.0em; background: var(--bg_2); border: 1px solid var(--bg_3); }
.meta-block { color: var(--fg_3); }
.meta-block ul { margin-top: 0; padding-left: 0; }
.meta-block ul li { margin-top: 0.25em !important; margin-bottom: 0.25em !important; font-size: 0.9em; }
.meta-block ul li:before { content: "" !important; margin-left: 0; }
.meta-block strong { color: var(--fg_3); }
.no-top { margin-top: 0; }
.no-bottom { margin-bottom: 0; }
.bottom-border {  border-bottom: 1px solid var(--bg_3); }
.cc-img { border: 0; margin: 10px auto; }
.license-footer { text-align: center; margin: 40px 0 40px 0; }
.excerpt { cursor: pointer; position: relative; overflow: hidden; display: block; font-size: 1rem; line-height: 1.5rem; height: 12rem; margin-bottom: 1em;
    background-color: var(--fg_2); background-image: linear-gradient(180deg, var(--fg_2), var(--bg_5)); background-size: 100%;
    background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; }
.excerpt a { pointer-events: none; }
.excerpt-link a,a:hover { text-decoration: none; }
.relative { position: relative; }
.ellipsis { position: absolute; bottom: 5px; right: 5px; z-index: 1; overflow: hidden; font-weight: bold; font-size: 1.4em;}

/* header */
header { position: relative; padding: 10px; text-align: center; vertical-align: middle; justify-content: left;
         width: 100%; min-width: 320px; max-width: 620px; margin: 0 auto;
         background: var(--bg_1); color: var(--fg_2); white-space: nowrap; }
header h1 { width: 100%; }
header h5 { color: var(--fg_5); font-weight: normal; width: 100%; margin: 0; }
.lightdark { display: block; width: 70px; margin: 10px 10px 10px auto; }
.lightdot { height: 25px; width: 25px; margin-left: 5px; background-color: var(--lm_bg); border: 1px solid var(--lm_bd); border-radius: 50%; display: inline-block; }
.darkdot { height: 25px; width: 25px; margin-left: 5px; background-color: var(--dm_bg); border: 1px solid var(--dm_bd); border-radius: 50%; display: inline-block; }
.about { margin: 20px auto; white-space: wrap; max-width:320px; }
#headshot { display: block; margin: 10px auto; height: 100px; width: 100px; border-radius: 50px; border: 1px solid var(--bg_5); }

/* footer */
footer { width: 100%; min-width: 320px; max-width: 620px; height: 80px; margin: 0 auto; }

/* content */
main { overflow: hidden; min-width: 320px; max-width: 620px; margin: 0 auto;
       display: flex; flex-flow: row wrap; place-content: center center; }

/* layouts */
.flex-about { flex-grow: 1; }
.flex-w { display: flex; flex-direction: column; margin: 0 5px; width: 300px; }
.flex-x { display: flex; flex-direction: column; margin: 0 0px 10px 0px; width: 300px; }
.flex-y { display: flex; flex-direction: column; margin: 0 10px 10px 10px; min-width: 200px; max-width: 300px; }

/* lists and items */
ul.pills { list-style: none; margin: 0; padding: 0; text-align: center; }
ul.pills li { margin: 5px; padding: 2px 10px; background: #262626; display: inline-block;
     height: 20px; border-radius: 12px; line-height: 12px; font-weight: 400;
     background: linear-gradient(var(--gradtop), var(--gradbot));
     border: 1px solid var(--bg_4); text-transform: lowercase; }
ul.pills a { color: var(--fg_1); }

/* error page */
.error { text-align: center; padding: 100px 0; margin: 10px auto; display: block; }
.err-code { font-size: 4em; font-weight: 700; line-height: 1em; margin: 0; padding: 0; }
.err-description { font-size: 1.2em; font-weight: 700; margin: 0; padding: 0; }

@media screen and (max-width: 619px) {
    .flex-about { flex-grow: 0; }
}