/* keroserene css stuff */
@font-face {  /* Custom font ;) */
  font-family: 'Eurostile'; src: url('eurostile.ttf') format('truetype');
}
@font-face {  /* Custom font ;) */
  font-family: 'Eurostile-Bold'; src: url('eurostile-bold-extended.otf') format('truetype');
}
@font-face {
  font-family: 'Baskerville'; src: url('baskerville.ttf') format('truetype');
}
.hidden { opacity: 0.0 !important; }

html, body {
  position: relative;
  background-color: #000;
  color: #999;
  font-size: 120%;
  font-family: Eurostile, sans-serif;
  margin: 0; padding: 0; text-align: center;

  -webkit-transition: all 0.33s;
  -moz-transition: all 0.23s;
  -o-transition: all 0.33s;
  transition: all 0.33s;

}
a { color: #b8d; text-decoration: none; }
a:hover, a:focus { color: #fef; outline: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'eurostile-bold';
  letter-spacing: 2px;
  padding-top: 10px;
  font-variant: small-caps;
  cursor: default;
}
h1 {
  font-weight: 100; font-size: 150%; color: #888; letter-spacing: 10px;
  font-variant: small-caps;
  text-align: center;
  padding-bottom: 1rem;
}
h2 {
  font-size: 150%; font-weight: 100;
  border-top: 1px solid #333; padding-top: 8px; }
h3 { font-size: 130%; color: #aab; margin-top: 16px; font-weight: 100; }
h4 { padding: 0; }

p { padding-bottom: 10px; }
ul { list-style: square; padding: 0 20px; }
ol { padding: 0 20px; }
li { padding: 0; line-height: 100%; }
div.item, a, .thumb, p {
  -webkit-transition: all 0.23s !important;
  -moz-transition: all 0.23s !important;
  -o-transition: all 0.23s !important;
  transition: all 0.23s !important;
}

.index {
  position: fixed;
  width: 100%;
  margin-top: 17rem;
  -webkit-transition: all 0.23s !important;
  -moz-transition: all 0.23s !important;
  -o-transition: all 0.23s !important;
  transition: all 0.23s !important;
  z-index: 1000;
}
.index.opened {
  position: fixed;
  margin-top: 0;;
  height: 6rem;
  top: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.95);
  box-shadow: 0 1rem 5rem #000;
}

.content {
  margin: auto;
  // margin-top: 17rem;
  opacity: 1.0;
  -webkit-transition: all 0.23s !important;
  -moz-transition: all 0.23s !important;
  -o-transition: all 0.23s !important;
  transition: all 0.23s !important;
}
.content.loading {
  opacity: 0.0;
}

#left {
  position: fixed; padding: 32px 0; width: 200px;
  height: 100%; text-align: right;
  background-color: #000;
  z-index: 10;
}
#left:hover {
  box-shadow: 5px 0px 0px 0px #303;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
}
#left h1 { padding-right: 30px; letter-spacing: -1px; color: #545; }

.press-mention {
  width: 400px;
  opacity: 0.8;
} .press-mention:hover {
  opacity: 1;
}
.press-mentions {
}
.press-mentions a {
  display: inline-block;
  width: 120px;
  margin: 2rem;
}

/* Icon-based navigation bar. */
#nav {
  position: relative;
  margin-top: 2rem;
  -webkit-transition: all 0.43s !important;
  -moz-transition: all 0.43s !important;
  -o-transition: all 0.43s !important;
  transition: all 0.43s !important;
}
.headshot {
  width: 180px; height: auto;
  border: 1px solid #333; padding: 2px;
  border-radius: 100%;
  text-align: center;
  margin-top: 1rem;
  -webkit-transition: all 0.33s;
  -moz-transition: all 0.23s;
  -o-transition: all 0.33s;
  transition: all 0.33s;
}
.opened .headshot:hover {
  box-shadow: 0px 0px 15px #faf;
}
.opened .headshot {
  width: 100px;
  padding: 0rem;
  // display: inline-block;
  margin: 0rem;
  margin-bottom: -100px;
  cursor: pointer;
}
.opened #nav {
  vertical-align: top;
  margin-top: 0rem;
  height: 0;
}
.nav-spacer {
  display: inline-block;
  width: 0px;
}
.opened .nav-spacer { width: 100px; }

.icon-link {
  display: inline-block;
  // display: inline-table;
  // font-size: 4rem;
  vertical-align: middle;
  color: #fff;
  height: 5rem;
  width: 6rem;
  // padding: 1rem;
  background-size: 3rem;
  background-position: center;
  background-repeat: no-repeat;
}
.opened .icon-link {
  width: 4rem;
  background-size: 2rem;
}
/*.icon-link img {
  width: inherit;
  padding: 8px;
}*/

a.icon-link { opacity: 0.4; }
a:focus.icon-link { opacity: 0.75; outline: none; }
a:hover.icon-link, a:active.icon-link { opacity: 0.95; }

.icon-link#link-piano { background-image: url('/static/piano2.svg'); }
.icon-link#link-github { background-image: url('/static/github.png'); }
.icon-link#link-quill { background-image: url('/static/feather.png'); }
.icon-link#link-art { background-image: url('/static/art.png'); }
.icon-link#link-instagram { background-image: url('/static/instagram.svg'); }
.icon-link#link-twitter { background-image: url('/static/tt.png'); }
.icon-link#link-calendly { background-image: url('/static/calendar.svg'); }
.icon-link#link-gpg { background-image: url('/static/key.svg'); }


.writing-entry {
  display: inline-block;
  width: 49%;
  // border: 1px solid #222;
  margin-bottom: 1.5rem;
  vertical-align: top;
  height: 12rem;
  text-align: center;
  color: #aaa;
  font-size: 1rem;
  // font-variant: small-caps;
} .writing-entry:hover {
  opacity: 0.8;
}
.writing-entry img {
  border-radius: 1rem;
  height: 10rem;
  object-fit: cover;
  max-width: 23rem;
  display: block;
}

.writing-return {
  background-image: url('/static/feather.png');
  display: block;
  background-repeat: no-repeat;
  height: 2rem;
  background-size: contain;
  padding-left: 3rem;
  font-size: 0.8rem;
}

/* content details */

.subtitle {
  color: #858; font-size: 90%;
  text-align: center;
}
.writing {
  text-align: left;
  list-style: none;
  line-height: 150%;
  letter-spacing: -0.5px;
}
.writing li {
  padding: 2px;
}
#wordcount {
  border: 1px solid #223;
  padding: 8px 16px;
  display: inline-block;
  color: #223;
}
#wordcount:hover { color: #88c; }

.pic {  max-width: 100%; border: 1px solid #858; padding: 1px; }
.smallpic { height: 300px; float: right; margin: 8px; }
#content {
  max-width: 600px;
  margin: auto;
  padding: 32px 64px 96px;
  cursor: default;
}
#content-left {
  width: 600px;
}
#content-right {
  position: absolute;
  margin-right: 0;
  width: 50%;
}
.item {
  display: inline-block; background-color: #fcfcfc;
  position: relative;
  margin: 12px; padding: 8px; border: 1px solid #eee;
  text-align: center;
  vertical-align: top;
  min-height: 200px; width: auto;
}
.item img { height: 200px; width: auto; margin: auto; }
.screenshot {
  display: block; width: 200px; padding: 0;
}
.figure { width: 100%; margin: 20px 0; }


img.thumb {
  border: 1px solid #212;
  padding: 1px;
  opacity: 0.8;
  width: auto !important;
}
.thumb:hover {
  opacity: 1;
  border-color: #313;
}

.gallery {
  overflow: scroll;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.essay img.thumb {
  // width: 50%;
}

.code {
  display: block;
  font-family: monospace;
  border: 1px solid #333;
  font-size: 10px; color: #fcf;
  margin: 8px 0; padding: 4px 8px;
  text-align: left;
  background-color: #000;
}

/* Details at the bottom of a post. */
.deets {
  border-top: 1px solid #222; color: #666;
  margin: 38px 0 0 0;
  padding: 4px;
  line-height: 1.5em; letter-spacing: 2px;
  text-align: left; font-size: 12px;
}
.bib {
  font-size: 11px;
  padding-bottom: 100px;
}
.date {
  color: #888; font-size: 11px;
  letter-spacing: 3px;
  margin: 8px 0;
  position: absolute;
  width: 100%;
  bottom: -14px;
}

/* Message at the bottom of the page. */
.last-update {
  position: fixed;
  bottom: 0; left: 0;width: 100%;
  font-size: 50%;
  color: #444; cursor: default;
  letter-spacing: 0px; text-align: center;
  background-color: rgba(0,0,0,0.95);
  margin: 0;
  padding: 1rem 0;
}
.last-update:hover { color: #424; }

#msg {
  position: fixed; z-index: 10;
  top: 0; right: 0; margin: 8px; padding: 8px;
  background-color: #333; color: #bbb; font-size: 12px;
}

.tooltip-row {
  position: absolute;
  display: block;
}
.opened .tooltip-row {
  font-size: 50%;
  margin-left: -0.2rem;
}
#tooltip {
  position: absolute; left: 50%;
  // margin-top: 8px; padding: 8px;
  background-color: #000; font-size: 90%;
  border-top: 1px solid #656; color: #a9a;
  pointer-events: none; opacity: 0.8;
  font-variant: small-caps;
  -webkit-transition: left 0.1s, opacity 0.23s;
  -moz-transition: left 0.1s, opacity 0.23s;
  -o-transition: left 0.1s opacity 0.23s;
  transition: left 0.1s, opacity 0.23s;
}

#preview {
  border: 1px solid #333;
  position: fixed; right: 0;
  display: block;
  width: 17rem;
  margin: auto;
  -webkit-transition: all 0.33s;
  -moz-transition: all 0.23s;
  -o-transition: all 0.33s;
  transition: all 0.33s;
  // text-align: left;
  overflow: scroll;
  cursor: default;
}
.preview-hidden {
  font-size: 1px;
  text-align: center;
  opacity: 0;
}
.gpg {
  font-size: 6px;
  text-align: left;
  overflow: scroll;
  max-height: 10rem;
  opacity: 100;
}
.piano {
  opacity: 100;
  // pointer-events: none;
  font-size: 1rem;
}

.fold {
  position: absolute;
  display: block;
  height: 100vh;
  width: 100%;
  padding-top: 84vh;
  padding-bottom: 8rem;
  // font-family: Baskerville, serif;
  font-family: eurostile-bold, serif;
  font-variant: small-caps;
  background-image: none;
  // background-image: url('earth-from-space.png');
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100;
}
.fold-overlay {
  position: fixed;
  top: 0;
  background-color: #000;
  opacity: 0.95;
  display: block;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
.fold-bg {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('earth-from-space.png');
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

.essay {
  // font-family: Baskerville, serif;
  font-family: eurostile, serif;
  width: 36rem;
  margin: auto;
  text-align: justify;
  margin-top: 8rem;
  cursor: default;
  padding-bottom: 14rem;
}
.essay img {
  margin: auto;
  width: 100%;
}
img.diagram {
  margin: auto;
  width: 80%;
}
.diagram-left {
  width: 40%;
}
.diagram-right {
  width: 49%;
}
img.inline {
  width: auto;
}

.footer {
  font-family: Baskerville, serif;
  font-size: 60%;
  color: #666;
}

.footnotes {
  margin-top: 4rem;
  font-size: 90%;
  color: #888;
}

.twitter-tweet { margin: auto; }

.serene-name {
  font-family: "Baskerville" sans-serif;
  opacity: 0.0;
}
.serene-subtext {
  // font-family: "Baskerville" sans-serif;
  font-family: "monospace" sans-serif;
  color: #444;
  cursor: default;
}
.opened .serene-name { display: none; }
.opened .serene-subtext { display: none; }
.fade-in {
  opacity: 0.0;
  -webkit-transition: all 1.53s;
  -moz-transition: all 1.53s;
  -o-transition: all 1.53s;
  transition: all 1.53s;
} .fade-in.active {
  opacity: 1;
}

.hamburger { display: none;
  height: 2rem;
  background-image: url('/static/hamburger.svg');
  background-size: cover;
}
.hamburger.expanded {
  transform: rotate(90deg);
  // background-image: url('/static/exit.svg');
}
.nav-text { display: none; }


/* Expansion framework */
.expandable {
  // max-height: 3rem;
  position: relative;
  // padding-top: 2rem;
  // padding-bottom: 1rem;
   -webkit-transition: opacity 0.66s;
           transition: opacity 0.66s;
   -webkit-transition: all 0.66s;
           transition: all 0.66s;

  cursor: ns-resize;
}
.active.expandable {
  max-height: 100%;
  height: auto;
  // flex:1;
  padding-left: 1rem;
}
.active.expandable.comments { padding: 0; }
.expandable:hover {
  background-color: rgba(90,90,95,0.15);
  padding-left: 1rem;
}
.expandable:after {
  /* Unicode character for "plus" sign (+) */
  content: 'click to expand \02795';
  color: #888;
  float: right;
  margin-right: 1rem;
  font-variant: small-caps;
   -webkit-transition: all 0.66s;
           transition: all 0.66s;
  position: absolute;
  margin-top: 0rem;
  top: 0;
  right: 0;
  font-size: 80%;
}
.expandable:hover:after {
  color: #fff;
  padding-right: 3rem;
}
.expandable.active:after {
  content: 'click to collapse \1F5D5';
}
.expandable-content {
  display: none;
  padding: 2rem;
  font-size: 90%;
}
.comments .expandable-content,
.post-meta .expandable-content{
  padding: 0;
}
.expandable.active {   // max-height: 5rem; }
.active .expandable-content {
  display: block;
}


@media (max-width: 760px) {
  html { font-size: 100%; }
  body {
    font-size: 1rem;
  }
  .content {
    margin-top: 1rem;
    overflow: scroll;
  }
  .fold {
    width: 100%;
    padding-top: 84vh;
  }
  .fold-bg {
    background-image: url('boganyibg.png');
    background-position: top;
  }
  .index {
    position: fixed;
    width:100%;
    top: 0;
    margin-top: 10rem;
  }.index.opened { margin-top: 0rem; height: 5rem; }
  #nav {
    position: fixed;
    margin-top: 0rem;
    background-color: rgba(16,0,18,0.95);
    top: 0;
    right: -100%;
    border-left: 1px solid #333;
    padding-top: 6rem;
    width: 75%;
    height: 100% !important;
    overflow: scroll;
  }
  #nav.expanded {
    right: 0;
    // z-index: 100;
  }

  .icon-link, .opened .icon-link {
    position: relative;
    display: block;
    height: 5rem;
    padding: 0 1.5rem;
    background-size: 2.3rem;
  }

  .hamburger, .icon-link.hamburger {
    z-index: 1000;
    position: fixed;
    display: block;
    top: 0rem; right: 0rem;
    height: 3rem;
    width: 3rem;
    padding: 1rem;
    background-size: 2rem;
  }
  .opened .hamburger {
    display: block;
  }

  .nav-text {
    display: inline-block;
    position: absolute;
    font-size: 1.2rem;
    top: 2rem;
    margin: 0 4rem;
    font-variant: small-caps;
    width: max-content;
  }
  .opened .headshot {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 14%;
    height: auto;
    text-align: center;
  }
  .diagram-left, .diagram-right {
    width: 100%;
  }
  .nav-spacer { display: none; }
  .essay {
    width: fit-content;
    font-size: 1.1rem;
    padding: 0.8rem;
    margin-top: 1.5rem;
  }

  .serene-name {
    display: block !important;
    position: fixed;
    width: 100%;
    font-size: 75%;
    padding: 0.7rem 0;
    z-index: -100;
  }
  .opened .serene-name { z-index: 200; }
  .tooltip-row { display: none; }

  .expandable:after {
    /* Unicode character for "plus" sign (+) */
    content: '\02795';
  }
  .expandable.active:after {
    content: '\1F5D5';
  }

  .writing-entry { width: 100%; }
}