*, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body, html {font-size:100%; padding:0; margin:0;}

/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after, .grid:before, .grid:after {content:" "; display: table;}
.clearfix:after, .grid:after {clear:both;}

/* VARIABLES ------------------------- */
/* =todo: Edit variable names, tweak colors, write styleswitcher blog post. */
html[data-theme='light'] {  
  --bg: #f4f4f5;
  --text-color: #111;
  --link: #1565c0;
  --visited: #7215c0;
  --link-active: #fce4ec;
  --link-border:#e5e5e5;
  --border:#e2e2e2;
  --textarea-bg: #fafafa;
  --textarea-text: #111;
  --code-bg: #eee;
  --code-text: #111;
  --quiet: #888;
  --darkish: #353535;
  --dark: #444;
  --thover: #fce4ec;
  --darkblack: rgba(0,0,0,0.8);
  --minRangeValue: 280px; /* For gallery view */
  --activebutton: rgba(21,101,192,0.10);
  --tback: rgba(5,5,5,0.00);
  --note: #fff4a2;
  --button-color: #1d1d1d;
}

html[data-theme='dark'] {
  --bg: #1e1d1c;
  --text-color: #f5f5f5;
  --link: #fcca00;
  --visited: #f99663;
  --link-active: #782800;
  --link-border:#4e3211;
  --border: #474747;
  --textarea-bg: #111;
  --textarea-text: #fafafa;
  --code-bg: #585858;
  --code-text: #fafafa;
  --quiet: #aaa;
  --darkish: #c9c9c9;
  --dark: #b6b6b6;
  --thover: #4a4345;
  --darkblack: rgba(255,255,255,0.9);
  --minRangeValue: 280px; /* For gallery view */
  --activebutton: rgba(21,101,192,0.10);
  --tback: rgba(5,5,5,0.00);
  --note: #5e2e20;
  --button-color: #e5e5e5;
}

body {
  font-family: 'helvetica neue', helvetica, 'open sans', arial, sans-serif;   
  color:var(--text-color);
  background-color: var(--bg) !important;
/*  background: url("/img/paper-transparent.png") 0 0 0.1 !important;*/
  padding:15px 3px 60px;
  text-align:center;
}

a {color: var(--link); border-bottom:2px solid var(--link-border); text-decoration:none;}
a:visited {color:var(--link);}
body#archive .nomarginlist a:visited {color:var(--visited) !important;}
a:hover,
a:active {
  color: var(--link) !important;
  background: var(--link-active);
  border-color:var(--link-border);
  border-radius:5px;
}



a#switch {color:var(--link);}
a#switch:hover {cursor:pointer;}

.page :target, .note {background:var(--note);} /* Shine a light on HTML fragments. */
body#notebook #nav-notebook,
body#work #nav-work, 
body#prints #nav-prints,
body#code #nav-code,
body#about #nav-about,
body#links #nav-links,
body#info #nav-info,
body#shop #nav-shop,
body#when #nav-archive,
body#archive #nav-archive,
body#what #nav-archive,
body#where #nav-where,
body#what #nav-what-computergames,
body#what #nav-what-education
{color:var(--link) !important; font-weight:bold;}

body#home #nav-home,
body#photography #nav-photography, 
body#design #nav-design,
body#illustration #nav-illustration,
body#writing #nav-writing {color:var(--text-color) !important; font-weight:bold; border-top:5px solid var(--border);}

nav a {font-weight:normal;}
ul.navlist {margin:-8px 0 12px -7px; list-style-type:none;}
ul.navlist li {display:inline-block; text-transform:uppercase; font-size:13.5px; letter-spacing:1.5px;}
ul.navlist a {display:inline-block; padding:5px 9px; font-weight:normal;}

ul.navlist a:hover,
ul.navlist a.here,
ul.navlist a.here:hover {color:var(-text);}

img {display:block; margin:0 0 10px;}
a.postimglink, .noborder {border:0 !important;}
img.postimg {max-width:100% !important; margin:0 auto 15px;}
img.postimg.tall {max-width:100% !important;}

/* =para =line */
p, li, dt, dd, input {font-size:18px; line-height:27px;}
p {margin:0 0 15px;}
p + p {margin:8px 0 15px;}
dd {padding:0; margin:0;}
blockquote {padding:0 0 0 15px; border-left:3px solid var(--border); margin:15px 0;}
blockquote + p, blockquote footer {margin-bottom:20px;}
.imgborder {border:1px solid var(--border);}
h3 {font-size:19px; font-weight:bold; margin:20px 0 6px;}
ul, ol {padding:0; margin-left:20px;}
ol {text-align:left !important;}
ul.nomarginlist {padding:0; list-style:none; margin:0 0 30px;}
.nomarginlist li {line-height:30px;}
ol li img {margin-bottom:1em;}
ol {list-style-type:decimal;}
ol ol {list-style-type: lower-alpha;}
ol ol ol {list-style-type: lower-roman;}
dl.linkedlist {margin:0 0 10px;}
dt {margin-bottom:12px; text-transform:uppercase; font-size:17px; letter-spacing:1px;}
dt a {display:inline !important; font-weight:normal;}
dt:hover a.plink {color:var(--text-color) !important;}
a.plink {color:var(--link); padding:1px 6px; border:0;}
form#search {margin-bottom:1em;}
.searchtext {padding:5px;}
.searchbutton {color:var(--button-color) !important; padding:5px 10px; margin-top:2px; border:1px solid var(--link-border) !important; background:var(--bg) !important; font-size:18px;}
.searchbutton:hover {cursor:pointer;}
hr {height:2px; background:var(--border) !important; margin:30px 0; border:none 0; display:block; clear:both; color:var(--border) !important;}

input {background:var(--code-bg) !important; border:var(--link-color) !important;}

div.homecontent {float:left; margin:0 10px 10px 0;}
aside.sidebar {max-width:20em; float:left;}
aside.sidebar li {font-size:18px; line-height:28px;}
aside.sidebar li a {border-width:1px;}
aside.sidebar h3 a {border-bottom:1px solid #ccc;}

div.videobox {padding:7px 8px 9px;}
div.videobox p {font-size:0.85em; line-height:1.35em;}

/* http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/*/
.fluidmedia {position:relative; padding-bottom:56.25%; /*proportionvaluetoaspectratio16:9(9/16=0.5625or56.25%)*/ padding-top:5px; height:0; overflow:hidden;} .fluidmediaiframe {position:absolute; top:0; left:0; width:100%; height:100%;}

header,
div.page, 
footer {margin:0 auto; text-align:center;}
footer {text-align:center !important; margin:0 auto;}
blockquote footer {text-align:left !important;}
header small a {font-weight:normal;}
blockquote footer {font-weight:bold; padding:0; margin-bottom:2rem; color:var(--dark);}
blockquote footer em {font-weight:normal;}

div.page {padding:0 10px 15px; text-align:left !important; max-width:885px;}
body#notebook div.page, 
body#archive div.page,
body.single div.page {max-width:885px !important;}
body#archive div.page {text-align:center !important;}
div.entry {margin:0 0 5em; padding:0 30px;}
body#work div.entry {float:left; margin-bottom:1em;}
div.entry img {max-width:800px;}
body.fullwidth div.page {max-width:100% !important;}
body.fullwidth footer {max-width:885px; text-align:center;}
body.single div.page p,
body.single div.page li,
body.single div.page dt,
body.single div.page dd,
body.single div.page figcaption, body.single div.page blockquote, div.entry p, div.entry li, div.entry dd {max-width:35em;}
body#links h1, body#links p, body#links li {text-align:center !important; max-width:100%;}
div.meta {padding:0;}
body.single div.page,
.galleryheading {padding:0 10px 15px;}
div.intro p {margin:0 0 15px;}
a.introlink {padding:inherit 5px; margin:0 7px 0 0; font-weight:normal;}
a.homelink {margin-right:5px; color:var(--link);}
body.single header {padding:0;}
header {margin:0 0 4px !important; padding:0;}
header a {border:0; background:transparent;}
.logo {padding-top:18px; border-top:5px transparent solid;} 
header h1 {display:inline-block; font-size:23px; line-height:33px; margin:-2px 10px 9px 0; font-weight:normal;}
header h1 a {padding:18px; border-top:5px transparent solid;}
header h1 em {font-size:20px; padding:0 10px 0 0;}
header h1 small i {color:var(--quiet);}
.slogan a {font-weight:normal; padding:5px 0;}
h1 {margin:15px 0 5px; font-size:23px;}
h1.sectiontitle {font-size:23px; margin-bottom:48px 0 0;}
body.notebookmonth div.entry, body.notebookmonth div.entry * {max-width:100% !important;}
h4 {margin:0 0 7px; font-size:20px; line-height:26px; font-weight:bold;}
h4 a {color:var(--text-color) !important; border:0;}
h4.captiontitle a {font-weight:normal !important;}
footer {max-width:885px; clear:both; padding:0 10px 0; text-align:left;}
footer hr {margin:0 0 8px;}
h2 {font-size:20px; margin:20px 0 10px;}
div#picture {width:60%; float:left; padding-right:14px; padding-bottom:20px;}
div#description {width:38%; float:left; padding-left:28px;}

nav.pagination {margin-bottom:40px; clear:both !important; font-size:18px;}
nav.pagination a {border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #fafafa; border-left:1px solid #fafafa; padding:15px 20px; background:#eee;}


figure {margin:0 0 20px; padding:0;}
.caption, figcaption {margin:5px 0 20px; font-size:18px; font-style:normal;}
div.gcaption {display:none;}

.hero {margin:1rem;}
.largelink {font-size:36px; font-weight:normal; line-height:36px; border:0; font-style:normal; font-weight:900;} /* mainly in all-work.html */

/* =Thumbnail lists ----------------- */

ul.thumbnails li {display:inline-block !important; padding:10px !important; vertical-align:middle;}
ul.thumbnails li img {border-radius:9px;}
ul.thumbnails li:hover {background: var(--thover);}

li.smallthumb {width:100px !important;}
li.smallthumb.wide {width:160px !important;}
/* Masonry grid */
.grid {
  list-style:none;
  margin:0 auto;
  padding:0;
}
.grid li {
  margin-bottom: 10px;
  padding:0 10px 10px 0;
  width:32%;
}
.grid li.wide:first-child {width:64.83%;} /* Entries with `wide: true` parameter */
.grid li img {
  display: block;
  width: 100%;
  height: auto !important;
  opacity:1;
}

table {margin-left: 0; margin-bottom: 15px;}
td {
padding: 0 1.5em 0 0;
line-height: 28px;
border: 0 solid #666;
}
th {
border-bottom: 0px solid #666;
padding: 0 1.5em 0 0;
font-weight: normal;
font-size: 14px;
letter-spacing:2px;
line-height: 1em;
text-transform: uppercase;
}

details summary {margin:1em 0;}

.clear {clear:both !important;} /* http://web.simmons.edu/~grovesd/comm328/modules/layout/clearfix */
.clearfix:after {content:""; display:block; clear:both;}
.nobottommargin {margin-bottom:0 !important;}
.nounderline {border:0;}
.pswp__caption__center {float:left !important; font-size:20px !important; line-height:28px !important;}
.pswp__caption__center a {color:#fc0 !important;}
.pswp__caption__center a:hover, .pswp__caption__center a:active {color:var(--text-color) !important;}
.floatleft {float:left; margin:0 20px 10px 0;}
.floatleft img {margin-top:0;}
.floatright img {margin-top:0;}
.shadow {filter:drop-shadow(1px 2px 2px #999);}
.floatright {float:right; margin:0 0 10px 20px;}
.up {}
.center {text-align:center;}
.titleimage {font-weight:normal; font-size:20px; margin:15px auto 0; text-align:center;}
.boom {font-size:72px; margin:0 0 10px; line-height:72px;}
.column2 {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
.quiet {color:var(--quiet);}
.rounded {border-radius:9px;}
.darkish {color:var(--darkish);}
.dark {color:var(--dark);}
.caps {font-size:0.85em; letter-spacing:0.05em; text-transform:uppercase;}
.date {text-transform:uppercase; font-size:13px; letter-spacing:1px; color:var(--dark);}
body.single p.date, body.single h1.title {text-align:center; max-width:100% !important;}
.date a {border:0;}
.normal {font-weight:normal;}
.largerh1 {font-size:40px;}
.bold {font-weight:bold !important;}
h1 small, h2 small {font-weight:normal !important;}
.smalltitle {font-size:22px; text-transform:uppercase; letter-spacing:1px; margin:20px 0 0; padding:0 10px;}
.whatcol {float:left; margin-right:60px; margin-top:20px;}
.sharecol {float:left; margin-top:20px;}
.whatcol a, .sharecol a {font-weight:normal !important; padding:0 3px;}
.blacklink {color:var(--text-color);}
.end {padding:20px 0 0; margin:0;}
.capitalize {text-transform:capitalize;}
.nomargin {margin:0 !important;}
.readmore {margin:-15px 0 0 !important;}
sup {line-height:0;}
code {font-family:"monaco", monospace;}

body.notebookhome .floatleft, body.notebookhome .floatright {float:none; margin:0 0 15px;}

/*  GALLERY CODE - Thanks to George Martsoukos:
      https://webdesign.tutsplus.com/tutorials/how-to-build-a-filterable-thumbnail-layout-with-css-grid-flexbox-and-javascript--cms-33242
      https://georgemartsoukos.com/ 
  
    =nb: Don’t forget to include the JS script in partials/gallery-script.html on the bottom gallery pages.
*/

/*section.gallery {margin-left:-1rem;}*/
section.gallery figure, section.gallery figcaption, section.gallery img {padding:0; margin:0;}
section.gallery figure {padding:1rem; margin-bottom:1rem;}
section.gallery figcaption {margin:0.5em 0 1em;}
section.gallery p {margin:0 !important; max-width:30em;}
section.gallery button {cursor: pointer; background: none;}
section.gallery img {display: block; max-width: 100%; height: auto; border-radius:9px;}
section.gallery ol, section.gallery ul {list-style: none;}
/*section.gallery li {margin:0 !important; padding:0 !important;}*/
section.gallery {padding: 0 0rem;}
/*.container {max-width: 1030px; margin: 0 auto;}*/
.container {margin-left:-1rem;}
.d-none {display: none;}

/* TOOLBAR ------------------------- */
.toolbar {display: flex; /* justify-content: space-between;*/ justify-content: center; align-items: center;}
.toolbar .search-wrapper {position: relative; padding-left:1rem;}
.toolbar input[type="search"] {font-size:1.1rem; border:none; border-bottom:1px solid; padding-bottom:3px;}
.toolbar ::placeholder {color: var(--gray);}
.toolbar .counter {position:absolute; left:0; top:calc(100% + 5px); font-size:0.9rem; color:var(--gray);}
.view-options {display:flex; align-items:center;}
.view-options li:not(:last-child) {margin-right: 0.5rem;}
.view-options li:hover {background: var(--thover);}
.view-options button {padding: 2px; border:0; background-color:transparent; border-radius:5px;}
.view-options .active button {background-color: var(--activebutton);}
ul.view-options li button span {color: var(--link);font-size:16px !important; margin:0 3px; padding:0 3px;}

/* IMAGE LIST ------------------------- */
.image-list {margin: 1rem 0 3rem; padding:0;}
.image-list li {background: var(--tback); color: var(--darkblack); border-radius:9px;}
.image-list li:hover {background: var(--thover);}
.image-list p:last-child {margin-top: 0.5rem;}

/* GRID VIEW ------------------------- */
.grid-view {display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(var(--minRangeValue), 1fr));}
.grid-view figcaption {padding: 0rem;}

/* LIST VIEW ------------------------- */
.list-view {margin: 1rem auto 3rem; max-width:885px;}
.list-view li + li {margin-top: 1.5rem;}
.list-view figure {display:grid; grid-gap:1.5rem; grid-template-columns:150px 1fr; align-items:center;}

/* MEDIA QUERIES ------------------------- */
@media screen and (max-width: 900px) {
  .toolbar input[type="range"] {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .grid-view li {
    text-align: center;
    padding: 0.5rem;
  }
  .grid-view figcaption {
    padding: 0.5rem 0 0;
  }
}


/* Gotta be responsive */
@media only screen and (max-width: 1024px) {
  .grid li.wide:first-child {width:97%;}
}

@media screen and (max-width:720px) {
  .grid li, .grid li.wide:first-child {width:100%;}
  img {max-width: 100% !important; height: auto !important;}
  div#picture, div#description {width:100%;}
  div#description {padding-left:0;}
  div#picture {padding-right:0;}
  header {margin-bottom:15px;}
  header h1 a {padding-top:0;}
  .floatleft, .floatright {width:97% !important; float:none; margin:10px 0 20px !important;}
  body#home #nav-home, body#photography #nav-photography, body#design #nav-design,
  body#illustration #nav-illustration, body#writing #nav-writing {border-top:0 !important;}
}

@media screen and (max-width:2000px) {
  body.single img {max-width: 100%; height: auto !important;}
}

img.tall {max-width:auto !important;}