:root {
  --heading-font: 'Yuji Syuku', Didot, 'URW Palladio L', 'Noto Serif', 'Palatino Linotype', Georgia, serif;
  --body-font: 'League Spartan', Futura, 'URW Gothic', 'Source Sans Pro', Tahoma, Arial, sans-serif;
  --bg-color: #eee;
  --nav-color: #000;
  --heading-color: #384;
  --body-color: #111;
  --link-hover-color: #cfd;
  --link-click-color: #485;
}
@media print {
  :root {
    --heading-font: serif;
    --body-font: sans-serif;
    --bg-color: transparent;
    --nav-color: #000;
    --heading-color: #000;
    --body-color: #000;
  }
  body  { color: #000000 !important;  font-family: sans-serif !important;  font-size: 10pt !important; }
  p  { page-break-inside: avoid !important; }
  h1, h2, h3, h4, h5, h6  { font-family: serif !important;  font-size: 12pt !important;  margin: 1rem 0 0 !important; }
  h1  { text-align: inherit !important; }
  h1.entry-title  { text-align: center !important; }
  .nav-brand  { width: 100% !important;  text-align: center !important; }
  .button, .nav-right, footer.postamble  { display: none !important; }
  .project-desc-container  { flex-flow: column nowrap !important; }
  .container {
    min-height: auto !important;
    display: block !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .col-img  { max-width: 4cm !important; }
  .col-img img  { max-width: 4cm !important;  padding: 1mm !important; }
  .floater  { max-width: 4cm !important;  padding: 1mm !important;  float: right !important; }
}
/** /
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #233;
    --nav-color: #fff;
    --heading-color: #5d6;
    --body-color: #eee;
    --link-hover-color: #485;
    --link-click-color: #cfd;
  }
}
/**/

html {
  font-size: 100%;
  font-family: var(--body-font);
  font-weight: 300;  /* TODO: try 200, 300, 400, 500 */
  /*max-width: 85ch;*/
  width: auto;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  /*padding: 2rem 1rem;
  margin: 1rem 0;*/
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--body-color);
  line-height: 1.4;
  margin: 0 auto;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 400;  /* TODO: test 400, 500, 600, 700, 800 */
  color: var(--heading-color);
  line-height: 1.2;
  margin: 3rem 0 1rem;
}
h1  { font-size: 2.2rem;  text-align: center; }
h2  { font-size: 1.8rem; }
h3  { font-size: 1.5rem; }
h4  { font-size: 1.3rem; }
h5  { font-size: 1.1rem;  font-weight: bold; }
h6  { font-size: 1.1rem;  margin-bottom: 0.5rem; }

p, ul, ol, dl  { margin: 0 0 1rem; }
.justify  { text-align: justify; }

b, strong  { font-weight: bold; }

a {
  color: var(--heading-color);
  text-decoration: none;
  transition-delay: 0.05s;
  transition-duration: 0.2s;
  transition-property: color, background-color;
  transition-timing-function: linear;
}
a:visited  { color: var(--heading-color); }
a:hover  { background: var(--link-hover-color);  text-decoration: underline; }
a:active  { background: var(--link-click-color); }

a.button:hover  { text-decoration: none !important; }
.button::before {
  content: '\02196';
  color: var(--heading-color);
  font-weight: 700;
  margin-right: 1ch;
}
.button {
  border: 1px solid var(--heading-color);
  background: var(--bg-color);
  color: var(--nav-color) !important;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  padding: 0.3rem 1rem;
}
.button:hover  { background: var(--link-hover-color); }
.btn-bold  { font-weight: 700; }

img {
  display: block;
  outline: solid 1px #ccc;
  max-width: 60%;
  margin: 2rem auto;
  padding: 0.5rem;
}

figcaption {
  font-size: 0.8rem;
  font-style: italic;
  color: #888;
  max-width: unset;
  text-align: center;
}

blockquote {
  font-style: italic;
  color: var(--heading-color);
  padding: 0.5rem 1rem;
  margin 0.8rem 0;
  border-left: 0.25rem solid #3d3;
  p:last-child {
    margin-bottom: 0;
  }
  cite {
    color: #888;
  }
}

section, aside, footer  { margin: 1.5rem auto; }

hr {
  position: relative;
  margin: 1.5rem 0 !important;
  max-width: 55rem;
  border: none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  transform: translateY(-2px);
}

.nav-bar {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.nav-brand {
  flex-grow: 1;
  font-size: 1.4rem;
  font-weight: bold;
  white-space: nowrap;
}
.nav-brand a  { color: var(--nav-color); }
.nav-right  {}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.nav-search-container {
  display: inline;
}
.nav-search {
  display: inline;
}
.form-control  { width: auto; }
.nav-item {
  display: inline;
}
.nav-item .active {
  border-bottom: 2px solid var(--heading-color);
}
.nav-item .active a {
  border-bottom: 2px solid #F00;
}
.nav-link {
  display: block;
  color: var(--nav-color);
  text-align: center;
  padding: 10px 13px;  /* TODO */
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-link:visited {
  color: var(--nav-color);
}
.nav-link:hover {
  border-bottom: 2px solid var(--nav-color);
}

.hide  { display: none; }

footer.postamble {
  width: 100%;
  margin: 0;
}
ul.postamble {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li.postamble {
  float: left;
}
li.postamble a {
  display: block;
  color: var(--nav-color);
  text-align: center;
  padding: 10px 13px;  /* TODO: other units */
  text-decoration: none;
}
li.postamble a:hover  {}

.two-column  { display:flex;  flex-flow: column wrap-reverse; }
.col  { flex: 1 1 60%; }
.col-img  { flex: 1 1 40%; }
.col-img img  { margin: 1rem auto; }
.floater  { max-width: 40%;  margin: 0 1rem;  float: right; }

.tag-header {
  font-size: 1.2rem;
  width: 100%;
  text-align: center;
  margin: 2ex auto -2ex;
}
.project-list {
  list-style: none;
  padding: 0;
}
.project-list-item {
  clear: left;
}
.project-list-header {
  display: flex;
  flex-flow: column wrap;
  align-items: baseline;
}
.project-list-title {
  flex-grow: 1;
}
.project-list-date {
  margin: 0.5rem 0;
  flex-basis: content;
}
.project-list-img {
  max-height: 10ex;
  max-width: 10ch;
  margin: 0 0.5rem;
  float: left;
}
.project-date {
  display: inline-block;
  min-width: 10ch;
  font-variant: tabular-nums;
  font-family: sans-serif;
  font-size: 0.75rem;
}
mark {
  background: var(--link-hover-color);
  color: inherit;
  padding: 4px 2px 2px;
  margin: -2px;
}

.project-desc-container {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.project-desc  { flex-basis: content; }

.container {
  min-height: calc(100vh - 2px);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.container  { max-width: 100%;  margin: 0 auto; }
@media (min-width: 42ch) {
  .container  { max-width: 42ch; }
  .nav-bar  { flex-flow: column nowrap; }
  .nav-list  { overflow: auto; }
  .form-control  { width: auto; }
  .nav-link  { display: block; }
  .two-column  { flex-flow: column wrap-reverse; }
  .col-img img  { margin: 1rem auto; }
  .project-list-header  { flex-flow: column wrap; }
  .project-list-content-container  { flex-flow: column wrap; }
}
@media (min-width: 59ch) {
  .container  { max-width: 59ch; }
  .nav-bar  { flex-flow: row wrap; }
  .nav-list  { overflow: hidden; }
  .nav-brand  { font-size: 1.4rem; }
  .form-control  { width: 10ch; }
  .nav-link  { display: inline-block; }
  .two-column  { flex-flow: row nowrap; }
  .col-img img  { margin: 0 auto; }
  .project-list-header  { flex-flow: column wrap; }
  .project-list-content-container  { flex-flow: column wrap; }
}
@media (min-width: 76ch) {  /* TODO: remove redundant?? */
  .container  { max-width: 76ch; }
  .nav-bar  { flex-flow: row wrap; }
  .nav-list  { overflow: hidden; }
  .nav-brand  { font-size: 1.6rem; }
  .form-control  { width: 13ch; }
  .nav-link  { display: inline-block; }
  .two-column  { flex-flow: row nowrap; }
  .project-list-header  { flex-flow: column wrap; }
  .project-list-content-container  { flex-flow: column wrap; }
}
@media (min-width: 93ch) {
  .container  { max-width: 93ch; }
  .nav-bar  { flex-flow: row wrap; }
  .nav-list  { overflow: hidden; }
  .nav-brand  { font-size: 1.8rem; }
  .form-control  { width: 16ch; }
  .nav-link  { display: inline-block; }
  .two-column  { flex-flow: row nowrap; }
  .project-list-header  { flex-flow: row nowrap; }
  .project-list-content-container  { flex-flow: row nowrap; }
}