@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;640&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
    --header-font: 'Orbitron', 'Noto Sans SC', sans-serif;
    --body-font: 'Anek Latin', 'Noto Sans SC', sans-serif;
    --mono-font: 'Space Mono', 幼圆, monospace;

    --techno-accent: 0 255 255;
    --techno-secondary: 0 154 166;
    --techno-tertiary: 0 128 122;
    --techno-dark: 1 55 55;
    --techno-counter: 255 153 68;
    --techno-base-white: 248 248 248;
    --techno-base-black: 0 16 16;

    --sp_area-max-width: 64.75rem;
    --sp_area-min-margin: 1.5rem;
    --sp_header-height: 10.25rem;
    --sp_header-gradient-top-color: rgb(var(--techno-base-black));
    --sp_header-gradient-bottom-color: rgb(var(--techno-dark));
    --sp_header-gradient-top-stop: 0.05;
    --sp_header-gradient-bottom-stop: 0.775;
    --sp_diagonal-stripes-angle: 0deg;
    --sp_diagonal-stripes-color: rgb(var(--techno-dark) / 0.33);
    --sp_diagonal-stripes-width: .195rem;
    --sp_diagonal-stripes-gap: .425rem;
    --sp_header-logo: url(https://scp-wiki.wdfiles.com/local--files/theme%3Atechnoblast/logoaiad.png);
    --sp_header-logo-size: 8.25rem;

    --sp_header-title-scale: 0.875;
    --sp_header-subtitle-scale: 1.25;

    --sp_top-bar-height: 2.325rem;
    --sp_top-bar-gradient-top-color: rgb(var(--techno-dark));
    --sp_top-bar-gradient-bottom-color: var(--sp_top-bar-gradient-top-color);
    --sp_top-bar-link-color: rgb(var(--techno-accent));
    --sp_top-bar-link-hover-color: rgb(var(--techno-counter));
    --sp_top-bar-link-hover-background:  rgb(var(--techno-base-black) / 0.5);
    --sp_dropdown-link-color: rgb(var(--techno-base-white));
    --sp_dropdown-background: rgb(var(--techno-base-black) / 0.8125);
    --sp_dropdown-link-hover-color: rgb(var(--techno-accent));
    --sp_dropdown-link-hover-background: rgb(var(--techno-base-black) / 0.5);
    --dropdown-border-width: 0.075rem;
    --dropdown-border-color:  rgb(var(--techno-accent));

    --sp_rate-module-background: rgb(var(--techno-dark));
    --sp_rate-module-text-color: rgb(var(--techno-accent));
    --sp_rate-module-sub-color: rgb(var(--techno-tertiary));
    --sp_rate-module-active-color: rgb(var(--techno-counter));
    --sp_rate-module-button-color: var(--sp_rate-module-text-color);
    --sp_rate-module-button-background: transparent;
    --sp_rate-module-button-hover-color: var(--sp_rate-module-background);
    --sp_rate-module-button-hover-background: var(--sp_rate-module-text-color);

    --sp_tab-text-color: rgb(var(--techno-base-black));
    --sp_tab-background: rgb(var(--techno-tertiary) / 0.05);
    --sp_tab-hover-text-color: rgb(var(--techno-base-white));
    --sp_tab-hover-background: rgb(var(--techno-secondary));
    --sp_tab-selected-text-color: rgb(var(--techno-accent));
    --sp_tab-selected-background: rgb(var(--techno-dark));

    --search-icon-mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E);
}

body {
    font-family: var(--body-font);
    font-size: 0.9625rem;
    color: rgb(var(--techno-base-black));
    background-color: rgb(var(--techno-base-white));
}

input {
    font-family: var(--mono-font);
    font-size: 0.95em;
}

#header {
    padding-block-start: 0.5rem;
    box-sizing: border-box;
    grid-template-areas:
        ". login search ."
        "… ."
        ". h1 h1 ."
        ". h2 h2 ."
        "… ."
        "top-bar top-bar top-bar top-bar";
    background-blend-mode: overlay;
}
#header h1, #header h2 {
    padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.0125);
}
#header h1 a, #header h2 span {
    font-weight: bold;
    text-shadow: none;
    line-height: 1.05;
}
#header h1 a {
    font-family: var(--header-font);
    color: rgb(var(--techno-accent));
}
#header h2 span {
    font-family: var(--body-font);
    color: rgb(var(--techno-counter));
}

/*-------------------------------*/

#login-status {
    padding: 0;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.325rem;
    margin-inline-end: 0.5rem;
    color: rgb(var(--techno-base-white));
}
#login-status > * {
    font-size: 0.875rem;
    order: 1;
}
#login-status .printuser { font-size: 0; }
#login-status .printuser > a:first-child { font-size: 0.925rem; }
#login-status a { color: rgb(var(--techno-counter)); }

a#account-topbutton {
    margin: 0;
    padding: 0;
    display: grid;
    place-content: center;
    height: 100%;
    width: 1.625rem;
    border: 0;
    background: rgb(var(--techno-secondary) / 0.325);
    color: rgb(var(--techno-accent));
}
#account-options {
    font-family: var(--mono-font);
    width: 10.25em; min-width: max-content;
    border: none;
    background: var(--sp_dropdown-background);
    -webkit-backdrop-filter: blur(0.125rem);
    backdrop-filter: blur(0.125rem);
}
#account-options ul li a {
    padding: 0.375rem 0.5rem;
    color: rgb(var(--techno-accent));
    text-decoration: none;
    position: relative;
    isolation: isolate;
    transition: color 0.05s ease-out;
}
#account-options ul li a:is(:hover, :focus) {
    color: rgb(var(--techno-dark));
}
#account-options ul li a::before {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline-end: 0;
    height: 100%;
    width: 0;
    background: rgb(var(--techno-counter));
    z-index: -1;
    transition: width 0.175s ease-out;
}
#account-options ul li a:is(:hover, :focus)::before { width: 100%; }

/*-------------------------------*/

#search-top-box::before {
    content: "";
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    inset-inline-end: 0;
    inset-block-start: 0;
    -webkit-mask-image: var(--search-icon-mask);
    mask-image: var(--search-icon-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 57.5%;
    mask-size: 57.5%;
    background-color: rgb(var(--techno-secondary));
    pointer-events: none;
}
#search-top-box:is(:hover,:focus-within)::before { background-color: rgb(var(--techno-dark)); }

.input-append#search-top-box-form input[type=submit] {
    appearance: none;
    font-size: 0;
    display: block;
    width: 1.625rem;
    height: 1.625rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: rgb(var(--techno-dark));
}
.input-append#search-top-box-form:is(:hover,:focus-within) input[type=submit] {
    background: rgb(var(--techno-accent));
}

/*-------------------------------*/

#top-bar {
    font-size: 0.7675em;
    box-shadow:
        inset 0 0.175rem 0 0 rgb(var(--techno-secondary)),
        inset 0 -0.175rem 0 0 rgb(var(--techno-secondary));
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    text-transform: uppercase;
    font-family: var(--mono-font);
    position: relative;
    max-height: unset;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a::before,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0.175rem;
    background-color: currentColor;
    transition: width .175s ease-out;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a::before {top: 0; left: 0;}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a::after {bottom: 0; right: 0;}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover::before,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a::before,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover::after,
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a::after { width: 100% }

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    inset-inline-start: initial;
    inset-inline-end: 0;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: blur(0.125rem);
    backdrop-filter: blur(0.125rem);
    display: flex;
    flex-direction: column;
    border: solid var(--dropdown-border-color) calc(var(--dropdown-border-width)/2);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    font-size: 1.175em;
    text-align: center;
    padding: 0.5em 0.675em;
    border: none;
    border: solid var(--dropdown-border-color) calc(var(--dropdown-border-width)/2);
}

/*------------------------*/

#side-bar, #interwiki {
    color: rgb(var(--techno-base-white));
}

:is(#side-bar, #interwiki) .side-block {
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-block: solid 0.225rem rgb(var(--techno-secondary));
}
:is(#side-bar, #interwiki) .side-block:is(.side-block, .media, .resources) {
    background-color: rgb(var(--techno-dark)) !important;
    background-image: repeating-linear-gradient(var(--sp_diagonal-stripes-angle),
            rgb(var(--techno-base-black) / 0.25), rgb(var(--techno-base-black) / 0.25) var(--sp_diagonal-stripes-width),
            transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap));
}

:is(#side-bar, #interwiki) .heading {
    color: rgb(var(--techno-counter));
    border-color: currentColor;
    font-family: var(--header-font);
    font-size: 0.825em;
    padding: 0;
}

:is(#side-bar, #interwiki) .side-block a {
    color: rgb(var(--techno-accent));
    display: inline-block;
    padding: 0.125em 0.175em;
    transition: color 0.125s ease-out;
}
:is(#side-bar, #interwiki) .side-block a:is(:hover,:focus) {
    color: rgb(var(--techno-dark));
    background-color: rgb(var(--techno-accent));
}

:is(#side-bar, #interwiki)  .menu-item img { display: none; }

#top-bar div.open-menu a {
    border-radius: 0;
    border: solid 0.175rem rgb(var(--techno-dark));
    background: rgb(var(--techno-dark));
    color: rgb(var(--techno-accent));
}

/*------------------------*/

div.page-rate-widget-box, div.rate-box-with-credit-button {
    padding: .25em;
    height: 1.425em;
    align-items: center;
    border-radius: 0;
    box-shadow: none;
}
div.page-rate-widget-box .rate-points { padding: 0 0.475em; }

div.creditButton p a {
    --sp_rate-module-text-color: rgb(var(--techno-counter));
    border: none;
}
div.creditButton p a:is(:hover,:focus) {
    background: var(--sp_rate-module-text-color);
}

div.modalbox {
    background: rgb(var(--techno-base-white));
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/*------------------------*/

.info-container {
    --barColour: rgb(var(--techno-dark));
    --linkColour: rgb(var(--techno-counter));
}

/*------------------------*/

tt, .page-source, .code, pre {
    font-family: var(--mono-font);

}
tt, .page-source, .code {
    font-size: 0.95em;
}

#page-title, .meta-title,
h1,h2,h3,h4,h5,h6 {
    font-family: var(--header-font);
    color: rgb(var(--techno-dark));
}
#page-title, .meta-title {
    border-color: currentColor;
}

:any-link {
    color: rgb(var(--techno-secondary));
}
a:visited {
    color: rgb(var(--techno-tertiary));
}
a.newpage {
    color: rgb(var(--techno-counter));
}

hr {
    margin: 0.325rem 0;
    height: auto;
    background: transparent;
    display: grid;
    place-items: center;
    overflow: initial;
}
hr::before, hr::after {
    content: "";
    display: block;
    grid-row: 1/2;
    grid-column: 1/2;
}
hr::before {
    height: 0.15rem; width: 100%;
    background: rgb(var(--techno-dark));
}
hr::after {
    box-sizing: border-box;
    width: 0.575rem; height: 0.575rem;
    border: solid 0.15rem rgb(var(--techno-dark));
    background-color: rgb(var(--techno-counter));
    transform: rotate(45deg);
}

blockquote, div.blockquote {
    border: none;
    border-inline-start: 0.225rem solid rgb(var(--techno-secondary));
    background-color: rgb(var(--techno-secondary) / 0.0375);
    padding: 0.05rem 0.875rem;
}

.yui-navset-top ul.yui-nav {
    border: none;
}
.yui-navset.yui-navset-top .yui-nav li { flex-grow: 1; }
.yui-navset.yui-navset-top .yui-nav li a {
    border-width: 0;
    padding: 0.625rem;
    font-family: var(--mono-font);
    font-size: 0.875em;
}

.yui-navset .yui-content {
    background-color: transparent;
    padding: 0.375rem;
    position: relative;
    border: none;
    border-block: solid 0.225rem rgb(var(--techno-dark));
}
.yui-navset .yui-content::before,
.yui-navset .yui-content::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 0.875rem; height: 0.875rem;
    border: solid 0.25rem rgb(var(--techno-dark));
    background: rgb(var(--techno-accent) / 0.75);
    transform: rotate(45deg);
}
.yui-navset .yui-content::before {
    inset-block-start: -0.525rem;
    inset-inline-start: -0.75rem;
}
.yui-navset .yui-content::after {
    inset-block-end: -0.525rem;
    inset-inline-end: -0.75rem;
}

.scp-image-block {
    box-shadow: none;
    border: solid 0.125rem rgb(var(--techno-dark));
    position: relative;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
.scp-image-block .scp-image-caption {
    border: none;
    padding: 0.225rem;
    box-sizing: border-box;
    font-size: .875em;
    color: rgb(var(--techno-base-white));
    background-color: rgb(var(--techno-dark));

}
.scp-image-block::after {
    content: "";
    position: absolute;
    inset-block-start: -0.325rem;
    box-sizing: border-box;
    width: 0.575rem; height: 0.575rem;
    border: solid 0.15rem rgb(var(--techno-dark));
    background-color: rgb(var(--techno-accent));
    transform: rotate(45deg);
}
.scp-image-block.block-right::after { inset-inline-end: -0.325rem; }
.scp-image-block.block-left::after { inset-inline-start: -0.325rem; }

table.wiki-content-table :is(th,td) {
    border: 0.05rem solid rgb(var(--techno-dark));
    padding: 0.5rem 0.75rem;
}
table.wiki-content-table th {
    background-color: rgb(var(--techno-dark));
    color: rgb(var(--techno-accent));
}

/*------------------------*/

#edit-page-title { font-family: var(--header-font); }

#footer {
    background-color: rgb(var(--techno-dark));
    color: rgb(var(--techno-secondary));
}
#footer a { color: rgb(var(--techno-accent)); }

/*------------------------*/

@media screen and (max-width: 767px) {

#top-bar div[class*="top-bar"] > ul > li {
    position: static;
}
#top-bar .mobile-top-bar ul li ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    box-shadow: inset 0 0 0  calc(var(--dropdown-border-width)/2) var(--dropdown-border-color);
}
#top-bar .mobile-top-bar ul li ul li a {
    padding: 0.725em;
    box-shadow: 0 0 0  calc(var(--dropdown-border-width)/2) var(--dropdown-border-color);
    min-width: auto;
    height: 100%;
    display: grid;
    align-content: center;
}

#side-bar {
    background-color: rgb(var(--techno-dark));
}

}