@charset "utf-8";
/* CSS Document */

body {
    background-color: #f4f6f9;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
    font-family: 'Microsoft YaHei', 'SimHei', 'SimSun', 'NSimSun', 'FangSong', 'KaiTi';
}

a:link,
a:visited {
    text-decoration: none;
    color: #0063dc;
}

a:hover {
    color: #3abaf4;
}

/* section overall */
header#header,
section#main,
aside#sidebar {
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
}

header#header {
    padding: 10px;
}

section#main,
aside#sidebar {
    padding: 20px;
}

h1 {
    margin: 10px;
}

h2 {
    margin: 0px;
    font-family: 'FangSong';
}

/* table display */
div.tableContainer {
    display: table;
    border-spacing: 10px;
}

div#links {
    border-spacing: 20px;
}

div#links h3 {
    margin: 0px;
}

div.tableRow {
    display: table-row;
}

span.tableCell,
section#main,
aside#sidebar,
div#contact-me,
div#support-me-pc,
div#more {
    display: table-cell;
    vertical-align: top;
}

header#header,
footer#footer {
    margin: 0px 10px 0px 10px;
}

/* header */
header#header>h1 {
    height: 100px;
}

header#header nav {
    float: right;
}

header#header nav>ul {
    list-style-type: none;
    padding-left: 0;
}

header#header nav>ul>li {
    display: inline;
    font-size: larger;
    font-weight: bold;
}

header#header nav>ul>li>a:link,
header#header nav>ul>li>a:visited {
    color: #6777ef;
}

header#header nav>ul>li>a:hover {
    color: #0064d2;
}

header#header nav>ul>li#nav-selected>a {
    color: #115ab4;
}

/* main */
section#main {
    width: 70%;
}

/* aside */
aside#sidebar {
    width: 30%;
}

/* footer */
footer#footer ul {
    list-style-type: none;
    padding-left: 0;
}

footer#footer li {
    color: #606770;
}

footer#footer a:link,
footer#footer a:visited {
    color: #606770;
}

footer#footer a:hover {
    color: #0074e4;
}

footer#footer>p#copyright {
    text-align: center;
}

footer#footer div#support-me-pc>p,
footer#footer div#support-me-mobile>p {
    margin-top: 0px;
    margin-bottom: 0px;
    color: #606770;
}

footer#footer div#support-me-mobile {
    text-align: center;
    margin-bottom: 100px;
}

footer#footer img.payQRcode {
    transition: 1s;
}

footer#footer img.payQRcode:hover {
    transition: 1s;
    width: 200px;
    height: 200px;
}