@import url(https://fonts.bunny.net/css?family=poiret-one:400);
@import url(https://fonts.bunny.net/css?family=andada-pro:400);
@import url(https://fonts.bunny.net/css?family=roboto-flex:400);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap);

/*
    Art Deco Theme
    [2026 Wikidot Theme]
    by Fish^12
*/

:root {
    --white: #eee;
    --black: #151515;
    --yellow: #efd67a;
    --trans: transparent;

    --10per: 1rem;
    --20per: 2rem;
    --80per: calc(100% - 2rem);
    --90per: calc(100% - 1rem);

    --poir: "Poiret One", "Noto Sans SC";
    --anda: "Andada Pro", "Noto Serif SC";
    --robo: "Roboto Flex", "Noto Sans SC";

    --gold: linear-gradient(135deg, #ad7f3a, #bc9247, #e3c893, #faf7c5, #f5e29d, #d9b85a, #aa7f37, #9f6f30, #c58f44, #996c34, #6d461a, #754c1d, #906222);
    --gold2: linear-gradient(60deg, #b78a49, #dbb560, #f5efb5, #dbb560, #b78a49);
    --corners: polygon(0% 5px, 5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px));
    --timer: 200ms;

    --header-title: "Machina";
    --header-subtitle: "凭己之翼，凌空翱翔";
    --sp_header-logo: none;
    --sp_header-logo-adaptive-size: 0;
    --sp_header-title-size: clamp(2.5rem, 1.974rem + 2.807vw, 5.5rem);
    --sp_header-subtitle-size: clamp(1rem, 0.086rem + 3.238vw, 3rem);

    --sp_header-height: 20rem;
    --sp_top-bar-height: 2rem;

    --sp_top-bar-gradient-top-color: var(--trans);
    --sp_top-bar-gradient-bottom-color: var(--trans);

    --sp_top-bar-link-color: var(--yellow);
    --sp_top-bar-link-hover-color: var(--white);
    --sp_top-bar-link-hover-background: var(--black);

    --sp_dropdown-link-color: var(--yellow);
    --sp_dropdown-link-hover-color: var(--white);
    --sp_dropdown-link-background: var(--black);
    --sp_dropdown-link-hover-background: var(--black);
    --sp_dropdown-link-border: none;

    --sp_rate-module-text-color: var(--yellow);
    --sp_rate-module-background: var(--black);
    --sp_rate-module-sub-color: var(--yellow);
    --sp_rate-module-active-color: var(--white);
    --sp_rate-module-button-color: var(--yellow);
    --sp_rate-module-button-background: var(--black);
    --sp_rate-module-button-hover-color: var(--white);
    --sp_rate-module-button-hover-background: var(--black);

    --sp_tab-text-color: var(--white);
    --sp_tab-background: var(--black);
    --sp_tab-border-color: var(--white);
    --sp_tab-hover-text-color: var(--yellow);
    --sp_tab-hover-background: var(--black);
    --sp_tab-hover-border-color: var(--yellow);
    --sp_tab-selected-text-color: var(--black);
    --sp_tab-selected-background: var(--yellow);
    --sp_tab-selected-border-color: var(--yellow);

    --sp_hovertip-background: var(--black);
    --sp_hovertip-border: 2px solid var(--yellow);
}

/* From the top! */

body, html {
    color: var(--white);
    font-family: var(--robo);
    scrollbar-width: thin;
    scrollbar-color: var(--yellow) var(--black);
}
::-webkit-scrollbar {
    background-color: var(--black);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button {
    background-color: var(--yellow);
}
::selection {
    background-color: rgba(155, 155, 0, 0.3);
}
#container {
    overflow-x: hidden;
    background-color: var(--black);
    background-image: radial-gradient(#4d4d00 1px, transparent 0);
    background-size: 1rem 1rem;
    background-position: center;
    background-repeat: repeat;
}
#login-status {
    text-align: center;
    background-color: var(--black);
    color: var(--yellow);
    font-family: var(--anda);
    font-weight: bold;
    max-width: fit-content;
    max-height: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5rem;
    z-index: 15;
}
#login-status a {
    color: var(--yellow);
    transition: var(--timer);
}
#login-status a:hover {
    color: var(--white);
    text-decoration: none;
}
#account-topbutton {
    font-size: 100%;
    padding: 0 5px 0 0;
    border-color: var(--trans);
}

/* Pop-up page. */

.owindow {
    background-color: var(--black);
    border-top: 5px solid;
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
}
.owindow p, .owindow h1 {
    padding: 0 0.5rem;
}
.owindow .title {
    cursor: auto;
    text-align: center;
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-position: under;
    background-color: var(--black);
    color: var(--yellow);
    font-family: var(--poir);
    font-size: 1.5rem;
    font-weight: 100;
}
.owindow .title::before, .owindow .title::before,
.owindow .title::after, .owindow .title::after{
    content: "•";
}
.owindow .content {
    padding: 0;
}
.owindow img {
    background-color: var(--trans) !important;
}
.owindow table {
    border-spacing: 0;
    padding: 0;
    width: 100%;
}
.owindow td {
    text-align: right;
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold2);
    padding: 5px 5px 5px 0;
}
.owindow td.active.col-md-3.col-sm-3.col-xs-3.span3, .owindow td.active {
    text-align: left;
    padding: 5px 0 5px 5px;
}
.owindow .button-bar {
    text-align: center;
    text-transform: capitalize;
}
a.btn.btn-primary, a.btn.btn-danger.btn-small.btn-sm {
    padding: 0 5px;
}
.owindow .button-bar a {
    background-color: var(--trans);
    color: var(--white);
    border-color: var(--trans);
    transition: var(--timer);
}
.owindow .button-bar a:hover {
    background-color: var(--yellow);
    color: var(--black);
}

/* Account and search buttons. */

#account-options {
    left: 50%;
    top: 2rem;
    transform: translate(-50%, 0);
    border: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    background-color: var(--black);
    clip-path: var(--corners);
}
#account-options li a {
    color: var(--yellow);
    font-family: var(--anda);
    transition: var(--timer);
}
#account-options li a:hover {
    color: var(--white);
}
#search-top-box {
    align-items: flex-start;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding: 5px 5px 0 0;
}
#search-top-box-form {
    font-family: var(--poir);
    font-size: 1.2rem;
    font-weight: 100;
}
#search-top-box-form input[type=submit] {
    background-color: var(--black);
    background-image: none;
    color: var(--yellow);
    border-color: var(--trans);
    box-shadow: none;
    transition: var(--timer);
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: var(--black);
    border-color: var(--trans);
    background-image: none;
    color: var(--white);
    box-shadow: none;
}
#search-top-box-input {
    display: none;
}

/* Header. */

#header {
grid-template-areas:
    ". login login login login search"
    "… …"
    "h1 h1 h1 h1 h1 h1"
    "h2 h2 h2 h2 h2 h2"
    "… …"
     "top-bar top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr 1fr auto auto 1fr auto;
    background-image: none;
    position: relative;
}
#header::after{
    position: absolute;
    content: "";
    clip-path: polygon(0 100%, 0% 0%, 100% 0%, 90% 10%, 10% 10%, 10% 90%);
    height: 5rem;
    width: 5rem;
    background-image: var(--gold);
    top: calc(80% - 1rem);
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
    filter: brightness(0.7);
}
#header h1, #header h2 {
    text-align: center;
    z-index: 1;
}
#header h1 {
    padding-top: 1vh;
}
#header h2 {
    padding-bottom: 1vh;
}
#header h1 a::before, #header h2 span::before {
    background-image: var(--gold2);
    background-clip: text;
    color: var(--trans);
    font-family: var(--poir);
    font-weight: 100;
}
#header h1 a::after {
    position: absolute;
    content: "";
    border-top: 5px solid;
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    width: 100vw;
    height: 2rem;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(0% 0%, 0 100%, 15% 100%, 15% 0, 85% 0, 85% 100%, 100% 100%, 100% 0);
}
#header h2 span::before {
    letter-spacing: 0;
}
#header h2 span::after {
    position: absolute;
    content: "";
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    border: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold2);
    height: 5rem;
    aspect-ratio: 1;
    top: 21%;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
}
#header h1 a, #header h2 span {
    text-shadow: none;
}
#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
    position: absolute;
    content: "";
    clip-path: var(--corners);
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    min-width: 160px;
    z-index: 10;
}
#header-extra-div-1 {
    width: calc(70% - 4rem);
    height: calc(40% + 4rem);
}
#header-extra-div-2 {
    width: calc(70% - 2rem);
    height: calc(40% + 2rem);
}
#header-extra-div-3 {
    width: 70%;
    height: 40%;
}
div[id*="header-extra-div"] {
    pointer-events: none;
}

/* Top bar. */

#top-bar {
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    position: relative;
}
#top-bar::before, #top-bar::after {
    position: absolute;
    content: "";
    background-image: var(--gold);
    aspect-ratio: 3 / 4;
    max-width: 25rem;
    width: calc(100% - 62.5rem);
    clip-path: polygon(0 30%, 10% 0, 20% 0, 0 40%, 0 50%, 30% 0, 40% 0, 0 60%, 0 70%, 50% 0, 60% 0, 0 80%, 0 90%, 70% 0, 80% 0, 0 100%);
    top: calc(100% + 4px);
    z-index: 0;
}
#top-bar::before {
    left: 0;
}
#top-bar::after {
    right: 0;
    transform: scale(-1, 1);
}
#top-bar div[class*="top-bar"] > ul {
    justify-content: center;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    text-align: center;
}
#top-bar ul li {
    flex-grow: 1;
}
#top-bar ul li a {
    font-family: var(--anda);
    font-size: 1rem;
    transition: var(--timer);
}
#top-bar ul li ul {
    border-left: 5px solid;
    border-right: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    box-shadow: none;
}
#top-bar ul li a::before, #top-bar ul li a::after,
#account-options li a::before, #account-options li a::after {
    content: "•";
    padding: 0 5px;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul {
    transition: var(--timer);
}
#top-bar .open-menu a {
    color: var(--yellow);
    background-color: var(--black);
    border: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold2);
    border-radius: 0;
    box-shadow: none;
    clip-path: var(--corners);
    transition: var(--timer);
    z-index: 50;
}
#top-bar .open-menu a:hover {
    color: var(--white);
    border-radius: 0;
}
a.close-menu {
    opacity: 0.2;
}

/* Side bar and side bar button. */

#side-bar {
    direction: rtl;
    z-index: 100;
}
#side-bar .side-block.media,
#side-bar .side-block.resources,
#side-bar .side-block,
#interwiki .side-block {
    background-color: var(--black) !important;
    border: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold2);
    clip-path: var(--corners);
    direction: ltr;
}
#interwiki .heading, #side-bar .heading {
    font-size: 1.1rem;
    font-family: var(--poir);
    font-weight: 100;
    text-align: center;
    border-bottom: none;
    color: var(--yellow);
    letter-spacing: 2px;
    padding: 0;
    border-top: solid 1px var(--yellow);
    border-bottom: solid 1px var(--yellow);
    margin: 10px 0;
}
#interwiki .heading p::before, #side-bar .heading p::before,
#interwiki .heading p::after, #side-bar .heading p::after {
    content: "•";
    padding: 0 5px;
}
#interwiki .menu-item, #side-bar .menu-item {
    text-align: center;
    font-family: var(--anda);
    line-height: 1.25;
}
#side-bar .side-block.resources a,
#side-bar .side-block a,
#interwiki .side-block a {
    padding: 0 3px 1px;
}
#interwiki .side-block {
    width: 182px;
}
#interwiki .heading {
    letter-spacing: unset;
}
#interwiki .menu-item {
    text-align: unset;
}
#interwiki .menu-item img {
    display: none;
}
#interwiki .menu-item::before {
    content: "•";
    color: var(--yellow);
    padding: 0 5px;
}
#side-bar .side-block.media a {
    padding: 0;
}
#side-bar .side-block.media a:hover {
    background-color: var(--trans);
    filter: invert(1);
}
.menu-item > img {
    display: none;
}
#side-bar a:visited {
    color: #ffe933;
}

/* Body content. */

#main-content {
    background-color: var(--black);
    box-shadow: 5rem 0 2rem var(--black), -5rem 0 2rem var(--black);
    margin-top: 2rem;
}
#page-title, .meta-title {
    position: relative;
    color: var(--yellow);
    font-family: var(--poir);
    font-weight: 300;
    letter-spacing: 2px;
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    padding-bottom: 1rem;
    text-align: center;
    margin-bottom: 3.5rem;
}
#page-title::before, .meta-title::before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    background-image: radial-gradient(var(--black) 0.5rem, var(--trans) 0.6rem), var(--gold2);
    border-radius: 1rem 0;
    top: calc(100% + 2.5px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
#page-title::after, .meta-title::after{
    position: absolute;
    content: "";
    clip-path: polygon(0 100%, 0% 0%, 100% 0%, 80% 20%, 20% 20%, 20% 80%);
    height: 5rem;
    width: 5rem;
    background-image: var(--gold);
    top: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--yellow);
    font-family: var(--anda);
}
div.page-rate-widget-box, .page-rate-widget-box {
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    box-shadow: none;
    position: relative;
}
div.page-rate-widget-box::before, .page-rate-widget-box::before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 2rem;
    background-image: var(--gold);
    border-radius: 0 0 1rem 1rem;
    top: calc(100% + 5px);
    left: 50%;
    transform: translate(-50%, 0);
}
div.page-rate-widget-box .rate-points, .page-rate-widget-box .rate-points {
    padding: 0 5px 0 0;
    text-transform: capitalize;
}
blockquote, div.blockquote {
    background-image: var(--gold2);
    border: unset;
    color: var(--black);
    clip-path: polygon(0 var(--80per), var(--10per) var(--80per), var(--10per) var(--90per), var(--20per) var(--90per), var(--20per) 100%, var(--80per) 100%, var(--80per) var(--90per), var(--90per) var(--90per), var(--90per) var(--80per), 100% var(--80per), 100% var(--20per), var(--90per) var(--20per), var(--90per) var(--10per), var(--80per) var(--10per), var(--80per) 0, var(--20per) 0, var(--20per) var(--10per), var(--10per) var(--10per), var(--10per) var(--20per), 0 var(--20per));
    font-family: var(--anda);
    font-weight: bold;
    min-height: 3rem;
    padding: 1rem 2rem;
}
blockquote a, div.blockquote a {
    background-color: var(--black);
}
hr {
    background-image: var(--gold);
    height: 5px;
    margin: 2rem 3rem;
    overflow: unset;
    position: relative;
}
hr::before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    background-image: radial-gradient(var(--black) 0.5rem, var(--trans) 0.6rem), var(--gold2);
    border-radius: 1rem 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
hr::after {
    position: absolute;
    content: "";
    clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0 20%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 80%, 0 80%);
    height: 2rem;
    width: 6rem;
    background-image: var(--gold);
    border-radius: 0 0 3rem 3rem;
    top: calc(100% + 1.5rem);
    left: 50%;
    transform: translate(-50%, -50%);
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    border-color: var(--trans);
}
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    border: 2px solid var(--yellow);
    background-color: var(--trans);
}
table.wiki-content-table th {
    border: 2px solid var(--yellow);
    background-color: rgba(155, 155, 0, 0.4);
}
table.wiki-content-table td {
    border: 2px solid var(--yellow);
    background-color: var(--black);
}
.scp-image-block, div.scp-image-block {
    position: relative;
    border: none;
    box-shadow: none;
}
.scp-image-block img, div.scp-image-block img  {
    position: relative;
    z-index: 10;
}
.scp-image-block::before, div.scp-image-block::before,
.scp-image-block::after, div.scp-image-block::after {
    position: absolute;
    content: "";
    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    background-image: var(--gold);
    height: 3rem;
    width: 3rem;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 0;
}
.scp-image-block::before, div.scp-image-block::before {
    left: 0;
}
.scp-image-block::after, div.scp-image-block::after {
    left: 100%;
}
.scp-image-block .scp-image-caption, div.scp-image-block .scp-image-caption {
    background-image: var(--gold2);
    border-top: solid 2px var(--trans);
    font-size: 0.9rem;
    font-family: var(--anda);
    color: var(--black);
}
a, a.newpage, a:visited, #interwiki a, #side-bar a, a.action-area-close {
    color: #ffc700;
    transition: var(--timer);
}
a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover, a.action-area-close:hover {
    color: var(--black);
    background-color: var(--yellow);
    text-decoration: none;
}
.code {
    background-color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    scrollbar-width: thin;
}

/* Bottom of the page stuff. */

#main-content .page-tags {
    border-top: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    padding-top: 0.5rem;
    position: relative;
    margin-top: 3rem;
}
#main-content .page-tags::before, #main-content .page-tags::after {
    position: absolute;
    content: "";
    clip-path: polygon(50% 100%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    bottom: calc(100% + 5px);
    height: 4rem;
    width: 40%;
    transform: translate(-50%, 0);
}
#main-content .page-tags::before {
    left: 45%;
    background-image: var(--gold2);
}
#main-content .page-tags::after {
    left: 55%;
    background-image: var(--gold);
}
#main-content .page-tags span {
    border-top: none;
}
#main-content .page-tags a {
    padding: 0 5px;
    font-family: var(--anda);
}
#page-info, .page-watch-options, .page-options-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--anda);
}
.page-watch-options a:hover {
    text-decoration: none;
}
.page-options-bottom a {
    text-align: center;
    flex-basis: 20%;
    border: solid 2px rgba(255, 255, 0, 0.1);
}
#footer {
    background-color: var(--black);
    border-top: 5px solid;
    border-bottom: 5px solid;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: var(--gold);
    color: var(--white);
    margin: 2rem 0;
    overflow: unset;
    padding: 10px 0;
    position: relative;
}
#footer a {
    color: var(--yellow);
    font-family: var(--anda);
    font-weight: bold;
    transition: var(--timer);
}
#footer a:hover {
    color: var(--white);
}
#footer::before, #footer::after {
    position: absolute;
    content: "";
    background-image: var(--gold);
    aspect-ratio: 3 / 4;
    max-width: 25rem;
    width: calc(100% - 62.5rem);
    clip-path: polygon(0 30%, 10% 0, 20% 0, 0 40%, 0 50%, 30% 0, 40% 0, 0 60%, 0 70%, 50% 0, 60% 0, 0 80%, 0 90%, 70% 0, 80% 0, 0 100%);
    bottom: calc(100% + 4px);
    z-index: 0;
}
#footer::before {
    left: 0;
    transform: scale(1, -1);
}
#footer::after {
    right: 0;
    transform: scale(-1, -1);
}
#license-area {
    color: var(--white);
}
.licensebox .collapsible-block-link:active, .licensebox .collapsible-block-link:hover {
    background-color: var(--trans);
}
#lock-info {
    color: var(--black);
}

/* Screen dependent CSS. */

@media (max-width: 767px) {
#side-bar {
    background-color: var(--trans);
    }
#top-bar .open-menu a:hover {
    box-shadow: none;
    }
#header h2 span::after, #header::after {
    display: none;
    }
}
@media (max-width: 479px) {
.page-options-bottom a {
    flex-basis: 30%;
    }
}