* {
    box-sizing: border-box;
}
:root {
    color-scheme: light dark;
    --light: #fff;
    --lesslight: #efefef;
    --dark: #333333;
    --moredark: rgb(30, 30, 30);
    --link: royalblue;
    --border-radius: 8px;
    border-top: 5px solid var(--dark);
    /*letter-spacing:.03rem;*/
    line-height: 1.7em;
    font-family: Roboto,Helvetica,Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK","WenQuanYi Micro Hei",sans-serif;
    /*font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", serif !important;*/
    font-size: 17px;
    color: var(--dark);
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased; /*chrome、safari*/
    -moz-osx-font-smoothing: grayscale;/*firefox*/
    /*word-break: break-all;*/
}

body {
    background-color: var(--light);
    margin: 0;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

h1 {font-size: 1.5rem;}
h2 {font-size: 1.3rem;}
h3 {font-size: 1.2rem;}
h4 {font-size: 1.1rem;}
h1,h2,h3,h4{
    color: var(--moredark);
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased; /*chrome、safari*/
    -moz-osx-font-smoothing: auto;
}

li p {
    margin-top: 0em;
    margin-bottom: .3em;
}
button, input {
    font-size: 1em; /* Override browser default font shrinking*/
}

input {
    border: 1px solid var(--dark);
    background-color: var(--lesslight);
    border-radius: var(--border-radius);
    padding: .5em;
}

code:not(pre code)  {
    background-color: var(--lesslight);
    padding: .2em .3em;
    border-radius: var(--border-radius);
    font-family: consolas,Menlo,"PingFang SC","Microsoft YaHei",sans-serif;
}

pre {
    background-color: var(--lesslight);
    /*margin: 0.5em 0 0.5em 0;*/
    padding: .5em .8em;
    overflow: auto;
    border-radius: var(--border-radius);
}
pre code {
    font-family: consolas,Menlo,"PingFang SC","Microsoft YaHei",sans-serif;
    line-height: 1.6em;
    -webkit-font-smoothing: subpixel-antialiased; /*chrome、safari*/
    -moz-osx-font-smoothing: auto;
}

a {
    outline: none;
    color: var(--dark);
    text-decoration-skip-ink: auto;
    text-underline-offset: .3em;
    text-decoration-thickness: 1px;  /* 控制线的粗细 */
}

a:hover {
    background-color: var(--lesslight);
}

strong{
    font-weight: 500;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--border-radius);
}

blockquote{
    padding: .5rem 1rem;
    margin-inline-start: .2em;
    margin-inline-end: .2em;
    border-radius:  var(--border-radius);
    background-color: var(--lesslight);
    border-left: 3px solid var(--dark);
    font-style: italic;
}
blockquote p{
    margin-block-start: 0;
    margin-block-end: 0;
}
button, .button, input[type=submit] {
    display: inline-block;
    background-color: var(--dark);
    color: var(--light);
    text-align: center;
    padding: .5em;
    border-radius: var(--border-radius);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

button:hover, .button:hover, input[type=submit]:hover {
    color: var(--lesslight);
    background-color: var(--moredark);
}

/* table */
table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    margin: 20px 0;
}
th, td {
    border: 1px solid var(--lesslight);
    padding: 5px 8px;
    text-align: left;
    font-size: .9em;
}
th {
    background-color: var(--lesslight);
}

/* Add a margin between side-by-side buttons */
button + button, .button + .button, input[type=submit] + input[type=submit] {
    margin-left: 1em;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.bordered {
    border: 3px solid;
}

.main{
    background-color: var(--light);
    padding: 1em 2em;
    border-radius: var(--border-radius);
}
body{
    background-color: var(--lesslight);
}

.home {
    display: inline-block;
    background-color: var(--dark);
    color: var(--light);
    margin-top: 20px;
    padding: 6px 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
}
.home:hover{
    background-color: var(--moredark);
    color: var(--lesslight);
}

/* Desktop sizes */
@media (min-width: 600px) {
    ol.twocol {
        column-count: 2;
    }
    .row {
        display: flex;
        flex-direction: row;
        padding: 0;
        width: 100%;
    }
    /* Make everything in a row a column */
    .row > * {
        display: block;
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
    .row > *:not(:last-child) {
        margin-right: 10px;
    }
}

/* Dark mode overrides (confusingly inverse) */
@media (prefers-color-scheme: dark) {
    :root {
        --light: #444;
        --lesslight: rgb(30, 30, 30);
        --dark: #fff;
        --moredark: #e9e9e9;
    }
    /* This fixes an odd blue then white shadow on FF in dark mode */
    *:focus {
        outline: var(--light);
        box-shadow: 0 0 0 .25em var(--link);
    }
}

/* Printing */
@media print {
    .home {
        display: none;
    }
}

home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 15px;
    color: white;
    text-shadow: 2px 2px rgb(116, 116, 116);
    text-transform: uppercase;
    border: solid 2px black;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 26px;
    background-color: #2BA245;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

home-button svg {
    transition: all 0.5s ease;
    z-index: 2;
}

.play {
    transition: all 0.5s ease;
    transition-delay: 300ms;
}

home-button:hover svg {
    transform: scale(3) translate(50%);
}

.now {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease;
    z-index: 2;
}

home-button:hover .now {
    transform: translateX(10px);
    transition-delay: 300ms;
}

home-button:hover .play {
    transform: translateX(200%);
    transition-delay: 300ms;
}