@media screen and (min-width: 35.5em) {
    /* 弹窗的样式 */
    div[times][type="page"] {
        width: 90vw !important;
        max-height: 95vh !important;
    }
}

@media screen and (min-width: 48em) {
    /* 弹窗的样式 */
    div[times][type="page"] {
        width: 80vw !important;
        max-height: 95vh !important;
    }
}

@media screen and (min-width: 58em) {
    /* 弹窗的样式 */
    div[times][type="page"] {
        width: 70vw !important;
        max-height: 95vh !important;
    }
}

@media screen and (min-width: 75em) {
    /* 弹窗的样式 */
    div[times][type="page"] {
        width: 60vw !important;
        max-height: 95vh !important;
    }
}

@media screen and (max-width: 35.5em) {
    .legal-license, .legal-copyright {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    /* 弹窗的样式 */
    div[times][type="page"] {
        width: 90vw !important;
        max-height: 95vh !important;
    }
}

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    /* 处理文本溢出 */
    word-wrap: break-word !important;
    /* 允许再单词内换行 */
    word-break: break-all;
    color: #777;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #4b4b4b
}

h3 {
    font-size: 1.25em
}

h4 {
    font-size: 1.125em
}

a {
    color: #3b8bba;
    text-decoration: none
}

a:visited {
    color: #265778
}

dt {
    font-weight: bold
}

dd {
    margin: 0 0 10px 0
}

aside {
    background: #1f8dd6;
    padding: .3em 1em;
    border-radius: 3px;
    color: #fff
}

aside a, aside a:visited {
    color: #a9e2ff
}

pre, code {
    font-family: Consolas, Courier, monospace;
    color: #333;
    background: #fafafa
}

code {
    padding: .2em .4em;
    white-space: nowrap;
    color: #50504c;
    background-color: rgba(27, 31, 35, .05);
}

.button-success, .button-error, .button-warning, .button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65);
}

.button-error {
    background: rgb(202, 60, 60);
}

.button-warning {
    background: rgb(223, 117, 20);
}

.button-secondary {
    background: rgb(66, 184, 221);
}

.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}

.table {
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
    margin: 0 auto;
    text-indent: 0;
    text-align: center;
}

.table th {
    background-color: #1abc9c;
    color: #fff;
}

.table td, .table th {
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
    padding: 10px 15px;
}

.table td:hover {
    font-weight: 900;
    background-color: #c0e712;
}

.table td a:hover {
    color: rgba(255, 0, 0, 0.6);
}

.table tr {
    background-color: #fff;
    transition: 0.3s;
}

.table tr:hover {
    background-color: #f9f9f9;
    transition: 0.3s;
}

tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* ------------------------------- */

.main {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-width: 768px;
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    border-bottom: 1px solid #eee;
    background: #fff;
    letter-spacing: .05em;
    flex: 0 0 auto;
}

.header h1 {
    font-size: 300%;
    font-weight: 100;
    margin: 0
}

.header h2 {
    font-size: 125%;
    font-weight: 100;
    line-height: 1.5;
    margin: 0;
    color: #666;
    letter-spacing: -0.02em
}

.content {
    margin: 20px auto;
    padding-left: 1em;
    padding-right: 1em;
    max-width: 768px;
    margin-top: 10px;
    flex: 1;
}

.footer {
    border-top: 1px solid #eee;
    padding: 1.1429em;
    color: #777;
    background: #fafafa;
    text-align: center;
    line-height: 1.6;
}

.legal-license {
    text-align: left;
}

.legal-copyright {
    text-align: right;
}

.pure-button {
    font-family: inherit
}