@media all {html {font-size: 16px;}}
@media all and (max-width:1000px){html {font-size: 16px;}}
@media all and (max-width:970.0px){html {font-size: 15.5px;}}
@media all and (max-width:940.0px){html {font-size: 15.0px;}}
@media all and (max-width:910.0px){html {font-size: 14.5px;}}
@media all and (max-width:880.0px){html {font-size: 14.0px;}}
@media all and (max-width:850.0px){html {font-size: 13.5px;}}
@media all and (max-width:820.0px){html {font-size: 13.0px;}}
@media all and (max-width:790.0px){html {font-size: 12.5px;}}
@media all and (max-width:760.0px){html {font-size: 12.0px;}}
@media all and (max-width:730.0px){html {font-size: 11.5px;}}
@media all and (max-width:700.0px){html {font-size: 11.0px;}}
@media all and (max-width:670.0px){html {font-size: 10.5px;}}
@media all and (max-width:640.0px){html {font-size: 10.0px;}}
@media all and (max-width:610.0px){html {font-size: 9.5px;}}
@media all and (max-width:580.0px){html {font-size: 9.0px;}}
@media all and (max-width:550.0px){html {font-size: 8.5px;}}
@media all and (max-width:520.0px){html {font-size: 8.0px;}}

* {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  box-sizing: border-box;
  color: inherit;
  text-decoration: inherit;
}

body {
  text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1;

  text-rendering: optimizeLegibility;
font-feature-settings: 'liga' 1;

  font-family: "cooper-hewitt";
  font-size: 1.5rem;
  padding: 3rem;
  padding-top: 0rem;
  max-width: 1000px;
  margin: auto;
}


row {
  width: 100%;
  display: grid;
  grid-template-columns: [left] 13rem [right] auto;
  align-items: baseline;
  border: 0px solid red;
}

row#logo {
  font-size: 140%;
  border: none;
  margin: 0;
  padding: 0;
  margin-top: 0.5rem;
  margin-bottom: -0.5rem;
}

div#logo-container {
  white-space: nowrap; /* keeps logo and word on same line */
}

row#samples {
   align-items: flex-start;
}

row.one-column col-2 > li {
  width: 100%;
}

row#logo * {
  margin-bottom: 0;
  padding-bottom: 0;
}

row#logo a {
  color: inherit;
}

row#logo a:hover {
  text-decoration: inherit;
}

row#bottom {
  padding-top: 0.75rem;
  font-size: 70%;
}

row#bottom li a {
  display: inline;
}

row#bottom a {
  color: rgb(6, 121, 167);
}

row#book {
   align-items: flex-start;
  }



row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #ccc;
}



col-1, col-2 {
  display: block;
  border: 0px solid green;
  margin-bottom: 0.5rem;
}

col-1 + col-2 {
  margin-left: 1rem;
}

col-1 {
  grid-column: left;
  font-size: 115%;
  text-align: right;
  padding-right: 1rem;
}

col-2 {
  grid-column: right;
  display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

pre {
  white-space: pre-wrap;
}

article#home col-2 div.truncate {
  opacity: 0.6;
}

row#book col-2 {
  flex-direction: row;
  flex-wrap: wrap;
}

img#logo {
  display: inline-block;
  width: 2.7rem;
  transform: translate(0,0.15em);
  margin-right: 0.25rem;
}


img.cover {
  width: 5rem;
  height: 6.2rem;
  float: left;
  margin-right: 1rem;
  opacity: 0.6;
}

div.book {
  display: flex;
  width: 50%;
}

pre, div.pygments {
  font-size: 1rem;
  line-height: 1.5rem;
}

tt, pre, code {
  font-family: fira-mono;
}


code {
    font-size: 90%;
    background: #fcfcfc;
    padding: 0rem 0.2rem 0rem 0.2rem;
    color: #555;
    font-weight: bolder;
}

div.pygments {
      background: #fcfcfc;
    padding: 0.5rem;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 1.2rem;
}


pre a {
  font-weight: bolder;
}

.gallery {
  height: 18rem;
  width: 100%;
}

.gallery button {
  position: absolute;
  top: inherit;
  bottom: -2rem;
  width: 3rem;
  opacity: 0.3;
}

.gallery button.previous {
  left: -1rem;
}

.gallery button.next {
  right: -1rem;
}

.gallery-cell {
  width: 100%;
  height: 100%;
}




download-button {
  display:inline-block;
  background: rgb(6, 121, 167);
  color: white;
  border: 0.5rem solid rgb(6, 121, 167);
  padding: 0.4rem;
  padding-bottom: 0rem;
}

empty-button {
 display:inline-block;
  border-top: 0.5rem solid white;
 padding-top: 0.4rem;
}
}


download-button:hover {
  opacity: 0.6;
}

download-button:active {
  opacity: 1;
}

p, li, div.pygments {
    margin-bottom: 1rem;
    line-height: 1.4;
}

a {
  color: rgb(6, 121, 167);
 /* font-weight: bolder; */ /* reinstate for home css */
}

a:hover {
  opacity: 0.6;
  text-decoration: underline;
}

a:active {
  opacity: 1;
}

a, a:hover {
  transition: color 0.2s;
}


h1, h2, h3, h4, h5, h6 {
    font-family: cooper-hewitt;
    font-weight: inherit;
    margin: 0;
    padding: 0;
}

hr {
  border: 0;
  height: 1.5rem;
}

hr + p {
  border-top: 0.1rem solid #ddd;
  padding-top: 1rem;
}

/* overrides for blog */

article h1 { /* same as anchor color */
  color: rgb(6, 121, 167);
}

article h1 code, article h2 code { background: none;
}

article h2 {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}


article a > code { color: rgb(6, 121, 167);
}

article {
    font-family: charter;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

article blockquote {
  margin-left: 2rem;
  font-style: italic;
}

article.index {
  position: relative;
  margin-bottom: 0.5rem;
}


article div.truncate {
  position: relative;
  height: 25rem;
  overflow: hidden;
  padding-right: 2rem;
  margin-bottom: 0.5rem;
}


article div.truncate:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%);
}

article .date-and-tags {
  font-family: cooper-hewitt;
}

article col-2 {
 flex-direction: column;
}

article row {
  padding-top: 1rem;
}

article footer h2 + h2 {
  margin-top: 1rem;
}

article footer h2 .label {
  font-size: 80%;
  opacity: 0.8;
  padding-right: 0.5em;
}

article.index a.more {
  display: inline-block;
  position: absolute;
  bottom: 1.5rem;
  border: 1px solid rgb(6, 121, 167);
  font-family: cooper-hewitt;
  width: 5rem;
  padding: 0.5rem;
  padding-bottom: 0.25rem;
}

article.index a.more:hover {
  background: rgb(6, 121, 167);
  color: white;
  text-decoration: inherit;
}

article ul {
  margin-left: 1.5rem;
}

ul ul { margin-left: 2rem;
}


/* images notated in markdown */
/* are inside div.figure and have a p.caption afterward */

.figure {
  text-align: center;
  margin-bottom: 1rem;
}

.figure img {
  width: 35rem;
}

.figure p.caption {
  display: none;
}


/* frog seems to hard-code the paginator on index page */
ul.pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border-top: 1px solid #ccc;
}

ul.pagination li {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
  margin: 0;
  padding: 0;
}

ul.pagination li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;

}

ul.pagination li a:hover, ul.pagination li.active a {
  background: rgb(6, 121, 167);
  color: white;
  text-decoration: none;
}

ul.pagination li.active a {
  opacity: 0.6;
}

.pagination .disabled {
  opacity: 0.2;
}


footer + row#bottom {
  margin-top: 0;
}

/* phone & tablet overrides */
@media all and (max-width:550px) {
  html { font-size: 15px; }
  body { padding: 0.75rem; }
  row#logo {
    grid-template-columns: [left] 13rem [right] auto;
    grid-template-rows: inherit;
  }
  row {
    display: grid;
    grid-template-rows: [left] auto [right] auto;
    grid-template-columns: auto;
  }
  col-1 + col-2{ margin: 0; }
  col-1 { text-align: left; }
}









.p { color: #888;}
.c { color: #998; font-style: italic; } /* Comment */
.err { color: #a00; font-style: italic; } /* Error */
.o { color: #000; } /* Operator */
.cm { color: #c97; font-style: italic } /* Comment.Multiline */
.cp { color: #c97; font-style: italic } /* Comment.Preproc */
.c1 { color: #c97; font-style: italic } /* Comment.Single */
.cs { color: #c97; font-style: italic } /* Comment.Special */
.gd { color: #000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000; font-style: italic } /* Generic.Emph */
.gr { color: #a00; } /* Generic.Error */
.gh { color: #999; } /* Generic.Heading */
.gi { color: #000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888; } /* Generic.Output */
.gp { color: #555; } /* Generic.Prompt */
.gs { } /* Generic.Strong */
.gu { color: #aaa; } /* Generic.Subheading */
.gt { color: #a00; } /* Generic.Traceback */
.k { color: #07a; } /* Keyword */
.kc { color: #07a; } /* Keyword.Constant */
.kd { color: #07a; } /* Keyword.Declaration */
.kn { color: #444; } /* Keyword.Namespace */ .kp { color: #07a; } /* Keyword.Pseudo */
.kr { color: #07a; } /* Keyword.Reserved */
.kt { color: #07a; } /* Keyword.Type */
.na { color: #444; } /* Name.Attribute */
.nb { color: #07a; } /* Name.Builtin */
.nc { color: #444; } /* Name.Class */
.no { color: #444; } /* Name.Constant */
.nd { color: #444; } /* Name.Decorator */
.ni { color: #444; } /* Name.Entity */
.ne { color: #444; } /* Name.Exception */
.nf { color: #444; } /* Name.Function */
.nl { color: #444; } /* Name.Label */
.nn { color: #444; } /* Name.Namespace */
.nt { color: #444; } /* Name.Tag */
.nv { color: #444; } /* Name.Variable */
.ow { color: #444; } /* Operator.Word */
.w { color: #bbb; } /* Text.Whitespace */
.m { color: #275; } /* Literal.Number */
.mf { color: #275; } /* Literal.Number.Float */
.mh { color: #275; } /* Literal.Number.Hex */
.mi { color: #275; } /* Literal.Number.Integer */
.mo { color: #275; } /* Literal.Number.Oct */
.s { color: #275;} /* Literal.String */
.sb { color: #275; } /* Literal.String.Backtick */
.sc { color: #275; } /* Literal.String.Char */
.sd { color: #275; } /* Literal.String.Doc */
.s2 { color: #275; } /* Literal.String.Double */
.se { color: #275; } /* Literal.String.Escape */
.sh { color: #275; } /* Literal.String.Heredoc */
.si { color: #275; } /* Literal.String.Interpol */
.sx { color: #275; } /* Literal.String.Other */
.sr { color: #275; } /* Literal.String.Regex */
.s1 { color: #275; } /* Literal.String.Single */
.ss { color: #275; } /* Literal.String.Symbol */
.bp { color: #999; } /* Name.Builtin.Pseudo */
.vc { color: #077; } /* Name.Variable.Class */
.vg { color: #077; } /* Name.Variable.Global */
.vi { color: #077; } /* Name.Variable.Instance */
.il { color: #099; } /* Literal.Number.Integer.Long */