@charset "UTF-8";

body {
    background-color: var(--page-bgcolor);
    --font-size: 12pt;
}

* {
    color: var(--page-content-color);
    transition: all ease 0.333s, font-size 0s;
    scroll-behavior: smooth;
}

.light {
    --scrollbar-bgcolor: #ddaaffcc;
    --page-bgcolor: #eeeeee;
    --page-content-color: #333333;
    --drawer-bgcolor: #cc99ff;
    --db-bgcolor: #ddbbff;
    --db-hover-bgcolor: #ddaaff;
    --db-active-bgcolor: #bb88ee;
    --db-text-color: #ffffff;
    --ind-button-bgcolor: #ffffff99;
    --ind-button-hover-bgcolor: #ffffff33;
    --ind-button-active-bgcolor: #9966cc33;
    --div-bgcolor: #ffffff99;
    --art-bgcolor: #ffffffcc;
    --art-h1-bdcolor: #666666;
    --fh-bgcolor: #cc99ff;
    --fh-color: #ffffff;
    --select-bgcolor: #ffffff;
    --select-bdcolor: #cccccc;
    --opt-checked-bgcolor: #ddbbff;
    --slider-bgcolor: #eeeeee;
    --slider-active-bgcolor: #cc99ff;
    --slider-inner-bgcolor: #ffffff;
    --slider-inner-slcolor: #dddddd;
    --edge-color: #33006666;
}

.dark {
    --scrollbar-bgcolor: #110022cc;
    --page-bgcolor: #222222;
    --page-content-color: #cccccc;
    --drawer-bgcolor: #330066;
    --db-bgcolor: #7744aa;
    --db-hover-bgcolor: #663399;
    --db-active-bgcolor: #552288;
    --db-text-color: #ccbbdd;
    --ind-button-bgcolor: #ffffff22;
    --ind-button-hover-bgcolor: #ffffff11;
    --ind-button-active-bgcolor: #22004433;
    --div-bgcolor: #11111199;
    --art-bgcolor: #000000cc;
    --art-h1-bdcolor: #cccccc;
    --fh-bgcolor: #663399;
    --fh-color: #cccccc;
    --select-bgcolor: #330066;
    --select-bdcolor: #330066;
    --opt-checked-bgcolor: #663399;
    --slider-bgcolor: #999999;
    --slider-active-bgcolor: #330066;
    --slider-inner-bgcolor: #dddddd;
    --slider-inner-slcolor: #aaaaaa;
    --edge-color: #ffffff66;
}

.small {
    --font-size: 10pt;
}

.medium {
    --font-size: 12pt;
}

.large {
    --font-size: 14pt;
}

*::-webkit-scrollbar {
    width: 4pt;
}

*::-webkit-scrollbar-track {
    background-color: var(--scrollbar-bgcolor);
    border-radius: 2pt;
}

*::-webkit-scrollbar-thumb {
    background-color: #9966cc;
    border-radius: 2pt;
}

#div_bg {
    background-image: url('../img/base/Riomon.svg');
    background-attachment: fixed;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 80% auto;
    border-radius: 0;
    opacity: 20%;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    height: 100%;
    z-index: -100;
}

:focus-visible {
    outline: none;
}

#footer {
    background-color: var(--fh-bgcolor);
    box-shadow: 0 -2pt 5pt #66339966;
    border: none;
    border-radius: 0;
    color: var(--fh-color);
    display: block;
    position: fixed;
    float: inline-end;
    text-align: center;
    margin: 0;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0.3em 0;
    z-index: 100;
}

#footer * {
    color: var(--fh-color);
}

#foot_text {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;

    align-self: center;
    text-align: center;
    text-indent: 0;
    font-size: 0.8em;
    margin: 0;
}

button.selected {
    font-weight: 700;
}

button.selected:hover,
button.selected:focus-visible,
button.selected:active {
    background-color: inherit;
}

div {
    border-radius: 5pt;
    box-shadow: 0 1pt 4pt #66666633;
    background-color: var(--div-bgcolor);
    display: block;
    padding: 12pt;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.pad {
    height: 2em;
    margin-bottom: 2em;
    background-color: transparent;
}

.no_padding {
    padding: 0;
}

.no_shadow {
    box-shadow: none;
}

div.divider {
    height: 1pt;
    background-color: #cccccc99;
    padding: 0;
    margin: 1.5em 1em -0.5em;
    box-shadow: none;
}

select {
    background-color: var(--select-bgcolor);
    border: 1pt solid var(--select-bdcolor);
    border-radius: 5pt;
    font-size: 1em;
    padding: 4pt 4pt;
    transition: all ease-in 0.25s, font-size 0s;
    width: 100%;
}

option:checked {
    background-color: var(--opt-checked-bgcolor);
}

select:hover,
input#password:hover {
    border: 1pt solid #9966ff;
    box-shadow: 0 0 3pt #9966ff66;
}

select:focus-visible,
input#password:focus-visible {
    box-shadow: 0 0 5pt #9966ff66, inset 0 0 2pt #66666633;
    border: 1pt solid #9966ff;
}

table {
    width: 90%;
    margin: auto;
}

textarea {
    resize: none;
    background-color: var(--art-bgcolor);
    border: 1pt solid var(--edge-color);
    border-radius: 5pt;
    font-family: inherit;
    font-size: 1em;
    margin: 12pt;
    padding: 5pt 10pt;
    transition: all ease-in 0.25s, font-size 0s;
}

textarea:hover {
    border: 1pt solid #9966ff;
    box-shadow: 0 0 6pt #9966ff66;
}

textarea:focus-visible {
    box-shadow: 0 0 10pt #9966ff66, inset 0 0 3pt #66666633;
    border: 1pt solid #9966ff;
}

textarea.areas {
    margin: 0 auto;
    align-self: center;
    height: 10em;
    width: 90%;
}

#root_div {
    border-radius: 10pt;
    margin: 16pt auto;
    text-align: center;
    min-width: 80%;
    width: 500pt;
    max-width: 90%;
    font-size: var(--font-size, 12pt);

    overflow: hidden;
}

#root_div * {
    font-size: var(--font-size, 12pt);
}

#root_div p,
#root_div h1,
#root_div h2,
#root_div h3 {
    padding: 0 0 0 var(--font-size, 12pt);
}

#root_div ruby rt {
    font-size: calc(var(--font-size, 12pt) * 0.5);
}

#root_div img,
#root_div video {
    max-width: 80%;
    max-height: 50vh;
}

#root_div p {
    text-align: left;
    line-height: 1.8em;
}

#root_div h1 {
    font-size: calc(var(--font-size, 12pt) * 2);
    font-family: "Noto Serif CJK SC", "Noto Serif SC", "思源宋体", "Times New Roman", "宋体", serif;
    font-weight: 900;
}

#root_div h2 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: calc(var(--font-size, 12pt) * 1.5);
    text-align: start;
}

#root_div h3 {
    margin-top: 1.5em;
    margin-bottom: 1em;
    font-size: calc(var(--font-size, 12pt) * 1.2);
    text-align: start;
}

#root_div article {
    display: block;
    user-select: none;
    background-color: var(--art-bgcolor);
    margin: 12pt;
    padding: 24pt 12pt 12pt 12pt;

    box-sizing: border-box;

    border-radius: 5pt;
    border: #33006666 1pt solid;

    overflow: auto;
}

#root_div article h1 {
    font-size: calc(var(--font-size, 12pt) * 1.5);
}

#root_div article h2 {
    font-size: calc(var(--font-size, 12pt) * 1.2);
}

#root_div article h3 {
    font-size: var(--font-size, 12pt);
}

h1 {
    font-family: "Noto Serif CJK SC", "思源宋体", "宋体", serif;
    font-size: 2.5em;
    font-weight: 900;
    margin-top: 0;
    margin-bottom: 12pt;
}

h2 {
    font-size: 1.5em;
    text-align: start;
    text-indent: 2em;
}

h3 {
    font-size: 1.2em;
    text-align: start;
    text-indent: 2em;
}