 /* 根元素
  <html>
 */
 html {
     color: #979797;
     background-color: #181818;
 }

 /* 章节
  <body> <section> <nav> <article> <aside> <h1*6> <header> <footer> <address> <main>
 */
 body {
     color: #979797;
     background-color: #181818;
 }

 /* 组织内容
  <p> <hr> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div>
 */
 hr {
     color: #343434;
 }

 blockquote {
     border-left: 3px solid #414141;
     color: #777;
 }

 /* 文字形式
  <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> 
 */
 a {
     color: #4183c4;
 }

 a:hover {
     border-bottom: 1px solid #4183c4;
 }

 .copyright a {
     color: #979797;
 }

 a.list,
 .post-nav a,
 .copyright a,
 .masthead .menu a,
 #TableOfContents li,
 .menu button {
     color: #979797;
 }

 a.list:hover,
 .post-nav a:hover,
 .copyright a:hover,
 .masthead .menu a:hover,
 .masthead .menu .active a:hover {
     color: #4183c4;
     border-bottom: 1px solid #4183c4;
 }

 .menu button:hover {
     color: #4183c4;
 }

 #TableOfContents>ul li:hover {
     color: #4183c4;
 }

 .masthead .menu .active a {
     border-bottom: 1px solid #a0a0a0;
     color: #a0a0a0;
 }

 code {
     background: #303030;
     color: #737373;
 }

 code.hljs {
     background: #202020;
     color: #b1b1b1;
 }

 .hljs span {
     filter: brightness(90%);
 }

 /* 编辑
  <ins> <del>
 */
 ins {
     color: #666666;
 }

 del {
     color: #777;
 }

 /* 嵌入内容
  <img> <iframe> <embed> <object> <param> <video> <audio> <source> <track> <canvas> <map>
  <area> <area> <map> <svg> <math>
 */
 img {
     filter: brightness(80%);
 }

 /* 表格
  <table> <caption> <colgroup> <col> <tbody> <thead> <tfoot> <tr> <td> <th>
 */
 thead {
     background-color: #202020;
 }

 table tr:nth-child(2n) {
     background-color: #202020;
 }

 td,
 th {
     border: 1px solid #343434;
 }

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

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

 /* 选择器 class id  */
 .main {
     border-left: 1px solid #343434;
 }

 .masthead {
     background: #181818;
 }

 .menu button {
     background: linear-gradient(#181818, #181818);
 }

 #eof {
     color: #434343;
 }

 .home .wrapper {
     background: #181818;
 }

 /* 伪类 */
 ::selection {
     background: #27673d;
 }

 :focus {
     outline: none;
     box-shadow: 0 0 0em 0.1em #4183c4;
     border-radius: 1px;
 }

 /* 首页 */
 main.index {
     background-color: #202020;
 }

 article.index button {
     background: linear-gradient(#202020, #202020);
 }

 main.index:hover aside {
     background: #181818;
 }

 article.index {
     border-top: 2px solid #343434;
     border-bottom: 2px solid #343434;
 }

 article.index a,
 article.index button,
 article.index ruby.link,
 article.index ruby.link:hover a,
 article.index ruby.link:hover rt {
     color: #4183c4;
 }

 article.index ruby.link a:hover {
     border-bottom: 1px solid #4183c4;
 }

 @media only screen and (max-width:668px) {
     aside.index {
         background: #181818;
     }
 }

 /* 移动端与 PC 端适配 */
 @media screen and (max-width:1220px) {
     .masthead {
         border-bottom: 1px solid #343434;
         background-color: #202020;
     }

     .menu button {
         background: linear-gradient(#202020, #202020);
     }

     .masthead .menu .active a,
     .masthead .menu .active a:hover {
         border: 1px solid #a0a0a0 !important;
     }

     .main {
         border: none;
     }
 }