* {
    /* word-break:break-all;  */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}

html {
    background-color: rgb(62, 62, 62);
    color: #262626;
}

#root {
    /* 外边距会溢出body */
    margin-bottom: 220px;
    padding: 2em;
    min-height: 100vh;
    background-color: #77aa77;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(89,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(167,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2' gradientTransform='rotate(205,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.66'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (max-width: 1850px) {
    #root {
        padding-left: 3px;
        padding-right: 3px;
    }
}

body,
#root {
    background-color: #f3f3f3
    /* background: linear-gradient(#01EF92, #00D8FB); */
}

#main {
    max-width: 1100px;
    margin: auto;
}

.title {
    color: #000000;
    font-size: 1.5em;
}

.hidden {
    visibility: hidden;
}

.replyNickName {
    color: rgb(117, 117, 117);
}

.Paging {
    text-align: center;
    padding: 2em;
}

.Footer {
    position: fixed;
    bottom: 0px;
    z-index: -1;
    text-align: center;
    width: 100%;
}

.Footer a {
    color: #fff;
}
.Footer img {
    width: 200px;
    height: 200px;
}

.list-card {
    padding: 1em;
    /* margin: 1em; */
}

#list {
    max-width: 700px;
    margin: auto;
    margin-top: 6em;
    border-radius: 8px!important;
    box-shadow: 0px 2px 5px rgb(128 127 127);
}

#list,
#markdown {
    /* backdrop-filter: blur(15px); */
    background-color: #ffffff8e;
}

#content {
    margin: auto;
    padding-top: 6em;
    /* margin: 1em; */
}

.QRcode {
    max-width: 20em;
}

.TgImg {
    height: 1.5em;
}


/* 辅助类 */

.middle {
    /* 让自身在父元素中水平居中，控制自身而不是子元素。 */
    vertical-align: middle;
}

.space {
    /* span.space用来代替空格 */
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.ctime,
.looks {
    border: 1px solid #000000b7;
    display: inline-flex;
    padding: 00px 3px 0px 3px;
    align-items: center;
    border-radius: 16px;
    font-size: 0.7em;
    color: #000000b7;
}

.tabs {
    /* padding-left: 1em; */
}

.tabs a {
    color: #ffffff;
    margin: 0px 3px;
    padding: 0px 3px 0px 3px;
    display: inline-flex;
    clip-path: polygon(0% 50%, 1em 0%, 100% 0%, 100% 100%, 1em 100%);
    background: #000000ce;
    align-items: center;
    font-size: 0.7em;
}

.clear {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0
}

hr {
    border: none;
    border-top: 1px solid #AFAFAF;
    margin: 5px;
}

.Attributes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #808080;
}

.Attributes svg {
    fill: currentColor;
    width: 1.3em;
    padding-right: 0.2em;
}

.tabs svg {
    width: 0.6em;
    height: 0.6em;
    fill: #ffffff;
    margin: 0px 0.2em;
}

@keyframes colorchange {
    0% {
        background-color: rgb(17, 70, 156);
        /* from: blue */
    }
    100% {
        background-color: rgb(103, 164, 255);
        /* purple     */
    }
}

#home {
    background-image: url("/dist/head.jpg");
    background-size: 100%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    /* right:  20px; */
    right: calc((100% - 1300px) / 2 + 30px);
    top: 2em;
    background-color: rgb(198, 198, 198);
    border: 0px solid #505050;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgb(128, 127, 127);
    z-index: 100;
    padding: 8px;
    outline: none;
}

@media screen and (max-width: 1300px) {
    #home {
        right: 20px;
    }
}

#home::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    background-color: rgba(207, 219, 219, 0.452);
    transform: translate(-50%, -50%);
}

#home:active::before {
    width: 100%;
    padding-top: 100%;
    transition: width .2s ease-out, padding-top .2s ease-out;
}

#home:focus:not(:focus-visible) {
    outline: 0;
}


/* 横幅样式 */

#Banner {
    margin: 0;
    width: 100%;
    height: 200px;
    /* font-family: "Exo", sans-serif; */
    color: #fff;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

#comment {
    padding: 3em;
}

label {
    display: block;
}

.mdui-textfield-input {
    margin-bottom: 1em;
}

a[target="_blank"] {
    /* 新标签页打开标记 */
    background-position: center right;
    background-repeat: no-repeat;
    background-image: url(/dist/external-ltr.png);
    padding-right: 13px;
}

* {
    /* 取消手机端chrome点击按钮时蓝色图层覆盖 */
    -webkit-tap-highlight-color: transparent;
}

a {
    position: relative;
    text-decoration: none;
    word-break: break-all;
    color: #1808fb;
}

a:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: #52C11F;
    transition: all .1s;
}

a:hover:before {
    width: 100%;
    left: 0;
    right: 0;
}

.button {
    box-shadow: 0 3px 0 0 #367f14, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
    background-color: #52C11F;
    background-image: linear-gradient(-45deg, #52C11F, #7ccc14);
    color: #ffffff;
    display: inline-block;
    margin: 6px;
    font-size: inherit;
    line-height: 1.42;
    padding: 0.8em 1.6em;
    font-weight: normal;
    border-width: 0;
    border-style: solid;
    border-radius: 0.2666666667em;
    cursor: pointer;
    font-family: "Booster Next FY", "Avenir Next", Avenir, sans-serif;
    user-select: none;
    vertical-align: bottom;
    transition: box-shadow 0.2s, transform 0.2s, color 0.2s;
}

.button-min {
    /* font-size: 1em; */
    line-height: 0.2em;
}

.button:hover {
    box-shadow: 0 3px 0 0 #367f14, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;
}

.button:hover:before {
    /* 清楚a带来的下画动画样式 */
    content: none;
}

.button:active {
    box-shadow: 0 0px 0 0 #2d6911, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;
    transition: 0s;
    color: #367f14;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}