/* General use */

::-moz-selection,
::selection {
    color: white;
    text-shadow: none;
    background-color: var(--color-accent);
}

body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial",
        "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei",
        "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC",
        "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC",
        "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
    font-size: 16px;
    color: var(--color-text);
    background-color: var(--color-body);
    overflow-x: hidden;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin: 30px 0;
}

@media screen and (max-width: 768px) {
    p {
        margin: 25px 0;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:
        -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial",
        "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei",
        "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC",
        "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC",
        "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
    line-height: 1.7;
    line-height: 1.1;
    font-weight: bold;
}

h4 {
    font-size: 21px;
}

a {
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-accent);
}

article {
    min-height: 400px;
    overflow: hidden;

    background-color: var(--color-body);

    /* background-image:
        linear-gradient(
            to right,
            var(--color-gray-lighter) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--color-gray-lighter) 1px,
            transparent 1px
        );
    background-size: 7em 7em;
    background-position:
        0 0,
        0 0; */

    background-image: var(--img-article);

    padding-bottom: 2em;
    border-bottom: solid 1em var(--color-body);

    /* flex: 1; */
}

blockquote {
    color: gray;
    font-style: italic;
    font-size: 0.95em;
    margin: 20px 0 20px;
}

blockquote p {
    margin: 0;
}

small.img-hint {
    display: block;
    margin-top: -20px;
    text-align: center;
}

br + small.img-hint {
    margin-top: -40px;
}

img.shadow {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 5px 0px;
}

select {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 15px;
    color: var(--color-accent);
    border-color: var(--color-accent);
    padding: 0em 0.4em;
    background: white;
}

select.sel-lang {
    margin: 0;
    border: solid 0px transparent;
    cursor: pointer;
    min-height: 28px;
    font-size: 14px;
}

table {
    margin-top: 10px;
}

table.table > tbody th,
table.table > thead th,
table.table > tbody td,
table.table > thead td {
    border: 1px solid #eee !important;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        border: 0;
    }
}

pre,
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

pre code {
    display: block;
    width: auto;
    white-space: pre;
    word-wrap: normal;
}

code,
kbd,
pre,
samp {
    font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
}

img::selection {
    color: white;
    background: transparent;
}

img::-moz-selection {
    color: white;
    background: transparent;
}

.button {
    /* background-color: white; */
    background-color: transparent;
    padding: 10px;
    /* color: var(--color-gray); */
}

.button:hover {
    background-color: var(--color-button-bg-hover);
    transition: background-color 0.2s;
}