/*
    Disaster Theme
    [2025 Wikidot Theme]
    Created by MikuKaneko
    Based on Transcend Time Theme by MikuKaneko, Ryu JP
    Licensed under the CC-BY SA 3.0
*/

/* Font Import */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");

:root {
    /* Header Config */
    --logo-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A3438721-224-z17t/scpjp_logo_white.svg");

    /* Size Config */
    --navigation-length: calc(var(--navigation-font-size) * 1.5);
    --sidebar-width: calc(var(--base-font-size) * 15);
    --vh-gap: max(calc(var(--base-font-size) * 2), calc(100lvh - 100lvh));

    /* Font Config */
    --navigation-font-size: var(--title-font-size);
    --body-font: "Noto Serif SC", serif;
    --title-font: var(--body-font);
    --mono-font: "Roboto Mono", monospace;
    --base-font-size: .9375rem;
    --title-font-size: calc(var(--base-font-size) * 1.75);
    --label-font-size: calc(var(--base-font-size) * .9);

    /* Color Config*/
    --hue: 0deg;
    --background-color: var(--hue), 30%, 9%;
    --on-background-color: var(--hue), 20%, 95%;
    --primary-color: var(--hue), 70%, 70%;
    --on-primary-color: var(--hue), 50%, 5%;
    --secondary-color: var(--hue), 40%, 70%;
    --on-secondary-color: var(--hue), 80%, 5%;
    --accent-color: calc(var(--hue) + 110deg), 50%, 75%;
    --on-accent-color: calc(var(--hue) + 110deg), 20%, 10%;
    --subtle-color: var(--hue), 20%, 20%;
    --on-subtle-color: var(--hue), 10%, 95%;

    /* Other Config */
    --background-alpha: .3;
    --blur: 6px;
    --transition-duration: .25s;
}

/* Hide Element */
#header h1 a span, #header h2, #search-top-box, #top-bar, #login-status :is(#my-account, a[href="https://www.wikidot.com/account/messages"] > strong), #side-bar, #page-title, #avatar-hover-container, .odialog-shader-iframe, .odialog-shader {
    display: none !important;
}

/* General Element */
html {
    scroll-behavior: smooth;
}
body {
    background-color: hsl(var(--background-color));
    color: hsl(var(--on-background-color));
    color-scheme: dark;
    font-family: inherit;
    font-size: var(--base-font-size);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
html, body, blockquote, li, ol, p, ul, table, tbody, tfoot, button, input, label {
    font-family: var(--body-font);
}
pre, code, tt, textarea, .page-source {
    font-family: var(--mono-font);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    margin: 0;
    text-wrap: balance;
}
h1 {
    color: hsl(var(--primary-color));
    font-size: var(--title-font-size);
    font-weight: 700;
    margin: .25em 0;
}
h2 {
    font-size: var(--title-font-size);
    font-weight: 600;
    margin: .25em 0;
}
h3 {
    font-size: max(calc(var(--title-font-size) * .8), var(--base-font-size));
    font-weight: 600;
}
h4 {
    font-size: max(calc(var(--title-font-size) * .7), var(--base-font-size));
    font-weight: 500;
}
h5 {
    font-size: max(calc(var(--title-font-size) * .6), var(--base-font-size));
    font-weight: 500;
}
h6 {
    font-size: max(calc(var(--title-font-size) * .6), var(--base-font-size));
}
li, p {
    line-height: 1.5;
}
a {
    color: hsl(var(--primary-color));
    font-weight: 500;
}
a.newpage {
    color: hsl(var(--accent-color));
}
hr {
    background-color: transparent;
    background-image: linear-gradient(to right, transparent 0%, hsl(var(--primary-color)) 50%, transparent 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(100% - 2em);
    margin: 1em 2em;
}
blockquote, div.blockquote, code, .code, #toc, .page-source {
    background: hsla(var(--subtle-color), var(--background-alpha));
    border-block: solid 1px hsl(var(--primary-color));
    border-inline: none;
    color: hsl(var(--on-subtle-color));
}
.ruby, ruby {
    align-items: center;
    display: inline-flex;
    flex-direction: column-reverse;
    height: 1em;
    line-height: inherit;
    text-align: justify;
    vertical-align: bottom;
}
.rt, rt {
    display: inline-block;
    font-size: .5em;
    height: 2em;
    line-height: inherit;
    text-align: justify;
    width: 100%;
}

/* Input */
#main-content .btn, table.page-history td.optionstd a, a.action-area-close, div.buttons input, input.button, button, file, a.button, .owindow :is(.content div[style="margin-top: 10px"] a, .close, .button-bar a) {
    background: none;
    border: solid 1px hsl(var(--subtle-color));
    border-bottom: solid 2px hsl(var(--primary-color));
    color: hsl(var(--on-background-color));
    font-size: var(--label-font-size);
    padding: .2em .5em;
    transition: background var(--transition-duration), color var(--transition-duration);
    white-space: nowrap;
}
#main-content .btn:hover, table.page-history td.optionstd a:hover, .action-area-close:hover, div.buttons input:hover, input.button:hover, button:hover, a.button:hover, .owindow :is(.content div[style="margin-top: 10px"] a, .close, .button-bar a):hover {
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
    text-decoration: none;
}
:is(input.button.disabled, div.buttons input.disabled), :is(input.button.disabled, div.buttons input.disabled):hover {
    background: hsl(var(--subtle-color));
    color: hsl(var(--on-subtle-color));
}
input.checkbox {
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
}
input.text {
    background: hsla(var(--subtle-color), var(--background-alpha));
    border: 1px solid hsl(var(--subtle-color));
    color: hsl(var(--on-subtle-color));
}
input.text.invalid {
    background: hsl(var(--subtle-color));
    border-color: hsl(var(--accent-color));
}
textarea {
    background: hsla(var(--subtle-color), var(--background-alpha));
    border: 1px solid hsl(var(--subtle-color));
    color: hsl(var(--on-subtle-color));
    padding: .25em;
}

/* Selection */
::selection {
    background: hsl(var(--primary-color));
    color: hsl(var(--on-primary-color));
}

/* Scrollbar */
::-webkit-scrollbar {
    border: none;
    height: calc(var(--base-font-size) * .5);
    width: calc(var(--base-font-size) * .5);
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--secondary-color));
    border-radius: var(--base-font-size);
}
::-webkit-scrollbar-track {
    background: none;
}
body {
    scrollbar-color: hsl(var(--secondary-color)) transparent;
    scrollbar-width: calc(var(--base-font-size) * .5);
}

/* Wikidot & Custom Element */
#breadcrumbs {
    font-size: var(--label-font-size);
    text-align: center;
    margin: 0;
    padding: 1em 0;
}
.wiki-content-table th {
    background: hsl(var(--primary-color));
    border: solid 1px hsl(var(--subtle-color));
    color: hsl(var(--on-primary-color));
}
.wiki-content-table td {
    border: solid 1px hsl(var(--subtle-color));
}
table[style="margin:0; padding:0"] {
    margin: 0 auto !important;
}
#toc-list {
    padding: 0 .5em;
}
.printuser a {
    margin: 0;
}
.printuser img.small {
    background-size: calc(var(--label-font-size) * 2) auto;
    display: inline;
    height: var(--label-font-size);
    padding: 0 0 0 calc(var(--label-font-size) * .5);
    vertical-align: unset;
    width: var(--label-font-size);
}
.error-inline, .error-block, .warning-block {
    border: solid 1px hsl(var(--accent-color));
    color: hsl(var(--accent-color));
}
.help-block {
    border: solid 1px hsl(var(--secondary-color));
    color: hsl(var(--on-background-color));
}

/* Wrapper */
div#container-wrap {
    background: none;
    margin: 100lvh 0 0;
    padding: calc(var(--vh-gap) * 2) 0 0;
}
#content-wrap {
    margin: 0;
    max-width: unset;
    min-height: unset;
}
#main-content {
    margin: 0 auto;
    max-width: calc(var(--base-font-size) * 60);
    padding: 0 var(--base-font-size);
    position: static;
    transition: none;
}
#page-content {
    font-size: inherit;
    position: static;
}

/* Header Element */
#header {
    height: 0;
    padding: 0;
}
#header h1 a {
    background-image: var(--logo-image);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 90%;
    height: var(--navigation-length);
    left: 0;
    max-height: unset;
    padding: 0 calc(var(--base-font-size) * .5);
    position: fixed;
    top: 0;
    transition: background-color var(--transition-duration);
    width: var(--navigation-length);
}
#header h1 a:hover {
    animation-play-state: paused;
    background-color: hsla(var(--subtle-color), var(--background-alpha));
}
#login-status {
    align-items: center;
    display: flex;
    font-size: 0;
    height: var(--navigation-length);
    padding: 0 calc(var(--base-font-size) * .5);
    position: fixed;
    right: 0;
    top: 0;
}
#login-status::before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}
#login-status:has(a:hover)::before {
    animation-play-state: paused;
}
#login-status > :is(.printuser, a) {
    z-index: 1;
}
#login-status > a {
    transition: background var(--transition-duration);
}
#login-status > a:hover {
    background: hsla(var(--subtle-color), var(--background-alpha));
}
#login-status > a::before {
    display: inline-block;
    font-family: "FontAwesome";
    font-size: var(--title-font-size);
    padding: 0 .2em;
}
#login-status .printuser img.small {
    background: none !important;
    display: block;
    height: var(--title-font-size);
    padding: 0;
    width: var(--title-font-size);
}
#login-status .login-status-create-account::before {
    content: "\f067";
}
#login-status .login-status-sign-in::before {
    content: "\f090";
}
#login-status #account-topbutton {
    border: none;
    color: hsl(var(--on-background-color));
    margin-left: 0;
    padding: 0;
}
#login-status #account-topbutton::before {
    content: "\f0d7";
    font-size: var(--base-font-size);
}
#login-status a[href="https://www.wikidot.com/account/messages"] + #account-topbutton::before {
    color: hsl(var(--accent-color));
    content: "\f0f3";
}
#login-status #account-options {
    background: hsla(var(--background-color), calc(var(--background-alpha) * 1.5));
    border: solid 1px hsl(var(--subtle-color));
    color: hsl(var(--on-background-color));
    font-size: var(--label-font-size);
    top: calc(var(--base-font-size) * 2);
}
#login-status ul a, #login-status ul a:hover {
    background: none;
    color: inherit;
}
/* Sidebar */
.side-wrap {
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-link {
    bottom: 0;
    box-sizing: border-box;
    height: var(--navigation-length);
    left: 0;
    position: fixed;
    width: var(--navigation-length);
    z-index: 10;
}
li.unfolded .side-link {
    height: 100%;
    width: 100%;
}
.side-link a {
    color: hsl(var(--on-background-color));
    display: block;
    font-family: "FontAwesome";
    font-size: 0;
    height: 100%;
    line-height: 1.5;
    text-align: center;
    transition: background var(--transition-duration), color var(--transition-duration);
    width: 100%;
}
.side-link a::before {
    content: "\f0c9";
    font-size: var(--navigation-font-size);
}
.side-link a:hover {
    animation-play-state: paused;
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
    text-decoration: none;
}
li.unfolded .side-link :is(a, a:hover) {
    animation-play-state: paused;
    background: none;
    border: none;
    color: transparent;
    transition: none;
}
li.unfolded .side-link a::before {
    font-size: 0;
}
.side-bar {
    background: hsla(var(--background-color), var(--background-alpha));
    bottom: calc(var(--base-font-size) * 2.25 + 20px);
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transition: left var(--transition-duration);
    width: var(--sidebar-width);
    z-index: 11;
}
li.folded .side-bar {
    left: calc(-1 * var(--sidebar-width));
}
li.unfolded .side-bar {
    left: 0;
}
.side-block {
    padding: .5em;
}
:is(.side-block, #interwiki) .heading {
    border-bottom: solid 1px hsl(var(--primary-color));
    font-size: var(--label-font-size);
    margin: .5em 0 .25em;
    padding: 0 0 0 .5em;
}
:is(.side-block, #interwiki) .menu-item {
    margin: 0;
    padding: .1em .5em;
}
.side-block a {
    color: hsl(var(--on-background-color));
}
.side-block .twitter a::before {
    content: "\f099";
    font-family: "FontAwesome";
}

/* Interwiki */
.interwiki p {
    margin: 0;
}
#interwiki .side-block {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}
#interwiki .heading {
    color: hsl(var(--on-background-color));
    font-weight: normal;
}
#interwiki .menu-item img {
    display: none;
}
#interwiki .menu-item a {
    font-weight: normal;
}

/* Background */
#extra-div-1 {
    background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-2-f5gk/scp-4000-jp_contest_bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    inset: 0;
    opacity: calc(var(--background-alpha) * .75);
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: -1;
}

/* Hero */
#extra-div-2 {
    align-items: flex-start;
    background: hsl(var(--background-color));
    box-shadow: 0 0 var(--vh-gap) var(--vh-gap) hsl(var(--background-color));
    display: flex;
    height: 100vh;
    inset: 0;
    justify-content: center;
    max-width: unset !important;
    position: absolute;
    top: -100lvh;
    width: 100vw;
    z-index: -1;
}
#extra-div-2::before {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadein-hero;
    background-image: url("https://scp-jp-storage.wikidot.com/local--files/file%3A8993642-5-w98d/4000-JP_Hub_webp-38per.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}
@keyframes fadein-hero {
    from {
        opacity: 0;
        scale: 1.1;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}
#extra-div-2 span {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
#extra-div-2 span::before, #extra-div-2 span::after {
    animation-delay: .25s;
    animation-duration: .75s;
    animation-fill-mode: both;
    animation-name: fadein-hero-logo;
    background-position: bottom 25% center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    max-width: 100vw;
}
#extra-div-2 span::before {
    aspect-ratio: 157 / 54;
    background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-10-1cr1/SCP-4000-JP_shadow_251005.png");
    margin-top: 2.5lvh;
    width: calc(30lvh + 15vw);
}
#extra-div-2 span::after {
    aspect-ratio: 128 / 29;
    background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-11-8elq/wazawai_shadow_251005.png");
    margin-bottom: calc(32.5lvh - 12vw);
    width: 175lvh;
}
@keyframes fadein-hero-logo {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (max-aspect-ratio: 1 / 1) {
    #extra-div-2::before {
        background-image: url("https://scp-jp-storage.wikidot.com/local--files/file%3A8993642-13-rpor/4000-JP_Hub_webp-9_16_25per.webp");
    }
    #extra-div-2 span::before {
        margin-top: 14.5lvh;
        width: 55vw;
    }
    #extra-div-2 span::after {
        aspect-ratio: 512 / 145;
        background-image: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-14-4ggm/SCP-4000-JP_wazawai_shadow_2_251007.png");
        margin-bottom: 16lvh;
        width: 60lvh;
    }
}

/* Bottom Link */
.bottom-link {
    bottom: 0;
    color: hsl(var(--on-background-color));
    display: block;
    font-size: var(--navigation-font-size);
    height: var(--navigation-length);
    line-height: 1.5;
    right: 0;
    position: fixed;
    text-align: center;
    transition: background var(--transition-duration), color var(--transition-duration);
    width: var(--navigation-length);
    z-index: 1;
}
.bottom-link:hover {
    animation-play-state: paused;
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
    text-decoration: none;
}

/* Navigation */
:is(#header h1, .side-link) a, #login-status::before, .bottom-link {
}

/* Rate Module */
#main-content .page-rate-widget-box {
    border: solid 1px hsl(var(--subtle-color));
    border-bottom: solid 2px hsl(var(--primary-color));
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    margin: 0 0 .5em;
}
#main-content .page-rate-widget-box * {
    background: none;
    border: none;
    border-radius: 0;
    box-sizing: unset;
    color: hsl(var(--on-background-color));
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    height: unset;
    margin: 0;
    padding: 0;
}
#main-content :is(div.page-rate-widget-box .rate-points, .page-rate-widget-box a) {
    padding: 0 .5em;
    transition: background var(--transition-duration), color var(--transition-duration);
}
#main-content .page-rate-widget-box :is(a:hover, a:active) {
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
}

/* Credit Module */
#main-content .page-rate-widget-box a::before {
    display: none;
}
#main-content .creditRate {
    display: block;
    float: none;
    margin: 0 0 .5em;
    text-align: center;
}
#main-content .creditRate .rateBox {
    display: inline-block;
}
#main-content .rate-box-with-credit-button {
    border-radius: 0;
    display: inline-block;
    height: unset;
    min-width: unset;
}
#main-content .rate-box-with-credit-button .page-rate-widget-box {
    margin: 0;
}
#main-content .rate-box-with-credit-button .creditButton {
    background: none;
    border: solid 1px hsl(var(--subtle-color));
    border-bottom: solid 2px hsl(var(--primary-color));
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    font-size: inherit;
    height: unset;
    margin: 0 0 0 .2em;
    width: unset;
}
#main-content .creditButton a {
    color: hsl(var(--on-background-color));
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    padding: 0 .6em;
    transition: background var(--transition-duration), color var(--transition-duration);
    width: unset;
}
#main-content .creditButton :is(a:hover,  a:active) {
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
}
#main-content :is(#u-credit-view,  #u-credit-otherwise) {
    animation: none;
    z-index: 11;
}
#main-content .fader {
    background: none;
}
#main-content .fader iframe {
    border: none;
    opacity: 0;
}
#main-content .modalcontainer {
    height: min-content;
    max-width: 100vw;
    min-width: unset;
    width: calc(var(--base-font-size) * 40);
}
#main-content .modalbox {
    background: hsla(var(--background-color), var(--background-alpha));
    border: solid 1px hsl(var(--subtle-color));
    border-radius: 0;
    box-shadow: none;
    height: unset;
    min-height: unset;
    min-width: unset;
}
#main-content .modalbox::after {
    display: none;
}
#main-content .modalbox .modalbox-title {
    background: hsla(var(--background-color), var(--background-alpha));
    border-radius: 0;
    margin-bottom: 0;
    min-height: unset;
}
#main-content .modalbox .credit {
    aspect-ratio: 8 / 3;
    overflow: hidden auto;
    margin: 0;
    padding: 1em 2em;
}
#main-content .creditBottomRate {
    position: unset;
}
#main-content .credit-license a.cc {
    color: hsl(var(--on-background-color));
}
#main-content .creditRate.no-rate .page-rate-widget-box {
    display: none;
}

/* Tab */
:is(.yui-navset, .yui-navset .yui-navset-top, .yui-navset-bottom) .yui-nav {
    border: none;
    flex-flow: wrap;
    display: flex;
    margin: 0 1em .5em;
    width: calc(100% - 2em);
}
:is(.yui-navset, .yui-navset .yui-navset-top, .yui-navset-bottom) .yui-nav li {
    flex-grow: 1;
    display: block;
    margin: .2em .3em;
    padding: 0;
    text-align: center;
    vertical-align: unset;
}
:is(.yui-navset, .yui-navset .yui-navset-top, .yui-navset-bottom) .yui-nav .selected {
    margin: .2em .3em;
}
:is(.yui-navset, .yui-navset .yui-navset-top, .yui-navset-bottom) .yui-nav li a {
    background: none;
    border: solid 1px hsl(var(--subtle-color));
    border-bottom: solid 2px hsl(var(--primary-color));
    border-radius: 0;
    color: hsl(var(--on-background-color));
    display: block;
    padding: .5em 1em;
    transition: background var(--transition-duration), color var(--transition-duration);
}
.yui-navset .yui-nav li :is(a:focus, a:hover) {
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
}
.yui-navset .yui-nav .selected :is(a, a:focus, a:hover) {
    background: hsl(var(--primary-color));
    color: hsl(var(--on-primary-color));
}
.yui-navset .yui-nav .selected a {
    border: solid 1px hsl(var(--primary-color));
    border-bottom-width: 2px;
}
:is(.yui-navset, .yui-navset .yui-navset-top, .yui-navset-bottom) .yui-nav li a em {
    border: none;
    padding: 0;
    position: static;
}
.yui-navset .yui-nav .selected a em {
    background: none;
    padding: 0;
}
.yui-navset .yui-content {
    background: transparent;
    border: none;
    border-top: solid 1px hsl(var(--subtle-color));
    color: unset;
    padding: 1em;
}

/* Pager */
.pager a {
    border: solid 1px hsl(var(--subtle-color));
    color: hsl(var(--on-background-color));
    font-size: var(--label-font-size);
    padding: .2em .5em;
    transition: background var(--transition-duration), color var(--transition-duration);
    white-space: nowrap;
}
.pager a:hover {
    background: hsla(var(--subtle-color), var(--background-alpha));
    color: hsl(var(--on-subtle-color));
}
.pager .current {
    background: hsl(var(--primary-color));
    border: solid 1px hsl(var(--primary-color));
    color: hsl(var(--on-primary-color));
    font-size: var(--label-font-size);
    padding: .2em .5em;
}

/* Page Tags */
#main-content .page-tags {
    margin: 1.5em 0 0;
}
.page-tags span {
    border-top: solid 1px hsl(var(--subtle-color));
    font-size: var(--label-font-size);
}
.page-tags a {
    margin: 0 .25em;
}
.page-tags a::before {
    content: "#";
}

/* Page Options */
#page-info, .page-watch-options {
    font-size: var(--label-font-size);
}
.page-options-bottom {
    flex-flow: wrap;
    display: flex;
    height: unset;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}
.page-options-bottom a {
    flex-grow: 1;
    margin: 2px;
}
#revision-list :is(tr:first-child td, td:nth-child(2), td:nth-child(4)) {
    white-space: nowrap;
}
table.page-compare :is(td, th) {
    border: solid 1px hsl(var(--subtle-color));
}

/* Footer */
#footer {
    background: hsl(var(--secondary-color));
    color: hsl(var(--on-secondary-color));
    font-size: var(--label-font-size);
    text-align: center;
}
#footer .options {
    display: inline-block !important;
    float: none;
    width: unset;
}
#footer .options::after {
    content: "|";
}
#footer a {
    color: inherit;
}
#license-area {
    color: hsl(var(--on-background-color));
    font-size: var(--label-font-size);
}

/* Others */
#action-area-top div, .alert, #lock-info {
    background: hsl(var(--background-color));
    border: solid 1px hsl(var(--subtle-color));
    color: hsl(var(--on-background-color));
    font-size: var(--label-font-size);
}
.owindow {
    aspect-ratio: 16 / 9;
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    background-color: hsla(var(--background-color), var(--background-alpha));
    border: solid 1px hsl(var(--subtle-color));
    height: min-content;
    max-width: 100vw;
    width: calc(var(--base-font-size) * 40) !important;
}
.owindow .title {
    align-items: center;
    background: hsla(var(--background-color), var(--background-alpha));
    display: flex;
    font-size: var(--title-font-size);
    font-weight: 600;
    height: unset;
    justify-content: center;
    padding: .25em 0;
}
.owindow .content {
    aspect-ratio: 16 / 7;
    overflow: hidden auto;
    margin: 0;
    padding: 1em 2em;
}
.owindow .content img {
    background: none !important;
}
.owindow .content div[style="margin-top: 10px"] {
    flex-flow: wrap;
    display: flex;
    text-align: center;
}
.owindow .content div[style="margin-top: 10px"] div[style="float:right"] {
    text-align: right;
    width: 100%;
}
.owindow .content div[style="margin-top: 10px"] a {
    display: inline-block;
    flex-grow: 1;
    margin: 2px;
}
.hovertip {
    background-color: hsla(var(--background-color), calc(var(--background-alpha) * 1.5)) !important;
    border: solid 1px hsl(var(--subtle-color)) !important;
    color: hsl(var(--on-background-color));
    font-size: var(--label-font-size);
}
.hovertip .title {
    background-color: hsla(var(--background-color), var(--background-alpha));
    color: hsl(var(--on-background-color));
}
.flag-user-ok, .flag-user-abusive {
    display: inline-block;
}
#extra-div-3, #extra-div-4 {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: fixed;
    transition: backdrop-filter var(--transition-duration);
    width: 100%;
    z-index: 10;
}
body:is(:has(li.unfolded .side-link), :has(#u-credit-view:target), :has(.odialog-shader)) #extra-div-3 {
    -webkit-backdrop-filter: saturate(.5);
    backdrop-filter: saturate(.5);
}
body:is(:has(li.unfolded .side-link), :has(#u-credit-view:target), :has(.odialog-shader)) #extra-div-4 {
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
}

/* Result */
.result-content {
    margin: 1em 0;
}
.result-content h2 {
    margin: 0;
}
.result-wrap {
    display: grid;
    gap: 1em;
    grid-template-areas:
        "first first"
        "second third";
    grid-template-columns: 1fr 1fr;
    margin: 0 0 3em;
}
.result-first {
    grid-area: first;
}
.result-second {
    grid-area: second;
}
.result-third {
    grid-area: third;
}
.result-wrap :is(h2, h3) span {
    font-weight: 400;
}
.result-wrap :is(h2, h3) span a {
    font-weight: 700;
}
.result-wrap .printuser {
    font-size: max(calc(var(--title-font-size) * .6), var(--base-font-size));
}
.result-first .printuser {
    font-size: max(calc(var(--title-font-size) * .7), var(--base-font-size));
}
.finalvoting {
    display: flex;
    flex-flow: wrap;
}
.finalvoting div.blockquote {
    flex-grow: 1;
    margin: .75em;
    min-width: 25em;
    padding: .5em 1em;
    text-align: start;
}