/* RTheme v3.0 */
/* Author: RavelloH */

/* global variable */
:root {
    --theme-gray-lighter: #393939;
    --theme-gray-light: #393631;
    --theme-gray: #252525;
    --theme-gray-dark: #1e1e1e;
    --theme-black: #111111;
    --theme-white: #c6c9ce;
    --theme-white-light: #ffffff;
    --theme-white-dark: #999b9f;
    --theme-blue-light: #03a9f4;
    --theme-blue-dark: #0078d7;
    --theme-yellow: #ffa30a;
    --theme-yellow-dark: #554400;
    --theme-red: #8e0800;
    --theme-red-dark: #821e1e95;
    --theme-orange: #fc560b;
    --theme-green-light: #5cdb95;
    --theme-green-dark: #357e56;
    --theme-fonts-regular: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Segoe UI',
    'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', system-ui;
    --theme-fonts-mono: 'IBMPlex', 'Courier New', monospace;
    --theme-fonts-special: 'Furore', 'Geometos';
    --theme-base-px: 14px;
    --px1: 0.071428571428571rem;
    --px2: 0.142857142857142rem;
    --px3: 0.214285714285714rem;
    --px4: 0.285714285714285rem;
    --px5: 0.357142857142857rem;
    --px6: 0.428571428571428rem;
    --px7: 0.5rem;
    --px8: 0.571428571428571rem;
    --px9: 0.642857142857142rem;
    --px10: 0.714285714285714rem;
    --px11: 0.785714285714285rem;
    --px12: 0.857142857142857rem;
    --px13: 0.928571428571428rem;
    --px14: 1rem;
    --px15: 1.071428571428571rem;
    --px16: 1.142857142857142rem;
    --px17: 1.214285714285714rem;
    --px18: 1.285714285714285rem;
    --px19: 1.357142857142857rem;
    --px20: 1.428571428571428rem;
}

[data-theme='light'] {
    --todo: 'yes';
}

/* fonts import */
/* main font */
@font-face {
    font-family: 'HarmonyOS';
    src: local('HarmonyOS Sans'), local('HarmonyOS'), local('Harmony OS');
    src: url('../fonts/HarmonyOS.ttf');
    font-display: swap;
}
/* effect font */
@font-face {
    font-family: 'Furore';
    src: url('../fonts/Furore.ttf'), local('Furore');
    font-display: swap;
}
@font-face {
    font-family: 'Geometos';
    src:
    url('../fonts/Geometos.ttf') format('truetype'),
    url('../fonts/Geometos.woff') format('woff'),
    local('Geometos');
    font-display: swap;
}
@font-face {
    font-family: 'ConnectCode39';
    src: url('../fonts/ConnectCode39.ttf'), local('ConnectCode39');
    font-display: swap;
}
/* code font */
@font-face {
    font-family: 'IBMPlex';
    src: url('../fonts/IBMPlex.ttf'), local('IBMPlex');
    font-display: swap;
}

/* global */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus-visible {
    outline: var(--theme-white) 2px solid;
    border-radius: 4px;
}

html {
    font-size: 14px;
    font-family: var(--theme-fonts-regular);
    line-height: 1.4;
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    color: var(--theme-white);
    background-color: var(--theme-black);
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    position: fixed;
    right: 0;
    -webkit-transition: right 450ms;
    -o-transition: right 450ms;
    transition: right 450ms;
}

body.active {
    right: 21.42857142857142rem;
}

strong:not(#sidebar *, footer *, #logo *, .button),
.strong {
    font-weight: bold;
    color: var(--theme-white-light);
}

#showcase {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: 100%;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    padding: calc(1.5rem + 1%) calc(40px + 1%) calc(2.25rem + 0.75%) calc(40px + 1%);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #1e1e1e00;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #11111100;
    margin: 0 0 0 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #c6c9ce60;
    -webkit-transition: background-color 0.4s;
    transition: background-color 0.4s;
}

::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover {
    background-color: #c6c9ce;
}

::-webkit-scrollbar-corner,
::-webkit-resizer,
::-webkit-scrollbar-track-piece {
    background: #1e1e1e00;
}
::-webkit-scrollbar-button {
    display: none;
}

::-moz-selection {
    background-color: var(--theme-blue-dark);
    border-radius: 4px;
    color: var(--theme-white-light);
    text-decoration: underline 0.1em;
}

::selection {
    background-color: var(--theme-blue-dark);
    border-radius: 4px;
    color: var(--theme-white-light);
    -webkit-text-decoration: underline 0.1em;
    text-decoration: underline 0.1em;
}

::-moz-selection {
    background-color: var(--theme-blue-dark);
    border-radius: 4px;
    color: var(--theme-white-light);
    text-decoration: underline 0.1em;
}

.barcode {
    font-family: ConnectCode39;
    font-size: 2em;
}

h1,
.h1 {
    font-size: 3.142rem;
    line-height: 3.428rem;
    color: #c6c9ce;
}

h2,
.h2 {
    font-size: 2.428rem;
    line-height: 2.857rem;
}

h3,
.h3 {
    font-size: 1.714rem;
    line-height: 2.286rem;
}

h4,
.h4 {
    font-size: 1.428rem;
    line-height: 2rem;
}

h5,
.h5 {
    font-size: 1.143rem;
    line-height: 1.714rem;
}

h6,
.h6 {
    font-size: 12px;
    line-height: 20px;
}

#cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background: #c6c9ce;
    border-radius: 8px;
    opacity: 0.25;
    z-index: 10000;
    pointer-events: none;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -webkit-transition-property: background, opacity, -webkit-transform;
    transition-property: background, opacity, -webkit-transform;
    -o-transition-property: background, opacity, transform;
    transition-property: background, opacity, transform;
    transition-property: background, opacity, transform, -webkit-transform;
}

#cursor.hidden {
    opacity: 0;
}

#cursor.hover {
    opacity: 0.1;
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    transform: scale(2.5);
}

#cursor.active {
    opacity: 0.5;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

#progress-container {
    height: 0.8em;
    width: 20rem;
    border-radius: 0.4rem;
    background: #000;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    margin: 15px 5px 5px 5px;
    opacity: 1;
}

#progress-container #progress {
    height: 100%;
    width: 0;
    border-radius: 0.4rem;
    background: #c6c9ce50;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
    max-width: 100%;
}

#music-progress-container {
    height: 0.5em;
    width: calc(100% - 4px);
    border-radius: 0.4rem;
    background: #000;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    margin: 3px 2px 3px 2px;
    padding: 0;
    opacity: 1;
}

#music-progress-container #music-progress {
    height: 98%;
    width: 0;
    border-radius: 0.4rem;
    background: #c6c9ce50;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
}

#progress-container #progress.red {
    background: var(--theme-red-dark);
}

#progress-container #progress.yellow {
    background: var(--theme-yellow-dark);
}

#sidebar {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 21.42857142857142rem;
    height: 100%;
    top: 0;
    left: 100%;
    background-color: var(--theme-gray-dark);
    padding: 2rem 25px 2rem 25px;
}

#userbar {
    padding: 2rem 25px 2rem 25px;
}

#sidebar-menu ul,
#sidebar-menu {
    overflow: hidden;
}

#sidebar-mid {
    overflow: auto;
}
#sidebar h2 {
    font-size: 3.572rem;
    font-weight: 700;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
}

#sidebar h3 {
    font-size: 2.857rem;
    font-weight: 700;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
}
#sidebar-menu {
    padding: 0 2em;
    margin: 0 auto;
    min-height: 50%;
}

#sidebar-menu ul {
    padding: 0;
    margin: 8px auto;
}

#sidebar-menu ul li {
    list-style: none;
}

#sidebar-menu ul li a {
    text-decoration: none;
    font-size: 1.429rem;
    color: var(--theme-white);
    font-family: Furore, var(--theme-fonts-regular);
    letter-spacing: 2px;
}
span:not(a span) {
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
#infobar span.i {
    color: var(--theme-white);
}
#sidebar-menu ul li a:hover,
#side-iconset ul li a:hover,
#infobar span.i:hover {
    color: var(--theme-white-light);
}

.icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.icons span {
    font-size: 1.2em;
    font-family: iconfont, Furore;
}

#viewmap > article #articles-body a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a) {
    color: var(--theme-white-dark);
}

a {
    background-color: transparent;
    background-image: none;
    color: var(--theme-white);
    text-decoration: none;
    outline: 0;
    display: inline-block;
    position: relative;
    -webkit-transition: all 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
    -o-transition: all 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
    transition: all 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
}

a:after {
    content: '';
    position: absolute;
    width: 100%;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
    transition: -webkit-transform 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
    -o-transition: transform 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
    transition: transform 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
    transition: transform 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09), -webkit-transform 0.3s cubic-bezier(0.28, 0.94, 0.82, 1.09);
}

a:not(
#sidebar *,
footer *,
#logo *,
.button *,
.tag,
.articles-tags a,
.no-effect,
.taglist a,
#articles-menu *,
.flex-iconset *
):hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
}

hr {
    border: 0;
    border-top: 1px solid #dadada;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    height: 0;
    margin-top: 1.714rem;
    margin-bottom: 1.714rem;
}

#dot-load {
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

#shade-global,
#shade-context,
#load-shade {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    opacity: 0;
    background: #111111;
}
#shade-global.active,
#shade-context.active {
    opacity: 0.5;
    z-index: 10;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#shade-global.active {
    z-index: 70;
}
#load-shade.active {
    opacity: 1;
    z-index: 10;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#load-shade.none {
    display: none;
}
#load-shade {
    display: -ms-grid;
    display: grid;
    place-items: center;
    justify-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#infobar {
    top: 100%;
    position: absolute;
    width: 100%;
    height: 55%;
    background: var(--theme-gray-dark);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    z-index: 71;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#infobar.active {
    top: 45%;
}

#infobar-header,
#userbar-head {
    font-size: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--theme-gray);
}

#infobar-header *,
#userbar-head * {
    margin: 0.357rem 1.071rem;
}

#infobar-title,
#userbar-title {
    font-weight: 500;
    margin: 0.357rem 1.786rem;
    text-transform: uppercase;
}

#infobar-context {
    height: calc(100% - 6rem);
    margin: 0.714rem 1.786rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#userbar-context {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    height: 100%;
    padding: 1em 0;
}

#user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

#user-describe {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: 1em;
}

#user-name {
    font-size: 1.5em;
    color: var(--theme-white-light);
    font-weight: 500;
}

#user-main {
    padding: 1em 0 0 0;
    overflow-y: auto;
}

#infobar-left {
    -webkit-box-flex: 6;
    -ms-flex: 6;
    flex: 6;
    padding: 0 0 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 60%;
}

#infobar-right {
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
    padding: 0 0 0 2em;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 40%;
}

#time {
    font-size: 5em;
    font-weight: 700;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
}

#music-player {
    border: 1px solid var(--theme-white);
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 0.714rem 0.357rem 0.214rem 0.357rem;
    margin: 0.357rem 0;
    border-radius: 5px;
}

#music-operation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

#music-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

#music-name {
    font-weight: bold;
}

/* header */
header,
footer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 1rem;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
}

footer {
    height: 1.4em;
}

#header-side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#navs,
#icons-left {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: right;
    font-weight: bold;
    overflow: hidden;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#navs nav a {
    margin-right: 2.143rem;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}

#navs nav a.active:not(a:hover) {
    color: var(--theme-white-light);
}

#logo,
#icons-right {
    max-width: 25%;
    overflow: hidden;
    white-space: nowrap;
    text-transform: uppercase;
    display: inline-block;
}

#logo a,
#icons-right a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--theme-gray-light);
}

#icons-right {
    font-size: 1.4em;
    max-width: unset;
}

#icons-left a {
    margin-right: 2em;
    color: var(--theme-gray-light);
    font-size: 1.2em;
}

#avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: inline-block;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#user-avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: inline-block;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#authorname {
    height: 3.2rem;
    display: inline-block;
}

#toggle {
    left: 0;
    position: relative;
    width: 2em;
    height: 2em;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAfCAYAAAB3XZQBAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAM0lEQVRYw+3WsREAIAzEMML+Oz8FQxAu0gQuXUmyPrVfB4gHALjKVYofFg8AbRkz8dPiD+qQDAquHlwPAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: center;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 11;
}

#toggle.active {
    left: 0;
    background: url('data:image/png;base64,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');
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: center;
    cursor: pointer;
}

#logo:hover #avatar {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-filter: contrast(120%);
    filter: contrast(120%);
}
/* footer */
#icons-left ul,
.flex-iconset ul,
#icons-right ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 1.5em;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.flex-iconset {
    margin: 0.714rem 0 0 0;
}

#icons-right a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#icons-left *:hover,
#icons-right *:hover {
    color: var(--theme-orange);
}

#icons-right .red {
    color: var(--theme-red-dark);
}

#icons-right .yellow {
    color: var(--theme-yellow-dark);
}

span.red {
    color: var(--theme-red);
}
span.yellow {
    color: var(--theme-yellow);
}

#side-iconset ul li a {
    color: var(--theme-white);
}

ul li a span {
    top: 0.25ex;
}

.circle-loader {
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 4px solid;
    border-color: var(--theme-gray);
    border-right-color: var(--theme-gray-lighter);
    -webkit-animation: circle-loader-frames 1s infinite linear;
    animation: circle-loader-frames 1s infinite linear;
    display: inline-block;
}

@-webkit-keyframes circle-loader-frames {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

@keyframes circle-loader-frames {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}

.breath * {
    -webkit-animation: breath-frames 1.5s infinite ease-in-out;
    animation: breath-frames 1.5s infinite ease-in-out;
}

.breath span:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.breath span:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.breath span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.breath span:nth-child(4) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.breath span:nth-child(5) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.breath span:nth-child(6) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

@-webkit-keyframes breath-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 1;
    }
}

@keyframes breath-frames {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        opacity: 1;
    }
}
/* main */
#main,
#viewmap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%;
    height: 100%;
    left: 0;
    margin: 0.7142rem 0.1428rem;
    overflow: hidden;
}

#viewmap > div {
    max-height: 100%;
}

/* tag */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
pre,
dl,
dd,
blockquote,
button,
input {
    margin: 0;
}

input,
legend,
textarea,
button {
    padding: 0;
}

form,
fieldset,
th,
td {
    margin: 0;
    padding: 0;
}

ol,
ul {
    margin: 0.8571rem 0;
    padding: 0 0 0 2.2857rem;
}

ol.reset,
ul.reset {
    margin: 0;
    padding: 0;
    list-style: none;
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

a:link {
    color: var(--theme-white);
}

a:visited {
    color: #c6c9ce50;
}

a:hover {
    color: var(--theme-blue-light);
    text-decoration: none;
}

a:active {
    color: var(--theme-blue-dark);
}
.green-text {
    background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-white-light)), to(var(--theme-green-light)));
    background-image: -o-linear-gradient(left, var(--theme-white-light), var(--theme-green-light));
    background-image: linear-gradient(to right, var(--theme-white-light), var(--theme-green-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

.red-text {
    background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-white-light)), to(var(--theme-red)));
    background-image: -o-linear-gradient(left, var(--theme-white-light), var(--theme-red));
    background-image: linear-gradient(to right, var(--theme-white-light), var(--theme-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

.texts {
    position: relative;
}

.texts h2,
#load-content h2 {
    font-size: 5em;
    font-weight: 800;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
}

.texts h3,
#load-content h3,
#infobar-left h3 {
    font-size: 4em;
    font-weight: 700;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
}

.texts h4,
#infobar-left h4,
#load-content h4,
#infobar-right h4 {
    font-size: 2em;
    font-weight: 600;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
}

.texts h5,
#infobar-left h5 {
    font-size: 1.7em;
    font-weight: 600;
    line-height: 1em;
}
.texts p,
.textarea {
    font-size: 1em;
    color: #fff;
    margin: 1.4286rem 0;
    font-weight: 400;
    max-width: 700px;
}

a.button {
    display: inline-block;
    font-size: 1em;
    background: #fff;
    padding: 0.7143rem 2.1428rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    margin-top: 0.7143rem;
    color: #111;
    letter-spacing: 2px;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

a.button:hover {
    letter-spacing: 6px;
}

.virgule {
    font-weight: 400;
    max-width: 100%;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 1px;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    font-size: 1.5em;
    font-family: 'Furore', sans-serif;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    line-height: 130%;
    margin: 0.357rem 0;
    display: block;
}

.flex-items,
.flex-items-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -ms-flex-line-pack: center;
    align-content: center;
    height: 1.4em;
}

.flex-items-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: auto;
}

.info-alert {
    background-color: #821e1e75;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border: 1px solid var(--theme-red-dark);
    border-radius: 5px;
    padding: 0.7142rem 0.357rem;
    margin: 0.3571rem 0;
}

.info-warning {
    background-color: #55440075;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border: 1px solid var(--theme-yellow-dark);
    border-radius: 5px;
    padding: 0.7142rem 0.357rem;
    margin: 0.3571rem 0;
}

.info-success {
    background-color: #357e5675;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border: 1px solid var(--theme-green-dark);
    border-radius: 5px;
    padding: 0.7142rem 0.357rem;
    margin: 0.3571rem 0;
}
.info {
    border: 1px solid var(--theme-white);
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 0.7142rem 0.357rem;
    margin: 0.3571rem 0;
    border-radius: 5px;
}

.form-control {
    position: relative;
    margin: 0px 0 2.8571rem;
    width: 100%;
}

.form-control input {
    background-color: transparent;
    border: 0;
    border-bottom: 2px #fff solid;
    display: block;
    width: 100%;
    padding: 0.8571rem 0;
    font-size: 1.2em;
    color: #fff;
    -webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
}

.form-control input:focus,
.form-control input:valid {
    outline: 0;
    border-bottom-color: lightblue;
}

.form-control input[invalid] {
    outline: 0;
    border-bottom-color: var(--theme-red);
}

.form-control label {
    position: absolute;
    top: 0.8571rem;
    left: 0;
    pointer-events: none;
}
.input {
    position: relative;
}
.form-control label span {
    display: inline-block;
    font-size: 1.1428rem;
    min-width: 0.3571rem;
    color: #fff;
    -webkit-transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition-delay: calc(var(--i) * 50ms);
    -o-transition-delay: calc(var(--i) * 50ms);
    transition-delay: calc(var(--i) * 50ms);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
    color: lightblue;
    -webkit-transform: translateY(-1.7857rem);
    -ms-transform: translateY(-1.7857rem);
    transform: translateY(-1.7857rem);
}

.listlines {
    max-width: 40%;
    min-width: 35%;
    overflow-y: auto;
    overflow-x: hidden;
}

.work-program > h4 {
    margin: 0 0 0.7142rem 0;
    font-weight: 700;
    font-size: 1.5em;
    -webkit-text-decoration: underline 0.1em;
    text-decoration: underline 0.1em;
}

.work-program > aside {
    display: none;
}

#infobar-left {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#infobar-left::-webkit-scrollbar,
.share-input::-webkit-scrollbar {
    display: none;
}

img.loaderror::before {
    position: absolute;
    font-family: 'Remix';
    top: 0;
    left: 0;
    display: block;
    content: '\e326';
    background-size: cover;
}

.music-search-img img {
    width: 3rem;
    height: 3rem;
    border-radius: 5px;
    background-image: url('../images/music.jpg');
    background-size: 3rem 3rem;
}

.music-search-img {
    padding: 0 0.8em 0 0;
}

.music-search-info,
.setting-info {
    width: calc(100% - 80px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 9;
    -ms-flex: 9 1 auto;
    flex: 9 1 auto;
}

.music-search-name,
.setting-name {
    font-weight: bold;
    color: var(--theme-white-light);
    font-size: 1.25rem;
    line-height: 1.35rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.music-search-author,
.setting-explain {
    font-size: 1rem;
    line-height: 1rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.music-search-title,
.setting-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 3rem;
    width: calc(100% - 100px);
}

.setting-title {
    width: calc(100% - 50px);
}

.music-search-result,
.setting-result {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 3rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.music-search-operation,
.setting-operation {
    padding: 0 1.5rem 0 0;
    font-size: 1.2rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.music-search-list hr,
.setting-list hr,
hr.light {
    border-top: 3px solid var(--theme-gray);
    height: 1px;
    margin: 0;
    margin-top: 3px;
    padding-bottom: 3px;
}

.square-loader {
    width: 150px;
    height: 15px;
    margin: 100px auto;
    text-align: center;
}
.square-loader span {
    display: inline-block;
    width: 1.0714rem;
    height: 100%;
    margin-right: 0.3571rem;
    background: var(--theme-gray-lighter);
    -webkit-animation: load 1.51s ease infinite;
    animation: load 1.51s ease infinite;
}
.square-loader span:last-child {
    margin-right: 0px;
}
@-webkit-keyframes load {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes load {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.square-loader span:nth-child(1) {
    -webkit-animation-delay: 0.13s;
    animation-delay: 0.13s;
}
.square-loader span:nth-child(2) {
    -webkit-animation-delay: 0.26s;
    animation-delay: 0.26s;
}
.square-loader span:nth-child(3) {
    -webkit-animation-delay: 0.39s;
    animation-delay: 0.39s;
}
.square-loader span:nth-child(4) {
    -webkit-animation-delay: 0.52s;
    animation-delay: 0.52s;
}
.square-loader span:nth-child(5) {
    -webkit-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

.img-show,
.img-show-out {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    z-index: 9000;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    background-color: #11111180;
    top: 0;
    left: 0;
    display: -ms-grid;
    display: grid;
    place-items: center;
    justify-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.img-fullscreen,
.img-fullscreen-out {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    z-index: 9100;
    position: absolute;
    max-width: 85%;
    max-height: 85%;
    opacity: 1;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.img-fullscreen-out {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
}

.img-show-out {
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 0;
}

.share-area {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    background-color: var(--theme-gray-dark);
    color: var(--theme-white);
    border: 2px solid var(--theme-gray-lighter);
    border-radius: 4px;
    padding: 0;
    margin: 0.3571rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.share-input {
    padding: 0.25rem 10px;
    width: calc(100% - 50px);
    display: inline;
    line-height: 1.5rem;
    height: 100%;
    font-size: 1.1rem;
    color: #c6c9ce80;
    overflow-x: auto;
    overflow-y: hidden;
    word-break: break-all;
    white-space: nowrap;
}

.copy-button {
    position: relative;
    width: 50px;
    background-color: var(--theme-gray-lighter);
    display: inline;
    height: calc(2rem - 2px);
    padding: auto;
    margin: 0;
    float: left;
    text-align: center;
    margin: auto;
}

.big-button {
    text-align: center;
    height: calc(0.7143rem * 2 + 1.4em);
    color: var(--theme-black);
    background-color: var(--theme-white-light);
    display: inline-block;
    font-size: 1.2rem;
    padding: 0.7143rem 2.1428rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    margin: 0.7143rem 0;
    letter-spacing: 2px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--theme-black);
}

.big-button:hover {
    background-color: #d0d0d0;
}
.big-button:active {
    background-color: #b0b0b0;
}
.big-button.block {
    border: 1px solid var(--theme-white-light);
    background-color: var(--theme-black);
    color: var(--theme-white-light);
}
#uid,
.page-id {
    -o-text-overflow: '';
    text-overflow: '';
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}

.switchs {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.switchs::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: var(--theme-white);
    top: 1px;
    left: 1px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input[type='checkbox']:checked + .switchs::after {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

input[type='checkbox']:checked + .switchs {
    background-color: var(--theme-gray-lighter);
}

.setting-list input {
    position: absolute;
    left: -9999px;
}

.speed-test-result {
    font-family: Furore;
}

.translucent {
    opacity: 0.5;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.listlines * {
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.work-show,
.filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-right: 1.1428rem;
    height: 100%;
}

.operation-block,
.operation-block:active {
    display: block;
    background-color: var(--theme-gray-dark);
    border-radius: 4px;
    text-align: center;
    padding: 0.42857rem;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.operation-block:hover {
    background-color: var(--theme-gray);
}

.half {
    width: 55%;
}

.work-show-body,
.filter-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.work-describe,
.search-result-context {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#markdown-area h1,
#markdown-area h2,
#viewmap > article h1 {
    font-size: 2.428rem;
    line-height: 2.428rem;
    color: var(--theme-white-light);
    margin-top: 0.6em;
}

#markdown-area h3,
#viewmap > article h2 {
    font-size: 2em;
    margin-top: 0.5em;
}

#markdown-area h4,
#viewmap > article h3 {
    font-size: 1.75em;
    margin-top: 0.4em;
}

#markdown-area h5,
#viewmap > article h4 {
    font-size: 1.5em;
    margin-top: 0.4em;
}

#markdown-area h6,
#viewmap > article h5 {
    font-size: 1.2em;
    margin-top: 0.3em;
}

#viewmap > article h6 {
    font-size: 1.05em;
    margin-top: 0.3em;
}

#markdown-area h6::before,
#markdown-area h5::before,
#markdown-area h4::before,
#markdown-area h3::before,
#markdown-area h2::before,
#markdown-area h1::before {
    content: '# ';
    color: #f1f5fb;
}
#viewmap > article h2::before,
#viewmap > article h3::before,
#viewmap > article h4::before,
#viewmap > article h5::before,
#viewmap > article h6::before {
    content: '# ';
}

#userbar {
    top: 0;
    left: -21.42857142857142rem;
    position: absolute;
    width: 21.42857142857142rem;
    height: 100%;
    background: var(--theme-gray-dark);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    z-index: 71;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#userbar.active {
    left: 0;
}

blockquote,
.infos {
    border-left: 4px solid #7a7e80;
    padding: 0.4em;
    margin: 1em 0;
    font-size: 1em;
    font-weight: 300;
    color: #c6c9ce;
    background-color: rgb(255 255 255 / 5%);
    -webkit-backdrop-filter: blur(1rem) brightness(80%);
    backdrop-filter: blur(1rem) brightness(80%);
    margin-left: 10%;
    margin-right: 10%;
    -webkit-transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    transition: background-color 0.4s;
}

blockquote:hover,
.infos:hover {
    background-color: var(--theme-gray-lighter);
    color: #fff;
}

blockquote:hover a,
.infos:hover a {
    -webkit-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
    color: #5babec;
}

pre {
    background: #2d2d2d;
    color: rgb(201, 209, 217);
    font-family: IBMPlex, monospace;
    text-align: left;
    padding: 1em;
    padding-left: 0.8em;
    margin: 1em;
    border-radius: 0.3571rem;
    counter-reset: line;
    word-spacing: normal;
    word-break: normal;
    line-height: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}

pre span:not(span[highlight], span[class*='hljs']) {
    display: block;
    line-height: 1.8rem;
    white-space: pre;
}

pre span:not(span[highlight], span[class*='hljs']):before {
    counter-increment: line;
    content: counter(line);
    display: inline-block;
    width: 3em;
    text-align: right;
    border-right: 2px solid #999;
    padding-right: 0.8em;
    margin-right: 1em;
    color: #999;
}

pre span:not(span[highlight], span[class*='hljs']):hover:before {
    color: #c6c9ce;
}

pre:has(span) {
    white-space: normal;
}

code {
    font-family: IBMPlex, Consolas, Monaco, courier, monospace;
    line-height: initial;
    padding: 0.1em 0.4em;
    margin: 0;
    font-size: 85%;
    white-space: break-spaces;
    border-radius: 6px;
}

pre code {
    padding: 0.1em 0;
    color: rgb(201, 209, 217);
    background-color: #2d2d2d;
}

.article code:not(pre code),
#markdown-area code:not(pre code) {
    background-color: #333333;
}

#markdown-area p {
    color: #f1f5fb;
    margin: 0.6em 0;
}

table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 90%;
    color: #c6c9ce;
    text-align: center;
    margin: 0 auto;
    overflow: auto;
    font-size: 1em;
}

table td,
table th {
    border: 1px solid #ddd;
    padding: 0.42857rem;
}

table tr:hover {
    background-color: #1e1e1e;
}

table th {
    padding-top: 0.42857rem;
    padding-bottom: 0.42857rem;
    font-weight: bolder;
    background-color: #80808040;
    color: white;
}

.link,
a:not(header *, footer *, #sidebar *, .noline, .no-effect, a:has(> img))[href^='http'] {
    text-decoration: underline;
}
.link::before,
a:not(header *, footer *, #sidebar *, .noline, .no-effect, a:has(> img))[href^='http']::before {
    font-family: 'Remix' !important;
    content: '\e2ff';
    font-size: 0.9em;
    bottom: 0;
}

.texts img {
    max-height: 100%;
    max-width: 100%;
}

.imgcard {
    width: 100%;
}

.imgcard img {
    width: 100%;
    height: auto;
    min-height: 14.2857rem;
    margin-bottom: 10px;
    border: 1px solid var(--theme-gray);
    border-radius: 4px;
}

#viewmap > article img:not(#articles-footer *, .reset) {
    max-width: 95%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
    text-align: center;
    max-height: 60vh;
    display: block;
}

.imgarea {
    --column-count-small: 1;
    --column-count-medium: 2;
    --column-count-large: 3;
    --column-gap: 0.125rem;
    padding: var(--column-gap);
}

.imglist {
    -webkit-column-gap: var(--column-gap);
    -moz-column-gap: var(--column-gap);
    column-gap: var(--column-gap);
    -webkit-column-count: var(--column-count-small);
    -moz-column-count: var(--column-count-small);
    column-count: var(--column-count-small);
    -webkit-column-width: calc(1 / var(--column-count-small) * 100%);
    -moz-column-width: calc(1 / var(--column-count-small) * 100%);
    column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
    .imglist {
        -webkit-column-count: var(--column-count-medium);
        -moz-column-count: var(--column-count-medium);
        column-count: var(--column-count-medium);
        -webkit-column-width: calc(1 / var(--column-count-medium) * 100%);
        -moz-column-width: calc(1 / var(--column-count-medium) * 100%);
        column-width: calc(1 / var(--column-count-medium) * 100%);
    }
}

@media only screen and (min-width: 800px) {
    .imglist {
        -webkit-column-count: var(--column-count-large);
        -moz-column-count: var(--column-count-large);
        column-count: var(--column-count-large);
        -webkit-column-width: calc(1 / var(--column-count-large) * 100%);
        -moz-column-width: calc(1 / var(--column-count-large) * 100%);
        column-width: calc(1 / var(--column-count-large) * 100%);
    }
}

.imglist > img {
    width: 100%;
    height: auto;
    margin: var(--column-gap) 0;
    display: block;
    border: 1px solid var(--theme-gray-dark);
    border-radius: 4px;
}

.imglist > img:first-child {
    margin: 0 0 var(--column-gap);
}

#showarea {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* 自定义属性 */
.center {
    text-align: center;
}
.full {
    width: 100%;
}
.overflow {
    overflow-y: auto;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

img.border {
    border: 2px solid #c6c9ce;
}

.hljs span::-moz-selection, .hljs::-moz-selection {
    background: #373b41;
}

.hljs span::selection,
.hljs::selection {
    background: #373b41;
}

.hljs span::-moz-selection,
.hljs::-moz-selection {
    background: #373b41;
}

.hljs-name,
.hljs-title {
    color: #f0c674;
}

.hljs-comment,
.hljs-meta,
.hljs-meta .hljs-keyword {
    color: #707880;
}

.hljs-deletion,
.hljs-link,
.hljs-literal,
.hljs-number,
.hljs-symbol {
    color: #c66;
}

.hljs-addition,
.hljs-doctag,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-string {
    color: #b5bd68;
}

.hljs-attribute,
.hljs-code,
.hljs-selector-id {
    color: #b294bb;
}

.hljs-bullet,
.hljs-keyword,
.hljs-selector-tag,
.hljs-tag {
    color: #81a2be;
}

.hljs-subst,
.hljs-template-tag,
.hljs-template-variable,
.hljs-variable {
    color: #8abeb7;
}

.hljs-built_in,
.hljs-quote,
.hljs-section,
.hljs-selector-class,
.hljs-type {
    color: #de935f;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 700;
}

img:not(*.loaded, header *, footer *, #sidebar *, #infobar *, #twikoo *) {
    background-color: var(--theme-gray);
    background: -o-linear-gradient(350deg, #111111 40%, #11111150 50%, #111111 60%) var(--theme-gray);
    background: linear-gradient(100deg, #111111 40%, #11111150 50%, #111111 60%) var(--theme-gray);
    background-size: 200% 100%;
    background-position-x: 180%;
    -webkit-animation: 1s loading ease-in-out 30;
    animation: 1s loading ease-in-out 30;
}

@-webkit-keyframes loading {
    to {
        background-position-x: -20%;
    }
}

@keyframes loading {
    to {
        background-position-x: -20%;
    }
}

a.tag,
a.class,
.article a.tag,
a.m,
.class a,
.articles-tags a,
.taglist a {
    display: inline-block;
    font-size: 1em;
    padding: 0.3571rem 0.7142rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 2px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    font-family: var(--theme-fonts-special), var(--theme-fonts-regular);
}

a.tag:not(.ellipsis):before,
.articles-tags a:not(.ellipsis):before,
.taglist a:before {
    content: '#';
}

a.tag + a.tag,
.articles-tags a + a,
.taglist a + a {
    margin: 0 0.1428rem 0 0;
}
a.tag,
.articles-tags a:not(#articles-header *),
.taglist a {
    background-color: var(--theme-gray-dark);
    border-radius: 20px;
}

.articles-tags .active {
    background-color: var(--theme-gray-lighter);
    color: var(--theme-white-light);
    font-weight: bold;
}

.taglist a:hover,
.articles-tags a:hover {
    color: var(--theme-white-light);
}
.taglist a.active {
    background-color: var(--theme-gray-lighter);
}

.articles-name h4 a,
.articles-info {
    width: 100%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.articles-tags:not(#articles-header .articles-tags) {
    width: 100%;
    overflow: hidden;
    display: inline-box;
    white-space: nowrap;
}

.loading {
    opacity: 0;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.loaded:not(.no-delay) {
    -webkit-transition-delay: calc((0.1s * var(--i)));
    -o-transition-delay: calc((0.1s * var(--i)));
    transition-delay: calc((0.1s * var(--i)));
    opacity: 1;
}

.no-delay,
*:hover,
.loaded:hover {
    -webkit-transition-delay: unset;
    -o-transition-delay: unset;
    transition-delay: unset;
}

.articles-info time:before {
    content: '\e8cd\ ';
    font-family: 'Remix' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    top: 0.12em;
}

.articles-info .class a {
    padding: 0.2143rem 0.3571rem;
}

.articles-info .class .active,
.class .active {
    font-weight: bold;
    color: var(--theme-white-light);
}

#viewmap > article {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-all;
    scroll-behavior: smooth;
}

#articles-body img:not(.reset) {
    max-height: 90%;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
}

#articles-body p + * {
    margin-top: 1em;
}

#articles-menu span {
    font-weight: 400;
    color: var(--theme-white);
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 1px;
    line-height: 130%;
    font-size: 1.15rem;
}

#articles-menu,
#articles-menu a {
    counter-reset: h1 h2 h3 h4 h5 h6;
    color: var(--theme-white);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#articles-menu *:hover {
    color: var(--theme-white-light);
}

#articles-menu .t6 span:before {
    counter-increment: h6;
    content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.' counter(h6) '.';
}

#articles-menu .t5 span:before {
    counter-increment: h5;
    content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.';
}

#articles-menu .t4 span:before {
    counter-increment: h4;
    content: counter(h2) '.' counter(h3) '.' counter(h4) '.';
}

#articles-menu .t3 span:before {
    counter-increment: h3;
    content: counter(h2) '.' counter(h3) '.';
}

#articles-menu .t2 span:before {
    counter-increment: h2;
    content: counter(h2) '.';
}

#articles-menu .t1 a,
#articles-more .article-name a {
    width: 100%;
    font-size: 2em;
    font-weight: 600;
    color: var(--theme-white-light);
    text-align: center;
}

#articles-menu .active {
    font-weight: 700;
    color: var(--theme-white-light);
}

.imgbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    margin: 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 1em;
}

.imgbox img {
    max-width: 100%;
    margin: 0 auto;
}

.imgbox span {
    color: var(--theme-white-dark);
    font-size: 85%;
}

code {
    line-height: initial;
    padding: 0.1em 0.4em;
    margin: 0;
    font-size: 85%;
    white-space: break-spaces;
    border-radius: 6px;
}

#articles-body code:not(pre code) {
    background-color: #333333;
}
#feed-list,
#uptime-list,
.flex-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#articles-sort span,
#feed-list a,
#mail-feed,
#uptime-list a,
.flex-list a,
#articles-sort span:active,
#feed-list a:active,
#mail-feed:active,
#uptime-list a:hover,
.flex-list a:hover {
    width: 45%;
    font-size: 1.2em;
    background-color: var(--theme-gray);
    margin: 0.35em;
    padding: 0.2em;
    text-align: center;
    line-height: 2;
    border-radius: 6px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#feed-list a,
#uptime-list a,
.flex-list a {
    width: 30%;
}

#mail-feed,
#mail-feed:active {
    width: calc(100% - 0.7em);
}

#articles-sort span:hover,
#feed-list a:hover,
#uptime-list a:hover,
#articles-sort span.active,
#mail-feed:hover {
    background-color: var(--theme-gray-lighter);
}

#feed-list div,
#mail-feed,
#uptime-list div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

mark {
    background-color: #0b7dda;
    border-radius: 4px;
    color: #fff;
    margin: 0;
}

.search-result-tags {
    display: inline-block;
    font-size: 1em;
    padding: 0.3571rem 0.7143rem;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    font-family: var(--theme-fonts-special), var(--theme-fonts-regular);
    border-radius: 4px;
    background-color: var(--theme-gray-dark);
    line-height: 1.2;
    margin-bottom: 0.2142rem;
}

.one-line,
#icon-right {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

#search-bar {
    max-width: 70%;
}

.placeholder {
    width: 15%;
    height: 15%;
}

.checkbox {
    font-size: var(--px15);
}

.checkbox *,
.checkbox *::after,
.checkbox *::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.checkbox input[type='checkbox'] {
    visibility: hidden;
    display: none;
}

.checkbox .checkbox-name {
    width: var(--px15);
}

.checkbox .checkbox-name:before {
    content: ' ';
    display: block;
    height: var(--px15);
    width: var(--px15);
    position: absolute;
    top: calc(var(--px15) * 0.125);
    left: 0;
    background: var(--theme-black);
}

.checkbox .checkbox-name:after {
    content: ' ';
    display: block;
    height: var(--px15);
    width: var(--px15);
    border: calc(var(--px15) * 0.14) solid #fff;
    -webkit-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;
    position: absolute;
    top: calc(var(--px15) * 0.125);
    left: 0;
    background: var(--theme-black);
}

.checkbox .checkbox-name:after {
    -webkit-transition: 100ms ease-in-out;
    -o-transition: 100ms ease-in-out;
    transition: 100ms ease-in-out;
}

.checkbox .checkbox-input:checked ~ .checkbox-name:after {
    border-top-style: none;
    border-right-style: none;
    -ms-transform: rotate(-45deg);
    /* IE9 */
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    height: calc(var(--px15) * 0.5);
    border-color: lightblue;
}

.checkbox .checkbox-label {
    position: relative;
    color: var(--theme-white-light);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    /* Mobile Safari: */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.checkbox .checkbox-name:after:hover,
.checkbox .checkbox-name:after:active {
    border-color: green;
}

.checkbox .checkbox-name {
    margin-right: calc(var(--px15) * 0.45);
}

#more-articles b {
    font-weight: bold;
    font-size: 1.25em;
}

#more-articles {
    margin: 1em 0;
    border: 2px solid var(--theme-gray-lighter);
    border-radius: 5px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#more-articles > div {
    width: 50%;
    padding: 1.25em;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#next:hover:not(#next:active),
#previous:hover:not(#next:active) {
    background-color: var(--theme-gray-lighter);
    color: var(--theme-white-light);
}

#more-articles #next {
    float: right;
    text-align: right;
}

.tk-footer {
    display: none;
}

#friends-link-box,
.friends-link-box {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.friends-link-item,
.link-box,
.music-box {
    background: var(--theme-gray-dark);
    border-radius: 6px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    width: 25rem;
    height: 7.142857142857142rem;
    margin: 1em;
    padding: 0.5em 1.5em 0.5em 0.5em;
}

.music-box {
    width: 25rem;
    height: 5.714285714285714rem;
    border-radius: 3em;
    margin: auto;
}

.link-box {
    margin: 1em auto;
    width: 32rem;
}

.friends-link-item:hover,
.link-box:hover,
.music-box:hover {
    background: var(--theme-gray-lighter);
    color: var(--theme-white-light);
}

.friends-link-item:hover .friends-bio,
.link-box .link-name,
.music-box .music-name {
    color: var(--theme-white-light);
}

.friends-link-item a,
.link-box a,
.music-box a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.friends-avatar,
.link-box img {
    height: 5.5em;
    width: 5.5em;
    margin: auto 1em;
    max-width: 100%;
}

.friends-avatar img {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.link-box img {
    border-radius: 4px;
}

.music-box img {
    border-radius: 50%;
    margin: auto 1em;
    height: 100%;
}

.friends-info,
.link-describe,
.music-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    width: calc(100% - 5.5em - 2em);
}

.friends-name {
    font-size: 1.75em;
    font-weight: 700;
    color: var(--theme-white-light);
    line-height: 1.2;
}

.link-describe .link-name {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--theme-white-light);
    line-height: 1.2;
}

.friends-bio,
.link-describe .link-href {
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
    font-size: 1.15em;
    font-weight: 600;
}

video {
    max-width: 100%;
    min-width: 70%;
    margin: auto;
    max-height: 60vh;
    border-radius: 4px;
}

#articles-body textarea {
    width: calc(100% - 20px);
    min-height: 21.42857142857142rem;
    border: 1px solid var(--theme-gray-lighter);
    background-color: var(--theme-gray);
    border-radius: 5px;
    margin: 10px;
    padding: 0.85em;
    color: var(--theme-white);
    font-family: var(--theme-fonts-mono);
}

kdb {
    font-family: IBMPlex, Consolas, Monaco, courier, monospace;
    text-transform: uppercase;
    line-height: initial;
    padding: 0.1em 0.4em;
    margin: 0 2px;
    font-size: 85%;
    white-space: break-spaces;
    border-radius: 6px;
    background-color: var(--theme-gray-dark);
    border: 1px solid var(--theme-white-dark);
}

#icons-left nav a {
    -webkit-transition: color 0.6s;
    -o-transition: color 0.6s;
    transition: color 0.6s;
}

#icons-left nav a:hover {
    color: var(--theme-orange);
}

/* 媒体查询 */
@media screen and (min-width: 1500px) {
    html {
        font-size: calc(0.8vw + 2px);
    }
}

@media screen and (max-width: 1000px) {
    html {
        font-size: calc(8.286px + 0.571vw);
    }
}

@media screen and (max-width: 700px) {
    #avatarname {
        display: none;
    }
    h1,
    .h1 {
        font-size: 2.5136rem;
        line-height: 2.7424rem;
        color: #c6c9ce;
    }

    h2,
    .h2 {
        font-size: 1.9424rem;
        line-height: 2.2856rem;
    }

    h3,
    .h3 {
        font-size: 1.3712rem;
        line-height: 1.8288rem;
    }

    h4,
    .h4 {
        font-size: 1.2852rem;
        line-height: 1.8rem;
    }

    h5,
    .h5 {
        font-size: 1.0287rem;
        line-height: 1.5426rem;
    }

    h6,
    .h6 {
        font-size: 12px;
        line-height: 20px;
    }
}

@media screen and (max-width: 600px) {
    #navs {
        display: none;
    }
    #showcase {
        padding: calc(1.25rem + 1%) calc(22px + 1%) calc(2rem + 0.75%) calc(22px + 1%);
    }
    #infobar {
        height: 75%;
    }
    #infobar.active {
        top: 25%;
    }
    #infobar-context {
        display: block;
        overflow: auto;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        vertical-align: bottom;
    }
    #infobar-left {
        max-width: 100%;
    }
    #infobar-right {
        padding: 0;
        margin-top: 1.25em;
        max-width: 100%;
    }

    .texts h2,
    #load-content h2 {
        font-size: 3.5em;
    }

    .texts h3,
    #load-content h3,
    #infobar-left h3 {
        font-size: 3em;
    }

    .texts h4,
    #infobar-left h4,
    #load-content h4,
    #infobar-right h4 {
        font-size: 2em;
    }

    .texts h5,
    #infobar-left h5 {
        font-size: 1.7em;
    }
}

@media screen and (max-width: 400px) {
    #showcase {
        padding: calc(1.25rem + 1%) calc(22px + 1%) calc(1.25rem + 0.75%) calc(22px + 1%);
    }
    .texts h2,
    #load-content h2 {
        font-size: 3.2em;
        font-weight: 800;
        color: #fff;
        line-height: 1em;
        text-transform: uppercase;
    }

    .texts h3,
    #load-content h3,
    #infobar-left h3 {
        font-size: 2.56em;
        font-weight: 700;
        color: #fff;
        line-height: 1em;
        text-transform: uppercase;
    }

    .texts h4,
    #infobar-left h4,
    #load-content h4,
    #infobar-right h4 {
        font-size: 1.28em;
        font-weight: 600;
        color: #fff;
        line-height: 1em;
        text-transform: uppercase;
    }

    .texts h5,
    #infobar-left h5 {
        font-size: 1.088em;
        font-weight: 600;
        line-height: 1em;
    }
    #icon-rss,
    #icon-studio {
        display: none;
    }
    #avatar {
        width: 2.5rem;
        height: 2.5rem;
    }
    footer {
        font-size: 0.85rem;
    }
    #load-content {
        font-size: 0.75rem;
    }
    #main,
    #viewmap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        display: block;
        width: 100%;
        height: auto;
    }
    #main {
        float: left;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #viewmap > div {
        width: 100%;
        text-align: center;
    }
    .form-control {
        margin: 0;
    }
    .listlines {
        max-width: 100%;
        width: 100%;
    }
    .half {
        width: unset;
    }
    #search-bar {
        max-width: 100%;
    }
    #viewmap > div {
        margin: 0 0 2em 0;
    }
    .virgule {
        line-height: 1em;
        font-size: 1rem;
    }
    #viewmap > article {
        height: auto;
        overflow: hidden;
        white-space: wrap;
    }
    #sidebar {
        padding: 2rem 15px 2rem 15px;
    }
}

.square-img-box {
    max-width: 10em;
    margin: 1em;
}


.square-img-box-img img {
    border-radius: 1em;
    transition: 0.4s;
}

.square-img-box-img img:hover {
    transform: scale(1.1);
}


.square-img-box-name {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--theme-white-light);
}

.info-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    max-height: 50vh;
    justify-content: space-between;
}


.info-img {
    width: 50%;
    margin: 0 auto;
}

.info-info {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: baseline;
    height: 100%;
    color: var(--theme-white-light);
    width: 100%;
}

.info-sub p {
    max-width: unset;
}

.info-explain p {
    max-width: 100%;
}