body#k {
  font-family: Ubuntu, Verdana, 'Bitstream Vera Sans', sans-serif;
  color: #fbfbe2;
  background: #86382c;
}
p {
  font-size: 1.1em;
  z-index: 40;
}
a, a:hover, a.page-link, a.page-link:hover {
  color: #00D5B1;
  text-shadow: 1px 1px #4F5049;
}
img.kicon {
  width: 1em;
  height: 1em;
  margin-bottom: 0.2em;
}

footer { font-size: 11px; }
footer a.cc { color: #1F2019; text-shadow: -3px -3px 6px rgb(134,56,44), 2px 2px 1px rgba(254, 216, 51, 0.6); }
footer .cc { color: #1F2019; text-shadow: -3px -3px 3px rgb(134,56,44), 2px 2px 1px rgba(254, 216, 51, 0.2); }
body strong { color: #fbfbe2 }
h1.title, h2.title, h3.title, h4.title, h5.title, h6.title,
h1, h2, h3, h4, h5, h6 { 
  color: #fbdc59;
  z-index: 40;
}
h1 {
  /* text-shadow: 3px 3px #1F2019, 6px 6px #1F2019; */
  text-shadow: 3px 3px #1F2019;
  margin-bottom: 1.6em;
  font-size: 2em
}
h1 span.noshadow { text-shadow: none; }
blockquote {
  color: #e0dfe6;
  background: rgb(0, 64, 137);
  border-left: 5px solid #fbdc59;
  padding: 1.25em 1.5em;
  text-shadow: -2px -2px 2px rgba(99, 161, 241, 0.7), 1px 1px 10px rgba(9,8,7,0.7), 2px 2px 2px rgba(254, 216, 51, 0.05);
}
blockquote b,blockquote strong {
  text-shadow: none;
}
h2 {
  font-size: 1.6em;
  color: #63a1f1;
  text-shadow: -3px -3px 6px rgb(134,56,44), 2px 2px 1px rgba(254, 216, 51, 0.2);
  margin: 0.9em 0.4em 0.4em;
}
h3 { font-size: 1.3em; }
.kblue { color: #63a1f1; }
.kgolden { color: #f1e6a3; }
.kgreen { color: #92d44a; }
h4,h5,h6 { font-size: 1.1em; }
ul.greek { list-style: lower-greek; }
ul.roman { list-style: upper-roman; }
ul.heavenly { list-style: cjk-heavenly-stem; }
ul.earthly { list-style: cjk-earthly-branch; }
.kwhite { color: #fbfbe2; }
.kblack { color: #04041c; }
.kgray { color: #1F2019; }
span#pgpkey { font-size: 0.8em }
.note:hover {
  text-decoration: underline;
  color: #fbdc59;
}
.note {
  color: #1F2019;
  text-decoration: none;
}
section.page h2,
section.page h3,
section.page h4,
section.page h5,
section.page h6 {
  font-weight: normal;
  text-align: center;
  color: #fbdc59;
}


nav.navbar {
  color: #fbfbe2;
  background: none;
}
.navbar-dark > button.navbar-toggler, button.navbar-toggler:hover {
  border-color: rgba(99, 161, 241, 0.7);
  background: none;
}
.navbar-dark > button.navbar-toggler > .navbar-toggler-icon { 
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(254,216,51, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#navMenu, #navMenu > a {
  background: none;
}

section.reader-style ol { 
  counter-reset: item;
  padding-left: 0.8em;
}
section.reader-style ol li { padding: 0.4em 0; }
section.reader-style ol li { display: block; }
section.reader-style ol li:before {
  font-weight: bold;
  content: counter(item) ". ";
  counter-increment: item;
  color: #fbdc59;
  margin-right: 0.2em;
}
ul { color: #63a1f1; }
#aftertitle ul {
  list-style: none;
  color: #fbfbe2;
  padding-left: 0.8em;
}
#aftertitle ul li:before {
  font-weight: bold;
  content: "✜";
  color: #fbdc59;
  margin-right: 0.4em;
}
#projects ul {
  list-style: none;
  color: #fbfbe2;
  padding: 0.8em 0.5em 0;
}
#projects ul li:before {
  font-weight: bold;
  content: "✜";
  color: #fbdc59;
  margin-right: 0.4em;
}
.page ul { color: #63a1f1; }
section.reader-style ul li { padding: 0.4rem; }
section.reader-style li h2 {font-size: 1.4rem; }
section.reader-style li h3 {font-size: 1.2rem; }
section.reader-style li p { font-size: 1rem; }
.reader-style div.nav-topbar {
  display: block;
  width: 100%;
  height: 0.1rem;
  margin-bottom: 0.8em;
}
.reader-style div.nav-topbar.gold {
  background: linear-gradient(to right,
  rgb(134,56,44), rgb(134,56,44), rgba(99, 161, 241, 0.1), rgba(99, 161, 241, 0.3),
  rgba(254, 216, 51, 0.7), rgb(134,56,44), rgba(134,56,44,0.6)) ;
  
}
.reader-style div.nav-topbar.blue {
  background: linear-gradient(to right,
  rgb(134,56,44), rgba(134,56,44,0.1), rgba(99, 161, 241, 0.2), rgb(99, 161, 241), rgba(99, 161, 241,0.5),
  rgba(254, 216, 51, 0.3), rgba(134,56,44,0.5), rgb(134,56,44), rgba(134,56,44,0.6)) ;
}
.reader-style div.nav-topbar.gold2 {
  background: linear-gradient(to right,
  rgb(134,56,44), rgba(134,56,44,0.3), rgba(134,56,44,0.6), rgba(99, 161, 241, 0.3),
  rgba(254, 216, 51, 0.4), rgba(254,216,51,0.3), rgba(254,216,51,0.8), rgba(99, 161, 241, 0.3),
  rgba(99, 161, 241, 0.1), rgba(134,56,44,0.6), rgba(134,56,44,0.3), rgb(134,56,44), rgb(134,56,44)) ;
}
.reader-style div.nav-topbar.blue2 {
  background: linear-gradient(to right,
  rgba(134,56,44,0.5), rgba(99,161,241,0.4), rgb(99, 161, 241), rgba(99,161,241,0.5),
  rgba(254, 216, 51, 0.3), rgba(134,56,44,0.4), rgb(134,56,44), rgb(134,56,44), rgba(134,56,44,0.6)) ;
}
footer { margin-top: 2em }

#navMenu > a.navbar-item.is-active {
  font-weight: bold;
}

.section .blog {
  padding: 3rem 1.5rem;
}


div#slogan {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.16;
  color: #fbdc59;
  margin-top: -0.95rem;
  margin-left: -1.5em;
}
#nanhu {
  position: absolute;
  top: 50em;
  right: 1em;
  z-index: 20;
  right: 8em;
}
#nanhu.bloghtml,#nanhu.pagehtml  {
  top: 25em;
}
#nanhu.blogposthtml {
  top: 115em;
}
#nanhu .figure {
  position: relative;
  width: 381px;
  height: 488px;
  opacity: 0.2;
  background-image: url('/static/img/mtnanhu.png');
  background-repeat: no-repeat;
}


#topkbar div.topkborder {
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    height: 0.25rem;
    background: linear-gradient(to right, #fbdc59, rgba(134,56,44,0.6), #63a1f1);
    margin: 0px;
}

#kbang {
  margin-top: 1em;
  margin-bottom: 4em;
}
.myname {
  display: block;
  color: #fbdc59;
  font-size: 4.2rem;
  line-height: 1.3;
  text-shadow: 4px 3px 0px #63a1f1, 9px 8px 0px rgba(0,0,0,0.15);
  margin-left: 3em;
}
.myname.first {
  padding-top: 0.6em;
  padding-left: 0.4em;
}
@media screen and (max-width: 1279px) {
  h1 { font-size: 1.8rem }
  #navcon.container { max-width: 90%; }
  .navbar-brand div#slogan {
    font-size: 1.6rem;
    margin-top: -1.5rem;
  }
  #nanhu { right: 3em; }
}
@media screen and (max-width: 767px) {
  #navcon.container { max-width: 94%; }
  .navbar-brand div#slogan {
    font-size: 1.4rem;
    margin-left: -0.6rem;
  }
  .myname {
    font-size: 3rem;
    margin-left: 1.5em;
  }
  .myname.last { margin-left: 1.3em }
  #nanhu .figure {
    background-size: 77%;
    background-position: 5em 0, center;
  }
}
@media screen and (max-width: 575px) { #nanhu.blogposthtml { top: 115em; } }
@media screen and (max-width: 320px) {
  #nanhu { top: 125em; }
  #nanhu.blogposthtml { top: 124em; }
}
@media screen and (max-width: 575px) {
  #kbang { margin-bottom: 4em; }
  #nanhu { right: 0; }
  #navcon.container { max-width: 100%; }
  .nav-item > div.nav-topbar {
    height: 0.1rem;
    margin: 0px;
  }
  .nav-item > div.nav-topbar.gold {
    background: linear-gradient(to right,
    rgb(134,56,44), rgb(134,56,44), rgb(134,56,44), rgba(99, 161, 241, 0.1), rgba(99, 161, 241, 0.3),
    #fbdc59, rgba(134,56,44,0.6));
    
  }
  .nav-item > div.nav-topbar.blue {
    background: linear-gradient(to right,
    rgb(134,56,44), rgb(134,56,44), rgb(134,56,44), rgb(134,56,44), rgba(254, 216, 51, 0.1), rgba(254, 216, 51, 0.3),
    #63a1f1, rgba(134,56,44,0.6));
  }
  h2 { font-size: 1.4rem }
  h3 { font-size: 1.2rem }
  h4 { font-size: 1rem }
  body p { font-size: 1em; }
  section.reader-style { padding: 0; }
  section.reader-style li { padding: 0.4em; }
  section.reader-style li h2 { font-size: 1.1rem; }
}

.code {
  color: #63a1f1;
  font-family: 'Fira Code', 'Source Code Pro', 'Ubuntu Mono', Menlo, Consola, monospace;
}
pre code {
  color: #63a1f1;
  font-family: 'Fira Code', 'Source Code Pro', 'Ubuntu Mono', Menlo, Consola, monospace;
}
.code .deco { color: #92d44a }
.code.small {
  font-size: .4em;
  text-shadow: none;
}

/* Pagination */
nav ul li.page-item.active a.page-link,
nav ul li.page-item.disabled a.page-link,
nav ul li a.page-link, nav ul li a.page-link:hover {
  background: none;
  border: none;
}
nav ul li.page-item.active a.page-link {
  color: #63a1f1;
}

/* Webkit watchout! */
@media screen and (max-width: 1279px) and (-webkit-min-device-pixel-ratio:0) {  
  .navbar-brand div#slogan { margin-top: -1.4rem; }
  #aftertitle {
    padding-left: 2.6rem;
    padding-right: 2.6rem;
  }
}
@media screen and (max-width: 575px) and (-webkit-min-device-pixel-ratio:0) {  
  .navbar-brand div#slogan { margin-top: -1.7rem; }
  #aftertitle {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
}

article img {
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 2rem auto;
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}