html, body {
    overflow-x: hidden;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    scroll-padding-top: 60px;
}

@font-face {
    font-family: "JetBrains Mono Regular";
    src: url("/index/static_files/JetBrainsMono-Regular.woff2") format('woff2');
}

#wrapper {
    overflow-x: hidden;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    /* Dealing with anchor links */
    scroll-padding-top: 60px;
    background-color: #fff;
}

#header {
    height: 46px;
    background-color: lightgreen;
    box-shadow: 0 0 12px 0 #777;
    padding: 7px 0;
    position: fixed;
    width: calc(100% - 12px);
    z-index: 7999;
}

#inheader {
    margin: 0;
    padding: 0;
    text-align: center;
}

#inheader > li {
    display: inline-block;
}

#inheader > li > a {
    text-decoration: none;
    color: #444;
    text-align: center;
    font-size: 17px;
    border-radius: 15px;
    letter-spacing: 0;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    padding: 15px 9px 10px;
    margin: 0 2px;
    display: block;
}

#inheader > li > a:hover {
    background-color: #bdf5bd;
    color: #000;
    border: 3px dashed #4ee44e;
    padding: 12px 6px 7px;
}

#schbar {
    width: calc(100% - 550px);
    max-width: 550px;
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
}

#schq {
    height: 30px;
    border-radius: 10px;
    margin-left: 0;
    width: calc(100% - 170px);
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
}

#schbtn, #mobischbtn {
    background-color: #bdf5bd;
    border-radius: 10px;
    padding: 4px 5px 5px;
    box-shadow: 0 0 2px 1px #777;
    cursor: pointer;
}

#schlabel {
    font-size: 14px;
}

#column {
    height: 30px;
    border-radius: 10px;
    width: 30px;
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
}

#mobiclose {
    background-color: #bdf5bd;
    border-radius: 10px;
    margin-top: 2px;
    margin-left: 12px;
    padding: 4px 6px 2px;
    box-shadow: 0 0 2px 1px #777;
    font-size: 20px;
    display: none;
    cursor: pointer;
}

#mobinav {
    top: 0;
    height: 40px;
    background-color: lightgreen;
    box-shadow: 0 0 12px 0 #777;
    padding-top: 0;
}

#mobibtn {
    background-color: #bdf5bd;
    border-radius: 10px;
    margin-top: 2px;
    margin-left: 12px;
    padding: 4px 6px 2px;
    box-shadow: 0 0 2px 1px #777;
    font-size: 20px;
    cursor: pointer;
}

#mobischbar {
    display: inline-block;
    text-align: center;
    width: calc(100% - 60px);
}

#mobischq {
    height: 30px;
    width: calc(100% - 60px);
    border-radius: 10px;
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
}

#container {
    /* position: relative; */
    top: 0;
    margin: 135px 25px 20px;
    min-height: calc(100% - 190px);
}

/* 以下为index页面的内容 */
#container > div > h1 {
    text-align: center;
}

.mdhref {
    text-decoration: none;
    display: block;
    background-color: #eee;
    border-radius: 20px;
    padding: 15px;
}

.mdhref:hover {
    background-color: #ddd;
}

.mdtitle {
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
    font-size: 23px;
    color: #74390f;
}

.mddesc {
    font-size: 14px;
    color: #0b5a5a;
    max-height: 96px;
    overflow: hidden;
}

.mdlm {
    font-size: 14px;
    color: rgb(71, 37, 71);
    text-align: right;
    font-family: "JetBrains Mono Regular", 'Courier New', Courier, monospace;
}

/* 以下为result页面的内容 */
.resblock {
    border-radius: 20px;
    display: inline-block;
    text-decoration: none;
    background-color: #f4fef4;
    margin: 4px;
    padding: 6px;
    overflow: hidden;
}

.resblock:hover {
    background-color: #bdf5bd;
}

.resblock:visited {
    background-color: #d4ffff;
}

.resnum {
    float: left;
    color: #45816e;
    font-size: 20px;
}

.restitle {
    color: #22f;
    font-size: 25px;
    height: 33px;
    overflow: hidden;
}

.resdes {
    color: #444;
    font-size: 13px;
    height: 102px;
    overflow: hidden;
}

.reshref {
    color: #924a17;
    font-size: 16px;
    height: 21px;
    overflow: hidden;
}

.resdate {
    font-size: 14px;
    margin-right: 18px;
}

.resdetail {
    text-align: right;
    height: 22px;
    overflow: hidden;
}

.resdelta {
    font-size: 14px;
    text-decoration: none;
    color: #45816e;
}

.resdelta:hover {
    color: rgb(216, 128, 99);
}

.head {
    font-size: 60px;
    color: rgb(83, 35, 0);
    font-family: 'Courier New', Courier, monospace;
    padding-left: 10%;
}

.big {
    font-size: 35px;
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
    padding-left: 10%;
}

.sub {
    font-size: 48px;
    text-align: center;
    font-family: zillaslab, palatino, "Palatino Linotype", serif;
    padding-top: 6%;
}

#loading {
    font-size: 20px;
    text-align: center;
    color: #f00;
    padding-top: 30px;
    margin-bottom: 20px;
}

#bottom > div {
    background-color: #333;
}

#bottom {
    box-shadow: 0 0 12px 0 #777;
    font-size: 14px;
    color: #939393;
    background-color: #333;
    height: 28px;
    padding-top: 7px;
    text-align: center;
    font-family: "JetBrains Mono Regular", serif;
}

#bottom span {
    display: inline-block;
}

#bottom a {
    text-decoration: none;
    color: #939393;
    display: inline-block;
}

#bottom a:hover {
    color: #90ee90;
}

.error {
    cursor: url(/index/static_files/icons/face-with-tears-of-joy.png), default;
}

#error_info {
    font-family: "JetBrains Mono Regular", 'Courier New', Courier, monospace;
}

.query {
    background-color: #ddd;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #90ee90;
}

#container img {
    max-width: 100%;
    cursor: pointer;
}

/*The licensing box under the markdown...*/

.licensing-box {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    position: relative;
    z-index: 1;
    box-shadow: none;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.licensing-box .licensing-title {
    margin-bottom: 1rem !important;
    line-height: 1;
    font-size: 1em;
}

.licensing-box p, h6 {
    margin: 0 0 0.25rem;
    padding: 0;
}

.licensing-box p {
    font-size: 1em;
}

h6 {
    font-size: 0.85rem;
}

.licensing-box a {
    font-size: 0.85rem !important;
    color: #6a6a6a;
    cursor: pointer;
    text-decoration: none;
    font-family: "JetBrains Mono Regular", 'Courier New', Courier, monospace;
}

.licensing-box a:hover {
    color: #195319;
}

.licensing-box a:active {
    color: #ff9065;
}

.level-item {
    display: inline-block;
    margin-right: 1.5rem !important;
}

.level-time {
    font-family: "JetBrains Mono Regular", 'Courier New', Courier, monospace;
}

.licensing-after {
    position: absolute;
    z-index: -1;
    right: -40px;
    top: -50px;
    font-size: 200px;
    font-family: 'Font Awesome 6 Brands';
    opacity: 0.1;
    cursor: default;
    user-select: none;
}

/*End of the licensing box under the markdown...*/

::-webkit-scrollbar-corner {
    background-color: #bdf5bd;
}

::-webkit-scrollbar-thumb {
    background-color: #90ee90;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 5px #777;
    background-image: radial-gradient(circle, #f4fef4, #90ee90);
}

::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: none;
    border: 3px dotted #777;
    background-image: radial-gradient(circle, #f4fef4, rgb(255, 195, 172));
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: none;
    border: 2px solid #777;
}

::-webkit-scrollbar-track {
    background-color: #f4fef4;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 0 5px #777;
}

/* Buttons */
::-webkit-scrollbar-button {
    border-style: solid;
    height: 12px;
    width: 12px;
}

/* below are the display of scrollbar */
/* Up */
::-webkit-scrollbar-button:vertical:decrement {
    border-width: 0 6px 10px 6px;
    border-color: transparent transparent #777 transparent;
}

::-webkit-scrollbar-button:vertical:decrement:hover {
    border-color: transparent transparent #ccc transparent;
}

::-webkit-scrollbar-button:vertical:decrement:active {
    border-color: transparent transparent rgb(255, 195, 172) transparent;
}


/* Down */
::-webkit-scrollbar-button:vertical:increment {
    border-width: 10px 6px 0 6px;
    border-color: #777 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:increment:hover {
    border-color: #ccc transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:increment:active {
    border-color: rgb(255, 195, 172) transparent transparent transparent;
}

/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    border-width: 6px 10px 6px 0;
    border-color: transparent #777 transparent transparent;
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: transparent #ccc transparent transparent;
}

::-webkit-scrollbar-button:horizontal:decrement:active {
    border-color: transparent rgb(255, 195, 172) transparent transparent;
}

/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #777;
}

::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: transparent transparent transparent #ccc;
}

::-webkit-scrollbar-button:horizontal:increment:active {
    border-color: transparent transparent transparent rgb(255, 195, 172);
}

/* copy from xcode.css */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

.hljs {
    background: #fff;
    color: #000
}

.xml .hljs-meta {
    color: silver
}

.hljs-comment, .hljs-quote {
    color: #007400
}

.hljs-attribute, .hljs-keyword, .hljs-literal, .hljs-name, .hljs-selector-tag, .hljs-tag {
    color: #aa0d91
}

.hljs-template-variable, .hljs-variable {
    color: #3f6e74
}

.hljs-code, .hljs-meta .hljs-string, .hljs-string {
    color: #c41a16
}

.hljs-link, .hljs-regexp {
    color: #0e0eff
}

.hljs-bullet, .hljs-number, .hljs-symbol, .hljs-title {
    color: #1c00cf
}

.hljs-meta, .hljs-section {
    color: #643820
}

.hljs-built_in, .hljs-class .hljs-title, .hljs-params, .hljs-title.class_, .hljs-type {
    color: #5c2699
}

.hljs-attr {
    color: #836c28
}

.hljs-subst {
    color: #000
}

.hljs-formula {
    background-color: #eee;
    font-style: italic
}

.hljs-addition {
    background-color: #baeeba
}

.hljs-deletion {
    background-color: #ffc8bd
}

.hljs-selector-class, .hljs-selector-id {
    color: #9b703f
}

.hljs-doctag, .hljs-strong {
    font-weight: 700
}

.hljs-emphasis {
    font-style: italic
}

.hljs-attribute, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-name, .hljs-selector-tag {
    font-weight: 700;
}

/*copy from xp.css*/

.title-bar {
    background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
    padding: 3px 5px 3px 3px;
    border-top: 1px solid #0831d9;
    border-left: 1px solid #0831d9;
    border-right: 1px solid #001ea0;
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    font-size: 13px;
    text-shadow: 1px 1px #0f1089;
    height: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-bar-text {
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    /*margin-right: 24px;*/
    padding-left: 3px;
    cursor: default;
    user-select: none;
}

.title-bar-controls {
    display: flex;
}

/*the yank buttons in the code blocks*/
.title-bar-controls button {
    min-width: 21px;
    min-height: 21px;
    margin-left: 2px;
    box-shadow: none;
    transition: background .1s;
    border: none;
    padding: 0;
    display: block;
    background: #0050ee linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4) no-repeat 50%;
    border-radius: 3px;
    cursor: pointer;
}

.window-body {
    width: calc(100% - 19px);
    margin: 5px 8px 5px;
    display: block;
    border: 2px solid rgb(200, 200, 200);
    white-space: pre;
    overflow: auto;
}

p > code, .window-body {
    font-family: "JetBrains Mono Regular", 'Courier New', Courier, monospace;
    font-size: 15px;
    display: inline-block;
}

.p-codes {
    display: block;
    box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #ece9d8;
}

/*individual yank buttons ( the buttons in paragraphs )*/
.idv-ynk-btn {
    box-shadow: 0 1px 2px grey;
    border-radius: 0;
    background-color: #ece9d8;
    height: 26px;
    display: inline-block;
    cursor: pointer;
}

.idv-ynk-btn:hover, .title-bar-controls button:hover {
    box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}

.idv-ynk-btn:focus, .title-bar-controls button:focus {
    box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4, inset 2px -2px #89ade4;
    outline: 1px dotted #000;
    outline-offset: -4px;
}

.idv-ynk-btn:active, .title-bar-controls button:active {
    box-shadow: none;
    background: linear-gradient(180deg, #cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1);
}

blockquote {
    border-left: 1rem solid #90ee90;
    margin: 0;
    padding: 0 30px;
    white-space: pre-wrap;
    background-color: #eee;
}

blockquote p {
    margin: 0;
}

/*modify from highlightjs-line-numbers.js*/

.hljs-ln {
    border-collapse: collapse;
    min-width: 100%;
}

.hljs-ln tr > td:first-child {
    min-width: 30px;
    width: 30px;
}

.hljs-ln tr:nth-child(even) td {
    background-color: rgb(250, 250, 250);
}

.hljs-ln tr:nth-child(odd) td {
    background-color: rgb(245, 245, 245);
}

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: right;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;
}

.hljs-ln-n::before {
    content: attr(data-line-number);
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}