* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 19px;
  letter-spacing: 0.09em;
  padding: 0px;
  margin: 0px;
  background-color: rgb(236, 163, 74);
  background-color: rgba(236, 163, 74, 0.15);
  background-image: radial-gradient(
    circle at 50% 10%,
    rgba(242, 196, 105, 0.05) 0%,
    rgba(242, 196, 105, 0.15) 5%,
    rgba(242, 196, 105, 0.25) 35%,
    rgba(242, 196, 105, 0.35) 55%,
    rgba(242, 196, 105, 0.15) 100%);
  font-family: Verdana, Helvetica, "Droid Sans", "Microsoft YaHei", "微软雅黑", "YouYuan", sans-serif;
}

/**
 * h1 and h2 elements are for the volume and article titles, respectively.
 * They exist before the JavaScript transforms the title piece and takes over,
 * then both elements will be removed.
 * As they are transient, the two elements are only minimally styled.
 **/
h1, h2 {
  text-align: center;
  color: #630;
  line-height: 2;
}

h1 {
  font-size: 72.45%; /* 115% * 63% */
  padding-top: 6em;
  font-weight: normal;
}

h2 {
  font-size: 115%;
  padding-bottom: 3em;
}

.bhff-title {
  font-size: 115%;
  line-height: 2;
  text-align: center;
  color: #000;
  font-weight: 700;
  background-color: rgb(252, 229, 190);
  background-image: radial-gradient(
    circle at 50% 35%,
    rgba(252, 249, 243, 0.7) 0%,
    rgba(255, 247, 234, 0.5) 45%,
    rgba(252, 243, 225, 0.3) 65%,
    rgba(254, 231, 187, 0.1) 80%,
    rgba(255, 255, 255, 0.0) 100%);
  margin: 0px !important;
  padding: 20px 0em 20px 0em;
}

.bhff-title .bhff-volume {
  margin: 1.5em 0 0.5em 0;
  white-space: nowrap;
  padding: 0px 15%;
}

.bhff-title .bhff-volume > span {
  line-height: 1.5;
  font-size: 63%;
  letter-spacing: 0.2em;
  font-weight: normal;
  color: #fff;
  text-shadow: 0 0 0.1px #fff;
  /* background-color: rgb(236, 163, 74); */
  background-color: rgb(230, 126, 0); /* video2or menu-hover color: #E67E00 */
  padding: 0.6em 1.2em;
  border-radius: 4px;
  box-shadow: 0.5px 0.5px 3px rgba(236, 163, 74, 0.3);
}

.bhff-title .bhff-article-title {
  margin: 0 15% 1em 15%;
}

/* the "bhff-title-note" class is basically the same as the "subtitle" class
 * the former is produced by the parser in bhfftext.js,
 * which is more limited in functionality compared to the backend Python formatter
 */
.bhff-title .bhff-article-title .bhff-title-note {
  display: block;
  font-size: 60%;
  font-weight: 300;
  line-height: 2;
  margin: 0.5em 0;
  letter-spacing: 0.1em;
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.8);
}

/* 2023-09-09: as we turn .bhff-title-note to block display,
   <br> will add too much line spaces */
.bhff-title .bhff-article-title br {
  display: none;
}

.bhff-title,
.bhff-content {
  font-family: "SimSun", "STSong", "宋体", "华文宋体", serif;
}

.bhff-content h2, /* for mrfy-1 */
.bhff-content h3, /* for jczt-70 */
.bhff-content h4 {
  margin: 0;
  color: #000;
  font-size: 100%;
  font-weight: bold;
  padding: 3.2em 2em 2em 3.2em;
  background-color: rgb(252, 229, 200);
  /*
  background-image: radial-gradient(circle at 50% 50%,
    #fcf9f3 0%,
    #f9f6f0 5%,
    #f9f3e0 35%,
    #faf3d7 80%,
    #f7f0d3 100%);
  */
}

.bhff-content h3 {
  color: #602000;
  text-align: center;
}

.bhff-content {
  background-color: rgb(252, 239, 220);
  background-image: radial-gradient(
    circle at 50% 0%,
    rgba(242, 196, 105, 0.05) 0%,
    rgba(242, 196, 105, 0.15) 15%,
    rgba(242, 196, 105, 0.25) 50%,
    rgba(242, 196, 105, 0.20) 75%,
    rgba(242, 196, 105, 0.10) 100%);
  color: #000;
  max-width: 1000px;
  margin: auto;
  margin-top: 0px;
  padding: 2em 6% 2em 6%;
  line-height: 2;
}

.bhff-toc-container {
  margin: 0px;
  padding: 20px 0px 3em 0px;
  background-color: rgb(245, 228, 205);
  border: 1px solid rgb(235, 218, 195);
}

.bhff-content > * {
  background-color: rgb(252, 239, 220);
  background-image: linear-gradient(to right,
    rgba(255,255,255,0.00) 0%, 
    rgba(255,255,255,0.25) 8%,
    rgba(255,255,255,0.05) 50%, 
    rgba(255,255,255,0.25) 92%,
    rgba(255,255,255,0.00) 100%);
}

.bhff-content p {
  text-indent: 2em;
  padding: 0.7em 2em;
  margin: 0;
  /*box-shadow: 0px 0px 1px rgba(220,220,180,0.3);*/
  border-radius: 0px;
}

.bhff-content hr {
  margin: 1em 0;
  padding: 0;
  border: none; /* space hr */
}

.bhff-content p:first-child {
  border-radius: 4px 4px 0px 0px;
  padding-top: 2em;
  border-width: 0px;
}

.bhff-content p:last-child {
  border-radius: 0px 0px 4px 4px;
  padding-bottom: 2em;
  margin-bottom: 2em;
}

.bhff-content p.multiline {
  text-indent: 0;
  padding-left: 4em;
}

.bhff-toc-container p.bhff-toc-item,
.bhff-toc-container .bhff-toc-item {
  padding: 0;
  margin: 0.8em 0em 0.8em 0em;
  text-indent: 0em;
  background-color: rgb(252, 239, 220);
  border: 1px solid rgb(232, 219, 200);
  /*box-shadow: 1px 1px 1px #eee3cc;*/
}

.bhff-toc-container .bhff-toc-item>a {
  padding: 0.8em 1em 0.8em 1.5em;
  display: block;
}

.bhff-toc-container .bhff-toc-item>a:hover {
  color: #fff;
  background-color: rgb(236, 163, 74);
}

.bhff-toc-container .bhff-toc-item>a:active,
.bhff-toc-container .bhff-toc-item>a:focus {
  color: #fff;
  /* background-color: rgb(204, 85, 0); */
  background-color: rgb(230, 126, 0); /* video2or menu-hover color: #E67E00 */
  /*transform: translate(0.5px, 0.5px);*/
}

/* for fxwd-3 */
.bhff-content > div,
.bhff-content > ul,
.bhff-content > ol {
  margin: 0;
  padding: 0.7em 2em;
  /*
  background-image: linear-gradient(90deg, rgba(255,255,240,0.6) 0%, rgba(255,255,250,0.8) 8%, rgba(255,255,250,0.8)  92%, rgba(255,255,250,0.6) 100%);
  */
}

.bhff-content > ul,
.bhff-content > ol {
  padding-left: 3em;
  padding-bottom: 2em;
}

.bhff-content li > ul,
.bhff-content li > ol {
  padding-left: 1em;
}

/* badly-formatted styles e.g., blog/fxwd-72 */
.bhff-content > div p {
  padding: 0;
  background: none;
}

/* styles for mobile devices */
@media (max-width:575px) {
  .bhff-content {
    padding: 0px;
  }

  .bhff-content p {
    padding: 0.7em 1.5em;
  }

  .bhff-content p:first-child {
    padding-top: 2em;
    margin-top: 0px;
    border-radius: 0px;
  }

  .bhff-content p:last-child {
    padding-bottom: 2em;
    margin-bottom: 0em;
    border-radius: 0px;
  }

  .bhff-content .bhff-toc-container {
    margin: 0px;
    padding: 0;
    border: none;
  }

  .bhff-toc-container p.bhff-toc-item,
  .bhff-toc-container p.bhff-toc-item:first-child,
  .bhff-toc-container .bhff-toc-item,
  .bhff-toc-container .bhff-toc-item:first-child {
    padding: 0;
    margin: 0em !important;
    border: 1px solid rgb(232, 219, 200);
    border-width: 0 0 1px 0;
    box-shadow: none;
  }

  .bhff-toc-container p.bhff-toc-item:first-child,
  .bhff-toc-container .bhff-toc-item:first-child {
    border-top-width: 1px;
  }
}

/* clearfix */
.bhff-toc-item:after {
  content: "";
  display: table;
  clear: both;
}

.bhff-link-group {
  display: block;
  float: right;
}

.bhff-content a {
  color: #000;
  text-decoration: none;
}

.bhff-content a:hover {
  color: #b50;
  text-decoration: none;
}

.bhff-content a:active,
.bhff-content a:focus {
  color: #d70;
  text-decoration: none;
}

.center {
  text-align: center;
  text-indent: 0em;
}

.noindent {
  text-indent: 0px !important;
}

.bhff-note {
  font-size: 80%;
  color: #808080;
}

.bhff-content .bhff-audio {
  margin: 1em 0em;
  width: 100%;
}

.bhff-nav {
  position: fixed;
  top: -360px;
  left: 0px;
  z-index: 100;
  margin: 0px;
  width: 100%;
  text-align: center;
  background-color: rgb(245, 240, 210);
  box-shadow: 0px 1px 20px rgba(100,100,100,0.3);
  padding: 8px 0px 8px 0px;
  transition: top 0.5s ease;
}

.bhff-nav.active {
  top: 0px;
  background-color: rgb(242, 196, 105);
  background-image: radial-gradient(circle at 50% 30%,
   rgba(255, 255, 255, 0.3) 0%,
   rgba(255, 255, 155, 0.3) 50%, 
   rgba(255, 225,   0, 0.1) 80%);
}

.bhff-nav-btn-ctn {
  position: fixed;
  z-index: 200;
  right: 0px;
  top: 0px;
}

.bhff-nav-btn {
  position: relative;
  font-size: 30px;
  line-height: 48px;
  width: 48px;
  height: 48px;
  color: rgb(173, 130, 65);
  text-shadow: 0px 0px 1px rgb(200, 160, 0);
  font-weight: bold;
  background-color: rgb(255, 239, 215);
  border-radius: 8px;
  margin: 4px 12px 0px 0px;
  box-shadow: 1px 1px 3px rgb(231, 209, 171);
  opacity: 0.9;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: none;
}

.bhff-nav-btn.close {
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

.bhff-nav-btn .bhff-icon-bar {
  position: absolute;
  display: block;
  cursor: pointer;
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background-color: rgb(236, 163, 74);
  top: 22px;
  left: 12px;
  /*
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  */
  margin: 0px;
  transition: 0.3s all ease-in;
}

.bhff-nav-btn .bhff-icon-bar1 {
  top: 14px;
  /* top: 32%; */
}

.bhff-nav-btn .bhff-icon-bar3 {
  top: 30px;
  /* top: 68%; */
}

.bhff-nav-btn.close .bhff-icon-bar1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.bhff-nav-btn.close .bhff-icon-bar2 {
  width: 0%;
}

.bhff-nav-btn.close .bhff-icon-bar3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* backup solution: center the triple lines inside the nav button
 * ☰, U+2630 trigram for heaven, &#9776; alternative: &#8801
 * https://stackoverflow.com/questions/25929983/ */
/*
.bhff-nav-btn:after {
  content: "\2630";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
*/

.bhff-nav-btn:hover,
.bhff-nav-btn.hover {
  color: #852;
  box-shadow: 2px 2px 2px #db9;
}

.bhff-nav-btn:hover .bhff-icon-bar {
  background-color: #d70;
}

.bhff-nav-btn:active,
.bhff-nav-btn:focus {
  transform: translate(0.5px,0.5px);
}

.bhff-nav-toolbar {
  text-align: center;
  font-size: 6px; /* for spaces */
  margin: 12px 60px 12px 6px;
}

.bhff-nav-toolbar .bhff-btn {
  margin: 4px 4px;
}

.bhff-nav .bhff-date {
  display: block;
  font-size: 60%;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 0.08em;
  line-height: 2.0;
  padding: 0.2em 0;
  margin-bottom: 0;
  /*
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,125,0.2) 50%, rgba(255,225,125,0.2) 90%);
  border: 1px solid rgba(250,220,160,0.2);
  border-radius: 2px;
  box-shadow: 1px 1px 2px rgba(235,220,180,0.3);*/
}

.bhff-nav .bhff-date-wrapper,
.bhff-nav .bhff-src-url-wrapper {
  margin: 0.8em 0em;
}

.bhff-nav .bhff-src-url {
  display: inline-block;
  position: relative;
  width: 295px;
  height: 46px;
  padding: 7px 14px;
  margin: 0em 1em;
  font-size: 12.5px;
  line-height: 32px;
  color: #fff;
  background-color: rgb(236, 163, 74);
  border: 1px solid rgb(220, 150, 74);
  /*
  color: rgb(120, 80, 80);
  background-color: #eee3bb;
  border: 1px solid #e3d3a3;
  */
  font-weight: normal;
  letter-spacing: 0.1em;
  border-radius: 4px;
  text-align: left;
  width: 86px;
  overflow: hidden;
  transition: 0.5s width ease-in;
}

.bhff-nav .bhff-src-url:hover {
  width: 285px;
}

.bhff-nav .bhff-src-url a {
  background-color: rgba(0, 0, 0, 0.1);
  color: #fff;
  display: inline-block;
  /* word-break: break-all; */ /* word breaking anywhere for long urls */
  white-space: nowrap;
  overflow: hidden;
  padding: 0em 0.65em;
  position: absolute;
  top: 7px;
  bottom: 7px;
  right: 12px;
  left: 85px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  line-height: 32px;
  text-decoration: none;
  border-radius: 3px;
  /*
  background-color: rgb(255, 251, 230);
  color: rgb(100, 90, 80);
  border: 1px solid #e0d7c0;
  box-shadow: inset 0 0 1px #f7f3e0;
  */
}

.bhff-nav .bhff-src-url a:hover {
  color: rgb(120, 30, 0);
  background-color: rgba(255, 250, 220, 0.8);
  /*
  background-color: rgb(255, 250, 220);
  box-shadow: inset 0 0 1px #ee7;
  */
}

.bhff-nav .bhff-src-url a:focus,
.bhff-nav .bhff-src-url a:active {
  color: #963;
}

.bhff-nav .bhff-src-url label {
  display: inline-block;
  /* transform: translate(0, 1px); */
  white-space: nowrap;
}

.bhff-nav .bhff-src-url label .colon {
  display: none;
}

.bhff-nav .bhff-src-url:hover label .colon {
  display: inline-block;
}

.bhff-nav .bhff-src-url a span {
  display: block;
  overflow: hidden;
}

.bhff-btn-group {
  display: inline-block;
}

/* adapted from bootstrap.css v3.4.1 */
.bhff-btn {
  display: inline-block;
  position: relative;
  font-size: 16px;
  line-height: 1.42857143;
  border-radius: 4px;
  /* user cannot select text on the button */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  letter-spacing: 0px;
  background-color: rgb(236, 163, 74);
  color: #fff;
  border: 1px solid rgb(220, 150, 74);
  /*
  color: #730;
  background-color: rgb(255, 252, 245);
  border: 1px solid rgb(235, 230, 200);
  */
  padding: 6px 12px;
  height: 42px;
  line-height: 28px;
  min-width: 42px;
  text-align: center;
}

.bhff-nav-toolbar .bhff-btn-group .bhff-btn {
  margin: 0;
  border-radius: 0;
  border-left-width: 0;
}

.bhff-nav-toolbar .bhff-btn-group .bhff-btn:first-child {
  margin-left: 4px;
  border-radius: 4px 0 0 4px;
  border-left-width: 1px;
}

.bhff-nav-toolbar .bhff-btn-group .bhff-btn:last-child {
  margin-right: 4px;
  border-radius: 0 4px 4px 0;
}

.bhff-btn:hover {
  color: #fff;
  background-color: rgb(200, 70, 0);
  border-color: rgb(200, 70, 40);
}

.bhff-btn:active,
.bhff-btn:focus {
  color: #fff;
  background-color: rgb(160, 0, 0);
  border-color: rgb(200, 30, 30);
}

.bhff-nav-toolbar .bhff-btn > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bhff-footer .bhff-btn > svg {
  transform: translate(-8px, 1px);
}

.bhff-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  font-size: 16px;
  text-align: center;
  margin: 0px;
  padding: 40px 10% 40px 10%;
  background-color: rgb(242, 196, 105);
  background-image: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 155, 0.2) 50%, 
    rgba(255, 225,   0, 0.1) 75%)
}

.bhff-footer span {
  display: block;
  margin: 0;
}

.bhff-footer a.bhff-btn {
  height: auto;
}

.bhff-footer a {
  color: #fff;
  background-color: rgb(236, 163, 74);
  box-shadow: 2px 1px 1px rgba(236, 163, 74, 0.3);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 180%;
  width: 100%;
  padding: 1em 2em;
  margin: 0.5em 0em;
}

.bhff-footer a:hover {
  background-color: rgb(200, 50, 30);
  color: rgb(255, 255, 255);
  box-shadow: 2px 1px 5px rgba(175,155,130,0.5);
}

.bhff-footer a:active,
.bhff-footer a:focus {
  background-color: rgb(190, 50, 30);
  color: rgb(255, 255, 255);
  box-shadow: 2px 1px 5px rgba(175,155,130,0.3);
}


.bhff-up-btn-ctn {
  position: fixed;
  z-index: 100;
  right: 0px;
  bottom: 0px;
}

.bhff-up-btn {
  position: absolute;
  right: -52px;
  bottom: 48px;
  font-size: 30px;
  line-height: 1.43;
  width: 48px;
  height: 48px;
  /* background-color: black; */
  margin: 4px 0px 0px 4px;
  opacity: 0.8;
  transition: all 0.3s ease-in;
  border-radius: 24px;
  background-color: #551100;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,200,0.3) 0%, rgba(255,255,255,0.1) 80%);
}

.bhff-up-btn:hover {
  transition: all 0.3s ease-in;
}

.bhff-up-btn.active {
  right: 12px;
}

.bhff-up-triangle {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%,-50%);
  /* up triangle https://stackoverflow.com/a/6325076/13612859 */
  width: 0px;
  height: 0px;
  border-top: none;
  border-bottom: 14px solid #ea0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}

.bhff-up-btn:hover {
  opacity: 0.9;
  background-color: #502700;
}

.bhff-up-btn:hover .bhff-up-triangle {
  border-bottom-color: #ed7;
}

.bhff-video,
.bhff-audio {
  width: 800px;
  max-width: 100%;
  margin: auto;
}

audio.bhff-audio::-webkit-media-controls-panel {
  background-color: rgb(255, 245, 230);
}

.bhff-content .bhff-video-wrapper,
.bhff-content .bhff-audio-wrapper {
  padding: 2em 1em 2em 1em;
}

/* caption added by bhfftext.js */
.bhff-media-caption {
  text-align: center;
}

.bhff-media-caption a {
  background-color: rgb(236, 163, 74);
  color: #fff;
  padding: 0.8em 1em 0.8em 1em;
  margin-top: 0.5em;
  border-radius: 4px;
  font-size: 16px;
  box-shadow: 1px 1px 3px rgba(150,150,150,0.3);
  line-height: 2em;
}

.bhff-media-caption a:hover {
  color: #fff;
  background-color: #a42;
}

.bhff-media-caption a:active,
.bhff-media-caption a:focus {
  color: #fff;
  background-color: #a10;
}

.bhff-media-download-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-weight: bold;
  background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: translate(0, 0.15em);
  margin-right: 0.5em;
}

/* generic qna-tag, may be overriden in bhfftext-qna.css */
.bhff-qna-tag {
  /*color: #531;*/
  background-color:rgb(236, 163, 74);
  color: #f3f3f3;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  height: 2em;
  line-height: 2em;
  padding: 0px 2px 0px 8px;
  border-radius: 4px;
  margin-right: 12px;
  transform: translate(0, -2px);
}

.bhff-blinking-on-copied {
  animation-duration: 1.2s;
  animation-name: bhff-blinking-on-copied;
}

@keyframes bhff-blinking-on-copied {
  0% { opacity: 1; }
  60% { opacity: 0.5; }
  100% { opacity: 1; }
}