html {
    font-size: 10px;
    font-family: Cambria, Consolas, Courier, 宋体,monospace;
    //height: 100vh;
    margin: auto;
    max-width: 1000px;
    min-width: 450px;
    background-color: #f0f0f0;
    background-attachment: fixed;
    background-size: cover;
}
pre{
    font-family: Cambria, Consolas, Courier, 宋体, monospace;
    //font-family: Consolas, Cambria, Courier, 宋体, monospace;
    margin-top: 4px;
    margin-bottom: 4px;
    white-space: pre-wrap;  //设置自动换行
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

body {
    border: 0px solid #555;
    padding: 0rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

div {
    margin: auto;
    width: 100%;
    font-size: 1.6rem;
}
a {
    color: #88f;
}
button {
    border: 1px solid #FFF;
    border-radius: 0.5rem;
    background: #EEEEEE55;
    /*box-shadow: -3px -3px 0.5rem #FFF,
        inset -3px -3px 0.5rem #FFF,
        inset 3px 3px 0.5rem #ddd,
        3px 3px 0.5rem #aaa;*/
    box-shadow: 3px 3px 5px #bbb,
        -3px -3px 4px #fff,
        inset -2px -2px 4px #fff,
        inset 2px 2px 4px #bbb;
    height: 5rem;
    margin: 1rem;
    margin-top: 0.6rem;
    padding: 1rem;
    font-size: 1.6rem;
    cursor: pointer;  /*鼠标样式*/
    //transition: transform 0.5s ease;
    transition: all 0.5s;
}
button:hover {
    border: 1px solid #eee;
    /*box-shadow: -3px -3px 0.5rem #FFF,
         3px 3px 0.5rem #aaa;*/
    box-shadow: 3px 3px 8px #999, -5px -5px 6px #fff;
    color: #ff6a00;
    font-weight: bold;
    transform: translateY(-3px);
}
button:active {
    border: 1px solid #ff5;
}
/*----------------------------------  ↓↓↓  目录  ↓↓↓  ----------------------------------*/
div.catalog{
    border: 0px solid #555;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0rem;
    margin-top: 1.5rem;
}
h3.catalog {
    border-left: 4px solid #882;
    border-radius: 1.4rem;
    padding: 1rem;
    font-size: 2rem;
}
div.catalog>a{
    width:25%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-decoration: none; //去掉下划线;
}

button.catalog{
    display: block;
    width:90%;
    height: 3.8rem;
    margin: auto;
    margin-top: 0.6rem;
    padding: 0.5rem;
    font-size: 1.4rem;
    color: #000
}

button.catalog.no{  /*未完成样式，即完成一半*/
    background: #ee8;
    box-shadow: 3px 3px 8px #bbb, -5px -5px 6px #fff;
}
/*----------------------------------  ↑↑↑  目录  ↑↑↑  ----------------------------------*/

h2 {
    border:1px solid #666;
    border-radius: 1rem;
    box-shadow: 4px 4px 2px #6666ff88;
    margin: auto;
    padding: 1.6rem;
    width: 60%;
    font-size: 2.2rem;
    text-align: center;
}


/*---------------------------  ↓↓↓  每个页面的目录按钮  ↓↓↓  ---------------------------*/
a.index {
    width: 14%;
    height: 4rem;
    margin: auto;
    display: block;
    text-decoration: none; //去掉下划线;
}
button.contents {
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 0rem;
}
/*---------------------------  ↑↑↑  每个页面的目录按钮  ↑↑↑  ---------------------------*/
img {
    display: block;
    width: 96%;
    margin: auto;
    padding: 1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0 1rem #aaa;
}
div.all {
    border: 0px solid #555;
    border-radius: 1.5rem;
    background: #eee55;
    box-shadow: 0 0 1rem #888;
    width: 94%;
    padding: 1rem;
    margin: auto;
}
/*---------------------------  ↓↓↓  代码区域  ↓↓↓  ---------------------------*/
div.code {
    border-radius: 1.2rem;
    background: #222;
    box-shadow: inset 0 0 0.6rem #22222288,
        inset 0 30px 0 #eee;
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    padding: 1.2rem;
    padding-top: 0.7rem;
}

.code>button {
    border: none;
    border-radius: 5rem;
    box-shadow: 0 0 0.5rem #333;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0rem;
    padding: 0rem;
    transition: transform 0.3s ease;
}
.code>button:hover {
    transform: translateY(-3px);
}
.code>button:active {
    background: #fff;
}
button.code1 {
    background: #f00;
}
button.code2 {
    background: #55f;
}
button.code3 {
    background: #5f5;
}

/*代码部分*/
div.code>div {
    color: #aa5;
    font-size: 1.6rem;
    padding-top: 0.5rem;
}
/*注释*/
zs{
    color: #777;
}
/*---------------------------  ↑↑↑  代码区域  ↑↑↑  ---------------------------*/
strong {
    border-bottom: 2px solid #585;
    border-top: 2px solid #858;
    border-radius: 0.5rem;
    color: #000;
}

em {
    font-weight: bold;
    color: #000;
}

span.b {
    text-shadow: 1px 1px 0.2rem #666;
    color: #000;
    font-weight: bold;
    padding-left: 2rem;
}

table {
    color: #22c;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

td,
th {
    border: 1px solid #aaa;
    color: #eee;
}

td {
    font-size: 1.4rem;
    color: #999;
}

p {
    border: 1px dashed #888;
}