:root {
    --bgColor: rgba(237, 242, 242, 1);
    --boxBgColor: rgba(170, 170, 170, 0.12);
    --textColor: black;
    --headBoxColor: #009ca7;
    --headTextColor: white;
    --aColor: #009ca7;
    --hColor: #009ca7;
    --hrColor: #b3b3b3;
    --monoColor: rgba(40, 40, 40, 0.75);
}

@font-face {
    font-family: "DIN";
    src: url("font/Cabin-Regular-Modified.ttf");
    font-weight: normal;
    font-style: normal;
}

/*
@font-face {
    font-family: "Nove";
    src: url("font/novecentomedium.otf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Nove";
    src: url("font/novecentobold.otf");
    font-weight: bold;
    font-style: normal;
} */

body {
    background-color: var(--bgColor, white);
    color: var(--textcolor, black);
    margin: 0;
    padding: 0;
    font-family: "Google Sans Flex", DIN, sans-serif;
}

h1 {
    color: var(--hColor, darkblue);
    margin: 2px;
    padding: 0px;
}

h2 {
    color: var(--hColor, darkblue);
    margin: 4px;
    padding: 0px;
}

h3 {
    color: var(--hColor, darkblue);
    margin: 5px;
    padding: 0px;
}

h4 {
    color: var(--hColor, darkblue);
    margin: 6px;
    padding: 0px;
}

h5 {
    color: var(--hColor, darkblue);
    margin: 7px;
    padding: 0px;
}

p {
    color: var(--textColor, black);
    margin: 0px;
    padding: 0px;
}

a {
    color: var(--aColor, darkgreen);
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    font-weight: bold;
}

.linkButton {
    text-decoration: none;
    display: block;
    background-color: var(--boxBgColor);
    color: var(--textColor);
    margin: 0.5em auto;
    padding: 0.8em 1em;
    border-radius: 10px;
}

linkButton:hover {
    font-weight: bold;
}

pre {
    color: var(--textColor, black);
    font-family: Ubuntu Mono, Menlo, Consolas, 'Sarasa Fixed SC', monospace, Courier, DIN, sans-serif;
    padding: 0;
    display: inline-block;
    /* 保持行内特性 */
    max-width: 100%;
    /* 不超过父容器宽度 */
    overflow-x: auto;
    /* 横向滚动 */
    vertical-align: middle;
    /* 垂直对齐方式 */
    white-space: pre;
}

hr {
    background: var(--hrColor, #b3b3b3);
    border: 0;
    height: 1px;
    padding: 0px;
    margin: 1em 0px;
}

em {
    font-style: normal;
    color: var(--hColor, darkblue);
    font-weight: bold;
    font-size: 108%;
}

button {
    border: none;
    background-color: var(--boxBgColor, #e6e6e6);
    color: var(--textColor, black);
    margin: 0 0.2em;
    padding: 0.2em 0.4em;
    border-radius: 10px;
    font-size: 16px;
    font-family: DIN, sans-serif;
}

button:hover {
    color: var(--headTextColor, white);
    background-color: var(--hColor, darkblue);
}

button.attractiveButton {
    padding: 0.5em 0.5em;
    color: var(--headTextColor, white);
    background-color: var(--hColor, darkblue);
}

button.attractiveButton:hover {
    font-weight: bold;
}

dialog {
    border: 2.5px solid var(--hColor, darkblue);
    border-radius: 10px;
    width: 75vw;
    background-color: var(--bgColor);
    color: var(--textColor, black);
}

dialog::backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: var(--boxBgColor);
    animation: fadeIn 0.3s ease;
}

dialog .controls {
    text-align: right;
    margin: 0;
    padding: 0;
}

input {
    width: 26em;
    border: 1.5px solid var(--hColor, darkblue);
    background-color: var(--bgColor, white);
    color: var(--textColor, black);
    margin: 0.2em 1em;
    font-size: 13px;
    font-family: Ubuntu Mono, Menlo, Consolas, 'Sarasa Fixed SC', monospace, Courier, DIN, sans-serif;
    border-radius: 10px;
}


select {
    width: 27em;
    border: 1.5px solid var(--hColor, darkblue);
    background-color: var(--bgColor, white);
    color: var(--textColor, black);
    margin: 0.2em 1em;
    font-size: 13px;
    font-family: Ubuntu Mono, Menlo, Consolas, 'Sarasa Fixed SC', monospace, Courier, DIN, sans-serif;
    color: var(--textColor, black);
    border-radius: 10px;
}

label {
    display: inline-block;
    width: 6em;
    text-align: right;
    color: var(--textColor, black);
}

span {
    color: var(--textColor, black);
}

.main {
    margin: 1em 2.2em;
    padding: 0;
}

.box {
    background-color: var(--boxBgColor, #e6e6e6);
    margin: 0.5em 0px 0.5em 0px;
    padding: 0.5em 1em 0.5em 1em;
}

.main .box {
    border-radius: 10px;
}

.noPaddingBox {
    background-color: var(--boxBgColor, #e6e6e6);
    margin: 0.5em 0px 0.5em 0px;
    padding: 0em;
}

.main .noPaddingBox {
    border-radius: 10px;
}

.noPaddingBoxTitle {
    padding: 0.5em 0.5em;
    border-radius: 10px 10px 0px 0px;
    background-color: var(--headBoxColor, darkblue);
}

.noPaddingBoxTitle .controls {
    font-size: 14px;
    padding: 0;
    margin: 0;
}

.noPaddingBoxTitle .controls button {
    font-size: 14px;
}

.noPaddingBoxTitle * {
    color: var(--headTextColor, white);
    margin: 0px auto;
    padding: 0px auto;
}

.noPaddingBoxText {
    border: 1.5px solid var(--headBoxColor, darkblue);
    border-radius: 0px 0px 10px 10px;
    margin: 0px;
    padding: 0.2em;
}

.hiddenbox {
    /* Spoiler中使用 */
    background-color: var(--boxBgColor, #e6e6e6);
    margin: 0.5em 0px 0.5em 0px;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 10px;
    display: none;
}

.headbox {
    background-color: var(--headBoxColor, darkblue);
    margin: 0;
    padding: 0;
    align-items: center;
}

.headbox a {
    text-decoration: none;
    color: var(--headTextColor, white);
}

.headtext {
    color: var(--headTextColor, white);
    margin: 0;
    padding: 0.3em 0px 0.3em 1.0em;
}

.mono {
    color: var(--monoColor, #6a6a6a);
    font-family: Ubuntu Mono, Menlo, Consolas, 'Sarasa Fixed SC', monospace, Courier, DIN, sans-serif;
    display: inline-block;
    /* 保持行内特性 */
    max-width: 100%;
    /* 不超过父容器宽度 */
    overflow-x: auto;
    /* 横向滚动 */
    vertical-align: middle;
    /* 垂直对齐方式 */
    white-space: pre;
}

.backbutton {
    color: var(--headTextColor, white);
    margin: 0.3em 0.3em 0.3em 0.6em;
    text-decoration: none;
}

.backbutton::before {
    content: "<";
    color: var(--headTextColor, white);
    align-items: center;
}

.bilibilibox {
    background-color: #fe3572;
    margin: 0.5em 0.2em 0.5em 0.2em;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 10px;
    color: white;
    display: inline-block;
}

.bilibilibox a {
    color: white;
}

.githubbox {
    background-color: var(--textColor, black);
    margin: 0.5em 0.2em 0.5em 0.2em;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 10px;
    color: var(--headTextColor, white);
    display: inline-block;
}

.githubbox a {
    color: var(--headTextColor, white);
}

.forumbox {
    background-color: var(--headBoxColor, black);
    margin: 0.5em 0.2em 0.5em 0.2em;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 10px;
    color: var(--headTextColor, white);
    display: inline-block;
}

.forumbox a {
    color: var(--headTextColor, white);
}

.fileDragZone {
    border: 2px dashed var(--hrColor, #6a6a6a);
    padding: 3em 5em;
    display: inline-block;
    border-radius: 10px;
    margin: 0.5em 0;
}

.dragZoneInfoDefault {
    font-weight: bold;
    color: var(--hrColor, #6a6a6a);
    font-size: 20px;
}

.dragZoneInfoActive {
    color: var(--hColor, darkblue);
}

.dragZoneInfoError {
    color: rgb(207, 5, 5);
}