body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}

body {
    
    font: 400 16px/1.6 "Segoe UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: #222;
    background-color: #FDFCF8; 
    -webkit-text-size-adjust: 100%;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}


h1, h2, h3, h4, h5, h6 {
    font-family: Consolas, monospace, "Microsoft YaHei";
    font-weight: bold;
    color: #1A3C34; 
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

h1 { 
    font-size: 34px; 
    border-bottom: 4px double #1A3C34; 
    padding-bottom: 10px;
    margin-bottom: 25px;
}
h2 { 
    font-size: 26px; 
    border-bottom: 1px dashed #A3B8A8; 
    padding-bottom: 8px; 
    margin-top: 30px;
}
h3 { font-size: 22px; }
h4 { font-size: 18px; color: #5A3A22;  }

p, blockquote, pre, ul, ol, dl, figure, .highlight {
    margin-bottom: 20px;
}

main { display: block; flex: 1; padding: 40px 0; }

img { 
    max-width: 100%; 
    vertical-align: middle; 
    border: 2px solid #333; 
    padding: 2px;
    background: #fff;
}
figure > img { display: block; margin: 0 auto; }
figcaption { font-size: 14px; text-align: center; color: #666; margin-top: 10px; font-family: "Courier New", monospace; }

ul, ol { margin-left: 30px; }
li { margin-bottom: 5px; }
li > ul, li > ol { margin-bottom: 0; margin-top: 5px; }


a { color: #0044CC; text-decoration: none; font-weight: 500; }
a:visited { color: #551A8B; }
a:hover { color: #D93025; text-decoration: underline; background-color: #FFF4CE; } 


blockquote {
    color: #444;
    border-left: 4px solid #8B9D8E;
    background: #F4F5F0;
    padding: 12px 18px;
    font-size: 15px;
    border-radius: 2px;
}


pre, code {
    font-family: "Courier New", Consolas, monospace;
    font-size: 14px;
    border: 1px solid #D1D5CB;
    background-color: #F4F5F0;
    color: #B02727; 
}
code { padding: 2px 6px; border-radius: 3px; }
pre { padding: 15px; overflow-x: auto; color: #333; border-radius: 0; border-left: 4px solid #D1D5CB;}
pre > code { border: 0; padding: 0; background: none; color: inherit; }


.wrapper {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 30px;
}
.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }


.site-header {
    background-color: #FDFCF8;
    border-top: 6px solid #1A3C34;
    border-bottom: 2px solid #E5E5D8;
    min-height: 60px;
    position: relative;
}

.site-title {
    font-size: 22px;
    font-weight: bold;
    line-height: 60px;
    float: left;
    color: #1A3C34 !important;
}
.site-title:hover { text-decoration: none; background-color: transparent; color: #000 !important; }

.site-nav { float: right; line-height: 60px; }
.site-nav .nav-trigger, .site-nav .menu-icon { display: none; }
.site-nav .page-link { color: #444; margin-left: 20px; font-weight: bold; }
.site-nav .page-link:hover { color: #D93025; text-decoration: none; background: none; }


@media screen and (max-width: 600px) {
    .site-nav { position: absolute; top: 12px; right: 15px; background-color: #FFF; border: 1px solid #CCC; border-radius: 0; text-align: right; z-index: 10; box-shadow: 2px 2px 0px rgba(0,0,0,0.1); }
    .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
    .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
    .site-nav .menu-icon > svg { fill: #333; }
    .site-nav input ~ .trigger { clear: both; display: none; }
    .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
    .site-nav .page-link { display: block; padding: 8px 15px; margin-left: 0; border-top: 1px dashed #EEE; line-height: 1.5; }
}


.site-footer {
    border-top: 2px solid #E5E5D8;
    background-color: #F4F5F0;
    padding: 40px 0;
    color: #555;
    font-size: 14px;
}
.footer-heading { font-size: 18px; color: #222; margin-bottom: 15px; font-weight: bold; }
.contact-list { list-style: none; margin-left: 0; }
.footer-col-wrapper { margin-left: -15px; }
.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }
.footer-col-1 { width: calc(40% - 15px); }
.footer-col-2 { width: calc(20% - 15px); }
.footer-col-3 { width: calc(40% - 15px); }

@media screen and (max-width: 800px) {
    .footer-col-1, .footer-col-2 { width: calc(50% - 15px); }
    .footer-col-3 { width: calc(100% - 15px); }
}
@media screen and (max-width: 600px) {
    .footer-col { float: none; width: calc(100% - 15px); }
}


.kbdsym {
    font-weight: bold;
    white-space: nowrap;
    color: #222;
    background: #EAE8E3; 
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #BDBAB0;
    border-bottom: 2px solid #99968E;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
    padding: 0.1em 0.5em;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
}
.kbdsym a { color: #222 !important; text-decoration: none !important; background: transparent !important; }


.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
    transition: color 0.2s ease;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: #FFF !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
    color: #87CEFA !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #FF6A6A !important;
}


.fake-link {
    color: #0044CC;
    font-family: monospace;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px dashed #0044CC;
}
.fake-link:hover {
    color: #D93025;
    border-bottom: 1px dashed #D93025;
    background-color: #FFF4CE;
    text-decoration: none;
}