 /* 根元素
  <html>
 */
 html {
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
 }

 *,
 :after,
 :before {
   box-sizing: inherit;
 }

 body,
 button,
 input,
 label,
 select,
 textarea {
   margin: 0;
   padding: 0;
 }

 /* 章节
  <body> <section> <nav> <article> <aside> <h1*6> <header> <footer> <address> <main>
 */
 body,
 button {
   letter-spacing: 1.5px;
   line-height: 1.75;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   margin: 60px 0 30px;
   padding: 0;
   text-align: center;
   line-height: 1.25;
 }

 h1:hover .anchor,
 h2:hover .anchor,
 h3:hover .anchor {
   display: inline-block;
   margin-right: -23px;
   transform: initial;
   width: 23px;
 }

 h1 {
   font-weight: bolder;
 }

 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: 700;
 }

 h3,
 h4,
 h5,
 h6 {
   text-align: left;
 }

 .main .title h1 {
   margin-top: 0;
   margin-bottom: 40px;
 }

 .title h3 {
   text-align: center;
   font-weight: 400;
 }

 main {
   display: block;
 }

 /* 组织内容
  <p> <hr> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div>
 */
 blockquote {
   margin: 1em 0;
   padding: 0 2em;
 }

 .home blockquote {
   border-left-color: transparent;
 }

 ol,
 ul {
   padding: 0 0 0 20px;
 }

 li {
   margin: 4px 0;
   padding: 0;
 }

 .masthead .menu ul ul {
   margin-right: 10px;
   margin-left: 10px;
   list-style: none;
 }

 .masthead .menu li li:before {
   content: "•\00a\000a0\00a0";
 }

 .home hr {
   margin: 2em auto 1em;
 }

 /* 文字形式
  <a> <em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd>
  <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> <span> <br> <wbr> 
 */
 pre code {
   display: block;
   overflow-x: auto;
   margin: 0;
   padding: 1em;
   border-radius: 0;
   line-height: 1.75;
 }

 code {
   margin: 0;
   padding: .2em .4em;
   border-radius: 3px;
   hyphens: none;
 }

 a {
   padding-bottom: 2px;
   text-decoration: none;
   font-weight: bolder;
 }

 sup a {
   letter-spacing: initial;
 }

 hr,
 sup a {
   padding: 0;
 }

 .copyright a {
   padding: 0;
 }

 .masthead .menu a {
   direction: ltr;
 }

 hr {
   display: block;
   margin: 50px auto;
   height: 1px;
   max-width: 300px;
   border: 0;
   border-top: 1px solid;
 }

 /* 编辑
  <ins> <del>
 */
 ins {
   text-decoration: none;
 }

 /* 嵌入内容
  <img> <iframe> <embed> <object> <param> <video> <audio> <source> <track> <canvas> <map>
  <area> <area> <map> <svg> <math>
 */
 img {
   max-width: 100%;
   border-radius: 0;
 }

 /* img::before {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #f0f3f9;
 }

 img::after {
   content: "图片信息："attr(alt);
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   line-height: 30px;
   background-color: rgba(0, 0, 0, .5);
   color: white;
   font-size: 14px;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 } */

 .masthead img {
   max-width: 166px;
 }

 iframe,
 video {
   display: block;
   margin: auto;
   max-width: 100%;
 }

 /* 表格
  <table> <caption> <colgroup> <col> <tbody> <thead> <tfoot> <tr> <td> <th>
 */
 table {
   margin: auto;
   max-width: 100%;
   min-width: 50%;
   border-spacing: 0;
   border-collapse: collapse;
 }

 td,
 th {
   padding: 5px;
 }

 /* 表单
  <form> <fieldset> <legend> <label> <input> <button> <select> <datalist> <optgroup> <option>
  <select> <textarea> <keygen> <output> <progress> <meter>
 */

 button {
   border: none;
   cursor: pointer;
   font-weight: bolder;
   text-decoration: none;
 }

 /* 交互元素
  <details> <summary> <menuitem> <menu>
 */

 /* 选择器 class id  */
 .anchor {
   display: none;
 }

 .ie.copyright {
   position: fixed;
   bottom: .5em;
   width: 245px;
 }

 .copyright {
   text-align: center;
 }

 .copyright .travellings {
   border: none !important;
 }

 .copyright .travellings img {
   vertical-align: middle;
   display: inline-block;
 }

 .copyright .beian {
   display: inline-block;
   height: 20px;
   line-height: 20px;
   font-weight: 100;

 }

 .copyright .beian img {
   height: 17px;
   vertical-align: middle;
 }

 .copyright .beian a {
   vertical-align: middle;
 }

 .post-nav {
   display: flex;
   margin-top: 25px;
   font-weight: 700;
   justify-content: space-between;
 }

 .nav-next {
   margin-left: 1em;
   text-align: right;
 }

 .nav-prev {
   margin-right: 1em;
 }

 .comments {
   margin-top: 20px;
 }

 .ie.paramount {
   width: 300px !important;
 }

 .paramount {
   margin: 0 auto;
   padding: 30px 0;
   width: 1220px;
 }

 .masthead {
   float: left;
   padding: 20px 50px 20px 10px;
   width: 260px;
 }

 .main {
   margin-left: 260px;
   padding: 32px 10px 20px 50px;
   width: 700px;
   min-height: calc(100vh - 60px);
 }

 .masthead .menu {
   margin-right: 20px;
   direction: rtl;
 }

 .menu {
   transition: all .5s ease;
 }

 .main {
   hyphens: manual;
 }

 .main,
 .masthead {
   padding: 1em 40px;
 }

 .home .wrapper {
   position: absolute;
   overflow: auto;
   width: 100%;
   height: 100%;
 }

 pre .nohighlight {
   background-color: transparent;
 }

 #Msg {
   padding: .5em;
   width: 100%;
   border: 1px dashed;
 }

 .hljs-comment {
   font-style: inherit;
 }

 .hljs {
   padding: 1em;
 }

 .slogan {
   display: block;
 }

 #eof:before {
   margin-right: 20px;
   content: '—';
 }

 #eof:after {
   margin-left: 10px;
   content: '—';
 }

 #eof {
   margin: 2em auto;
   text-align: center;
   font-weight: 100;
   line-height: 1em;
 }

 #TableOfContents {
   position: fixed;
   right: 40px;
   top: 30%;
   padding: 10px 0;
   padding-left: 40px;
   max-height: 400px;
   overflow: hidden;
   margin-top: -10px;
 }

 #TableOfContents:hover p {
   opacity: 1;
 }

 #TableOfContents ul {
   padding: 0px;
   list-style: none;
 }

 #TableOfContents p {
   width: 145px;
   transition: opacity .5s ease-in;
   opacity: 0;
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: bottom;
   margin: 0px;
 }

 #TableOfContents li p.show {
   opacity: 1;
 }

 #TableOfContents .topUlChild,
 #TableOfContents .secondaryUlChild,
 #TableOfContents .thirdUlChild {
   margin-right: 5px;
   vertical-align: middle;
 }

 p.billibili {
   overflow: hidden;
 }

 iframe.billibili {
   width: 100%;
   height: 480px;
   margin-top: -75px;
   margin-bottom: -38px;
 }

 @media only screen and (max-width:545px) {
   iframe.billibili {
     --width: calc(100vw - 50px);
     height: calc(var(--width)/1.75);
     margin: 0;
   }
 }

 /* 伪类 */

 /* 首页 */
 main.index {
   overflow: auto;
   margin: 5em auto;
   padding: 2em;
   max-width: 610px;
   transition: 1s ease;
 }

 aside.index {
   float: left;
   box-sizing: border-box;
   padding: 1em;
   width: 28%;
   line-height: 1.6em;
   transition: .5s ease;
 }

 aside.index #logo {
   text-align: center;
 }

 aside.index img {
   display: block;
   width: 100%;
 }

 aside.index #name {
   margin: .8em 0 1em;
   margin-left: 3px;
   letter-spacing: 3px;
   font-weight: bolder;
 }

 article.index h3 {
   margin-top: 34px;
   margin-bottom: auto;
 }

 article.index h1:hover .anchor,
 article.index h2:hover .anchor,
 article.index h3:hover .anchor {
   display: none;
 }

 aside.index i {
   text-align: center;
 }

 aside.index #info {
   margin: 0;
   padding: 0;
 }

 aside.index #info li {
   list-style: none;
 }

 aside.index #info i {
   margin-right: 3px;
 }

 article.index {
   float: right;
   padding-bottom: 18px;
   width: 70%;
   letter-spacing: .2px;
 }

 article.index a {
   border-bottom: none;
   text-decoration: none;
 }

 article.index rt {
   font-weight: bolder;
 }

 article.index ruby.link:hover {
   padding-bottom: 2px;
 }

 footer.index {
   position: fixed;
   bottom: .5em;
   width: 600px;
 }

 @media only screen and (max-width:668px) {
   main.index {
     margin: 25px;
     padding: 0 1em;
     max-width: 100%;
   }

   aside.index {
     float: none;
     overflow: hidden;
     margin: 2em auto 1em;
     width: 100%;
     display: flex;
     align-items: center;
   }

   aside.index #logo {
     float: left;
     margin-right: 1em;
     width: 28%;
   }

   article.index {
     float: none;
     width: 100%;
   }

   footer.index {
     position: static;
     margin: 1em auto 2em;
     width: auto;
   }
 }

 /* 移动端与 PC 端适配 */
 @media screen and (min-width:1220px) {
   :target {
     padding-top: 60px;
     margin-top: 0;
   }

   .masthead {
     position: sticky;
     top: 0;
   }
 }

 /* 侧边目录 */
 @media screen and (max-width:1250px) {
   #TableOfContents {
     display: none;
   }
 }

 @media screen and (max-width:1220px) {
   :target {
     margin-top: 0;
     padding-top: 79px;
   }

   .paramount {
     padding-top: 58px;
     padding-bottom: 0;
     width: auto;
     max-width: 700px;
   }

   .masthead {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
     float: none;
     margin: 0;
     padding: 5px 0 10px !important;
     width: 100%;
     text-align: center;
     transition: all .5s ease;
   }

   .main {
     margin-left: 0;
     padding: 40px 25px 5px;
     width: auto;
     min-height: auto;
   }

   .masthead .menu {
     margin: auto;
     direction: ltr;
   }

   .masthead .menu ul {
     margin: 0;
     padding: 0;
     text-align: left;
   }

   .masthead .menu ul ul {
     margin: 0;
   }

   .masthead .menu li {
     margin: 0;
     padding: 0;
     border-bottom: 1px solid;
     list-style: none;
   }

   .masthead .menu li:first-child {
     border-top: 1px solid;
   }

   .masthead .menu a,
   .masthead .menu li li:last-child {
     border-bottom: none;
   }

   .masthead .menu a {
     display: block;
     padding: 15px 20px;
   }

   .masthead .menu li li a {
     padding-left: 30px;
   }

   .masthead .menu li li:before {
     content: none;
   }

   .masthead .menu li li a:before {
     content: "•\00a0\00a0\00a0";
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     margin: 2em auto 1.5em;
   }

   .title h2,
   .title h3 {
     margin: 1.5em auto;
   }

   .main .title h1 {
     margin: 1em auto 0;
   }

   .title hr {
     margin: 2em auto;
   }

   .masthead .menu {
     max-width: inherit;
   }

   .masthead .menu ul {
     text-align: center;
   }

   .masthead .menu a {
     display: inline-block;
     padding: 5px 10px;
     border-radius: 5px;
   }

   .masthead .menu a:hover {
     border-bottom: none !important;
   }

   .masthead .menu button {
     padding: 5px 10px;
     border-radius: 5px;
     line-height: 28.5px;
   }

   .masthead .menu li,
   .masthead .menu li:first-child {
     display: inline-block;
     margin-top: 5px;
     border: none;
   }

   .masthead .menu .menu-extra {
     display: none;
   }
 }

 /* 媒体 */
 @media print {

   #TableOfContents,
   .masthead,
   del,
   footer {
     display: none;
   }

   .paramount {
     max-width: 700px;
   }

   .main {
     margin-left: 0;
     padding-left: 10px;
     border: none;
   }
 }

 @-ms-viewport {
   width: device-width;
 }

 @viewport {
   width: device-width;
 }