/*---------------------------------------------------*/
/*  PASTEL SKIES THEME
    BY MISS LAPIS
    [2025 Wikidot Theme]

    INSPIRED BY / BASED ON / BORROWS ELEMENTS FROM:
    Fossil Theme by EstrellaYoshte: https://scp-wiki.wikidot.com/theme:fossil
    Generic Space Theme by EstrellaYoshte: https://scp-wiki.wikidot.com/theme:space
    Cosmonaut Theme by EstrellaYoshte: https://scp-wiki.wikidot.com/theme:cosmonaut
    Shivering Night Theme by Flea_ZER0: https://scp-wiki-cn.wikidot.com/theme:shivering-night

    WITH SPECIAL THANKS TO:
    STRANGE MATTER ET AL FOR EMOTIONAL SUPPORT AND FOR HYPING ME UP
    SUGARUSH FOR WANTING A PINK THEME (I HOPE THE PINK COLOR SCHEME IS PINK ENOUGH)
    ADASBA, CROQUEMBOUCHE, HAYDENSAINTPASCAL, FISH^12, MANG GWAN, YOSSIPOSSI, PLAGUEPJP, AMAI IXCHEL, IGNOTA FOR TECHNICAL/AESTHETIC SUPPORT
    ESTRELLAYOSHTE FOR MAKING THEMES, FOR APPROVAL, AND FOR ADDITIONAL TECHNICAL SUPPORT */
/*---------------------------------------------------*/

/* fonts taken from Isolated Terminal Theme by EstrellaYoshte and from SCP-8980 by Yossipossi */
@import url('https://scp-wiki.wdfiles.com/local--files/theme:isolated-terminal/vga8.css');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:isolated-terminal/terminus.css');
@import url('https://scp-wiki.wikidot.com/local--files/scp-8980/departuremono.css');

/*
CN适配字体 凤凰点阵体（12px/16px）
=================
Vonwaon Bitmap Font (1.02)
Created/distributed by Haoyu Qiu
Creation date: 2022-05-12 13:58
-----------------
License: (Creative Commons Zero, CC0)
http://creativecommons.org/publicdomain/zero/1.0/
This content is free to use in personal, educational and commercial projects.
Support us by crediting Haoyu Qiu (this is not mandatory)
-----------------
Updates: https://timothyqiu.itch.io/vonwaon-bitmap
=================
*/
@import url('https://cdn.jsdelivr.net/gh/EasyEDG/EasyEDG-s-Wikidot-Document-Repository/CC0%201.0/%5BFont%5DVonwaonBitmap/Typeface-VonwaonBitmap-16px.css');
@import url('https://cdn.jsdelivr.net/gh/EasyEDG/EasyEDG-s-Wikidot-Document-Repository/CC0%201.0/%5BFont%5DVonwaonBitmap/Typeface-VonwaonBitmap-12px.css');

    /*---------------------------------------------------*/
    /*----------------------- ROOT ----------------------*/
    /*---------------------------------------------------*/

:root {
    --header-font: 'mxplus_ibm_vga_8x16regular', 'VonwaonBitmap 16px', monospace;
    --title-font: 'mxplus_ibm_vga_8x16regular', 'VonwaonBitmap 12px', monospace;
    --body-font: 'Departure Mono' ,'VonwaonBitmap 16px', monospace;
    --UI-font: 'terminus_ttfmedium', 'LXGW WenKai', monospace;

    --header-title: "⠀⠀⠀";
    --header-subtitle: " ";

    --sp_header-title-scale: 1.5;
    --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
    --sp_header-logo: unset;
    --sp_header-logo-size: 25rem;
    --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.9 + 5vw));
    --sp_header-height: 20rem;

    --sp_top-bar-height: 2rem;
    --sp_top-bar-gradient-top-color: rgba(var(--top-bar-color), 0.8);
    --sp_top-bar-gradient-bottom-color: rgba(var(--top-bar-color), 0.8);
    --sp_top-bar-link-hover-background: rgba(var(--lighter-pink), 0.8);
    --sp_top-bar-link-hover-color: rgb(var(--dark-purple));
    --sp_dropdown-background: rgb(var(--light-pink));
    --sp_dropdown-link-hover-color: rgb(var(--dark-pink));
    --sp_dropdown-link-hover-background: rgb(var(--light-red));

    --sp_tab-text-color: rgb(var(--dark-purple));
    --sp_tab-background: rgb(var(--light-red));
    --sp_tab-border-color: transparent;
    --sp_tab-hover-text-color: rgb(var(--dark-purple));
    --sp_tab-hover-background: rgba(var(--light-purple), 0.4);
    --sp_tab-hover-border-color: transparent;
    --sp_tab-selected-text-color: rgb(var(--dark-purple));
    --sp_tab-selected-background: rgb(var(--light-pink));
    --sp_tab-selected-border-color: transparent;

    --sp_rate-module-text-color: rgb(var(--text-color));
    --sp_rate-module-background: rgb(var(--lighter-pink));
    --sp_rate-module-sub-color: rgb(var(--light-red));
    --sp_rate-module-active-color: var(--sp_rate-module-background);
    --sp_rate-module-button-color: var(--sp_rate-module-background);
    --sp_rate-module-button-background: var(--sp_rate-module-background);
    --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
    --sp_rate-module-button-hover-background: rgb(var(--light-pink));

    --sp_hovertip-background: rgb(var(--lighter-pink));
    --sp_hovertip-border: var(--border-big) rgb(var(--border-color-general));

/* ---------- custom colors and vars ---------- */
    --light-purple: 192, 163, 217;
    --light-pink: 238, 178, 203;
    --lighter-pink: 250, 207, 225;
    --light-red: 250, 207, 207;
    --dark-purple: 86, 46, 96;
    --dark-pink: 129, 54, 101;
    --white: 255, 255, 255;
    --text-color: 32, 21, 51;

    --bg-color: 184, 189, 231;
    --lowest-sky: 243, 199, 216;

    --border-color-general: 199, 123, 169;
    --top-bar-color: var(--bg-color);
    --selection-color: 146, 63, 112;
    --og-selection-color: 0, 120, 215;

    --border-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/bordir.svg) 10;
    --cloud-background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/cloudy_dusk_new.png);

    --radius: 1.4rem;
    --border-big: 0.3em solid;
    --border-small: 0.08em solid;
    --button-border: 0.3rem outset;
    --pink-border-filter: invert(91%) sepia(13%) saturate(7071%) hue-rotate(282deg) brightness(85%) contrast(80%);
    --dark-purple-filter: invert(19%) sepia(28%) saturate(1641%) hue-rotate(245deg) brightness(93%) contrast(87%);

    /*---------------------------------------------------*/
    /*------------------- PIXEL BORDER ------------------*/
    /*---------------------------------------------------*/
    /*---------------- CODE FROM CODEPEN ----------------*/
    /*-----------------LICENSED UNDER MIT ---------------*/
    /*---------------------------------------------------*/
    /*---- https://codepen.io/makewistful/pen/ezOGJK ----*/
    /*---------------------------------------------------*/

    --pixel-bg: var(--light-red);
    --pixel-border: var(--dark-purple);
    --pixel-border-2: var(--pixel-bg);
    --pixel-border-3: var(--pixel-border);
    --pixel: .3rem; /* Pixel size */

    --the-border-itself: /* Inner Background Color */
     0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) rgb(var(--pixel-bg)),

    /* Pixel Border Layer 1 */
     calc(var(--pixel) * -1) 0 0 0 rgb(var(--pixel-border)),
     var(--pixel) 0 0 0 rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -2) 0 0 rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 2) 0 0 rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border)),

    /* Pixel Border Layer 2 */
     calc(var(--pixel) * -2) 0 0 0 rgb(var(--pixel-border-2)),
     calc(var(--pixel) * 2) 0 0 0 rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -1) 0 var(--pixel) rgb(var(--pixel-border-2)),
     0 var(--pixel) 0 var(--pixel) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -4) 0 0 rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 4) 0 0 rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-2)),

    /* Border Layer 3: --pixel-border-3 */
     calc(var(--pixel) * -3) 0 0 0 rgb(var(--pixel-border-3)),
     calc(var(--pixel) * 3) 0 0 0 rgb(var(--pixel-border-3)),
     0 0 0 calc(var(--pixel) * 2) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -3) 0 var(--pixel) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 3) 0 var(--pixel) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -5) 0 0 rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 5) 0 0 rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-3));

    /*---------------------------------------------------*/
    /*-------------------- END OF ROOT ------------------*/
    /*---------------------------------------------------*/
}

    /*---------------------------------------------------*/
    /*------------------ MAIN ELEMENTS ------------------*/
    /*---------------------------------------------------*/

/* ---------- griddy ---------- */
#header {
    background: transparent;
    grid-template-areas:
        "login login login search"
        "top-bar top-bar top-bar top-bar"
        "… ."
        "h1 h1 . ."
        "… .";
    grid-template-rows: auto auto 1fr auto 1fr;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto auto;
}
/* -------------------- */

/* ---------- title ---------- */
#header h1 a {
  position: relative;
}

#header h2 { display: none; }
#header h1 a {
    font-family: var(--header-font);
    text-shadow: none;
    font-weight: 700;
    line-height: 0.875;
    letter-spacing: -0.1rem;
    margin-bottom: 5rem;
    color: transparent;

    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/moon_icon.svg");
    background-size: var(--sp_header-logo-adaptive-size) auto;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.2s ease-out;
}

#header h1 a:is(:hover,:focus-within) {
    filter: drop-shadow(0 0 10px rgb(var(--light-red)));
}

#header::before {
    content: "";
    display: block;
    background: var(--sp_header-logo) no-repeat center;
    background-size: contain;
    grid-row: 3/6;
    grid-column: 1/3;
    justify-self: center;
    width: var(--sp_header-logo-adaptive-size);
}

#header h1 {
    margin-top: 5em;
}

#header h1, #header h2 {
  margin-left: initial;
  padding: 0;
  padding-inline-start: 0;
  float: none;
  max-height: initial;
  font-size: 1rem;
  text-align: center;
}

#header h1 a::before {
    content: var(--header-title);
    font-size: 15rem;
}
/* -------------------- */

/* ---------- user info and owindows ---------- */
#header-extra-div-1 {
    grid-area: login;
    background-color: rgba(var(--bg-color), 0.8);
}

#login-status {
    padding-inline-start: calc(var(--sp_area-min-margin) + 1.25rem);
    padding-inline-end: 2rem;
    padding-left: 5em;
    height: 30px;
    text-align: center;
    width: max-content;
    font-size: 0.9em;
    color: rgb(var(--dark-pink));
}

#login-status a {
    color: rgb(var(--dark-purple));
}

a#account-topbutton {
    display: grid;
    place-content: center;
    height: 69%;
    width: 1.75rem;
    padding: 0.2em;
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    font-size: 1.02em;
    color: rgb(var(--dark-purple));
    border: none;
}

a#account-topbutton:is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--dark-pink));
}

#account-options {
    background-color: rgb(var(--light-pink));
    border: none;
}

#account-options ul li a {
    text-align: center;
    color: rgb(var(--dark-purple));
    border-bottom: 0.08em solid rgb(var(--white));
}

#account-options ul li a:is(:hover, :active, :focus, :focus-within) {
    color: var(--dark-purple);
    background-color: rgb(var(--light-red));
}

.owindow {
    background-color: rgb(var(--lighter-pink));
    color: rgb(var(--text-color));
    border: var(--border-big) rgb(var(--border-color-general));
}

.owindow .title {
    cursor: initial;
    padding: 0.375rem 0.675rem;
    font-family: var(--header-font);
    font-size: 190%;
    text-align:center;
    background-color: rgba(var(--bg-color), 0.7);
    color: rgb(var(--dark-purple));
    border-top: 0.08em solid rgb(var(--dark-purple));
    border-bottom: 0.08em solid rgb(var(--dark-purple));

    height: auto;
}

.owindow img {
    background-color: transparent!important;
}

.owindow a {
    color: rgb(var(--dark-purple));
}

.owindow:has(#user-abuse-report-button-hovertip) {
    background-color: rgb(var(--light-red));
    color: rgb(var(--text-color));
    box-shadow: var(--the-border-itself);
    border: unset;
}

.modal-body td img[src*="userkarma.php"] {
    filter: hue-rotate(150deg);
}
/* -------------------- */

/* ---------- search box ---------- */
#search-top-box-form {
    gap: 0;
    height: 100%;
}

#search-top-box-input, #search-top-box-form input[type=submit] {
    padding: 0.25rem;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
}

#search-top-box-form input.btn[type=submit] {
    box-shadow: none;
    background: rgb(var(--lighter-pink));
    border: none;
    font-size: 0;
    width: 2rem;
}
#search-top-box {
    --search-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);
}
#search-top-box::before {
    content: "";
    display: block;
    width: 2rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgb(var(--dark-pink));
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: var(--search-mask);
    mask-image: var(--search-mask);
    -webkit-mask-size: 1.05rem;
    mask-size: 1.05rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* -------------------- */

/* ---------- top bar ---------- */
#top-bar {
    border-bottom: 0.25em solid rgb(var(--dark-purple));
}

#top-bar div[class*="top-bar"] > ul > li {
    flex-grow: 1;
}

#top-bar div[class*="top-bar"]>ul>li>a {
    color: rgb(var(--dark-pink));
    font-weight: bold;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    display: grid;
    padding: .425rem;
    border: none;
    border-bottom: 0.25em solid rgb(var(--dark-purple));
    font-size: 0.9em;
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    text-align: center;
    padding: .375rem .625rem;
    font-weight: bold;
    color: rgb(var(--dark-purple));
}

#top-bar .open-menu a {
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: 0.15em solid rgb(var(--dark-purple));
    background-color: rgba(var(--top-bar-color), 0.6);
    border-radius: 0;
    color: rgb(var(--dark-purple));
}
/* -------------------- */

/* ---------- sidebar ---------- */
div#side-bar {
    font-family: var(--UI-font);
    background-color: rgba(var(--dark-purple), 0.7);
    border-right: 0.08em solid rgb(var(--dark-purple));
    scrollbar-width: none;
}

:is(#side-bar, #interwiki) .heading {
    padding-left: 0;
    color: rgb(var(--dark-purple));
    font-family: var(--header-font);
    font-size: 1.2em;
    text-align: center;
    border-bottom-color: rgb(var(--dark-purple));
}

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

#side-bar a:is(:hover, :active, :focus, :focus-within), #interwiki a:is(:hover, :active, :focus, :focus-within) {
    text-decoration: underline;
}

:is(#side-bar, #interwiki) .side-block {
    background-color: rgba(var(--light-purple), 0.9);
    border-color: rgb(var(--dark-purple));
}

#side-bar .side-block.resources {
    background-color: rgba(var(--border-color-general), 0.9);
    border-color: rgb(var(--dark-purple));
}

#side-bar .side-block.media {
    background-color: rgba(var(--light-red), 0.9);
    border-color: rgb(var(--dark-purple));
}

.side-block.media a:nth-child(1) img {
    filter: hue-rotate(60deg);
}
.side-block.media a:nth-child(2) img {
    filter: hue-rotate(78deg);
}
.side-block.media a:nth-child(3) img {
    filter: hue-rotate(265deg);
}
.side-block.media a:nth-child(5) img {
    filter: hue-rotate(20deg);
}
.side-block.media a:nth-child(7) img {
    filter: hue-rotate(46deg);
}
/* -------------------- */

/* ---------- rating module ---------- */
:not(.rate-box-with-credit-button) > div.page-rate-widget-box,
div.rate-box-with-credit-button {
    border-radius: 0;
    border: var(--border-small) rgb(var(--border-color-general));
    font-size: 1.14em;
    font-family: var(--UI-font);
}

.page-rate-widget-box :is(.rateup, .ratedown, .cancel) a {
    display: block;
    height: 100%;
    width: 0.95em;
    text-align: center;
}

div.page-rate-widget-box .cancel a:hover {
    background-color: var(--sp_rate-module-button-hover-background);
}

.creditButton p a:hover, .creditButtonStandalone p a:hover {
    background-color: var(--sp_rate-module-button-hover-background);
}

div.modalbox {
    background: rgb(var(--light-red));
    padding: 0.25rem 0.75rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
.modalbox > .credit {
    margin: 0.5rem;
}

.creditButtonStandalone p a {
    border-radius: 0;
    border: var(--border-small) rgb(var(--border-color-general));
    background-color: rgb(var(--lighter-pink));
}
/* -------------------- */

/* ---------- scrollbar ---------- */
::-webkit-scrollbar {
  width: 0.625rem;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--dark-pink));
  border: none;
}
::-webkit-scrollbar-track {
  background: rgb(var(--bg-color));
}

:root {
    scrollbar-color: rgb(var(--dark-pink)) rgb(var(--bg-color));
    scrollbar-width: thin;
}
/* -------------------- */
    /*---------------------------------------------------*/

    /*---------------------------------------------------*/
    /*------------------ SKY BACKGROUND -----------------*/
    /*---------------------------------------------------*/
#container {
    background-color: rgb(var(--bg-color));
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/cloudy_dawn_sky_new.png'), linear-gradient(0deg, rgba(var(--lowest-sky),1) calc(50vh - 15vw), rgba(var(--bg-color),1) calc(50vh - 15vw));
    background-size: 100dvw auto, auto;
    background-position: center, center;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    image-rendering: pixelated;
}

:root {
  --cloud-background-gradient-transition: calc(100vh - 30vw);
}

#container::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: var(--cloud-background-image), linear-gradient(0deg, rgba(var(--light-purple),1) var(--cloud-background-gradient-transition), rgba(var(--bg-color),0) var(--cloud-background-gradient-transition));
    background-size: 100dvw auto, auto;
    background-position: right center, top 150%;
    background-repeat: no-repeat, no-repeat;
    image-rendering: pixelated;
}
    /*---------------------------------------------------*/

    /*---------------------------------------------------*/
    /*----------------- BODY CONTAINER ------------------*/
    /*---------------------------------------------------*/
#main-content {
    background: rgba(var(--light-red), 0.6);
    background: linear-gradient(180deg,rgba(var(--light-red), 1) 0%, rgba(var(--light-red), 0.6) 15%, rgba(var(--light-red), 0.6) 85%, rgba(var(--light-red), 1) 100%);
    padding: 2.5rem 2.5rem 0 2.5rem;
    margin: 3rem auto;
    max-width: 53.5rem;
    color: rgb(var(--text-color));
    box-shadow: var(--the-border-itself);
    image-rendering: auto;
}

#content-wrap {
    margin: 0 auto;
}
    /*---------------------------------------------------*/

    /*---------------------------------------------------*/
    /*---------------------- FONTS ----------------------*/
    /*---------------------------------------------------*/
body {
    font-family: var(--body-font);
    color: rgb(var(--text-color));
}

::selection {
    background-color: rgba(var(--selection-color), 0.72);
    color: rgb(var(--white));
}

a::selection {
    color: #e3edfa;
}

h1 { font-size: 2.1em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }

h1, h2, h3 {
    font-family: var(--header-font);
    color: rgb(var(--dark-purple));
}

h4, h5, h6 {
    font-family: var(--header-font);
    color: rgb(var(--dark-pink));
}

#page-title, .meta-title {
    font-family: var(--header-font);
    color: rgb(var(--dark-purple));
    border-bottom: var(--border-small) rgb(var(--dark-pink));
    text-align: center;
    font-size: calc(var(--sp_header-title-size) * 0.8);
}

#main-content {
    font-size: 0.9em;
}

#main-content a:not(.yui-navset .yui-nav a, .collapsible-block a) {
    font-weight: bold;
    color: rgb(var(--dark-pink));
    text-decoration: underline;
}

tt {
    font-family: var(--UI-font);
    font-size: 1.2em;
}
    /*---------------------------------------------------*/

    /*---------------------------------------------------*/
    /*--------------- KEY PAGE COMPONENTS ---------------*/
    /*---------------------------------------------------*/

hr {
    background-color: rgb(var(--border-color-general));
}

/* ---------- blockquote ---------- */
blockquote, div.blockquote {
    display: flow-root;
    position: relative;
    border-color: transparent;
    border-radius: var(--radius);
    padding: 0.25rem 1.325rem;

    background-color: rgb(var(--light-red));
    color: rgb(var(--text-color));
}

blockquote::after, div.blockquote::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 30px solid;
    border-image: var(--border-image) / 1rem;
    filter: var(--pink-border-filter);
    border-image-outset: 0.1em 0.1em 0.06em;
    pointer-events: none;
}
/* -------------------- */

/* ---------- lite blockquote ---------- */
div.blockquote.lite {
    border: var(--border-small) rgb(var(--border-color-general));
    border-radius: 0;
}
div.blockquote.lite::after {
    border: transparent;
    border-image: unset;
}
/* -------------------- */

/* ---------- collapsible ---------- */
div[class*="collapsible-block"] {
    display: flow-root;
}

.collapsible-block-folded a.collapsible-block-link,
.collapsible-block-unfolded-link a.collapsible-block-link {
    display: block;
    padding: .53rem 1rem;
    color: rgb(var(--dark-purple));
}

.collapsible-block-folded a.collapsible-block-link:is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--dark-purple));
    background-color: rgb(var(--light-red));
    border-radius: var(--radius);
    filter: unset;
    text-decoration: none;
}

.collapsible-block-folded, .collapsible-block-unfolded-link {
    position: relative;
    margin: 1rem auto;
    padding: 0;
    border-color: transparent;
    border-radius: var(--radius);
    background-color: rgb(var(--light-pink));
    font-family: var(--header-font);
    font-size: 140%;

    text-align:center;
}

:is(.collapsible-block-folded, .collapsible-block-unfolded-link)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}

.collapsible-block-folded:is(:hover, :active, :focus, :focus-within),
.collapsible-block-unfolded-link:is(:hover, :active, :focus, :focus-within){
    background-color: rgb(var(--light-red));
    color: rgb(var(--dark-purple));
    filter: unset;
}

:is(.collapsible-block-folded, .collapsible-block-unfolded-link):is(:hover, :active, :focus, :focus-within)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}

.collapsible-block-link:is(:hover, :active, :focus, :focus-within){
    color: rgb(var(--text-color));
}

.collapsible-block-unfolded {
    position: relative;
    margin: 1rem auto;
    border-color: transparent;
    border-radius: var(--radius);
    background-color: rgb(var(--light-red));
    color: rgb(var(--text-color));
}

.collapsible-block-unfolded::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 30px solid;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.14em;
    pointer-events: none;
}

.collapsible-block-unfolded > *:nth-child(1){
    padding: 0;
    margin-top: 0;
}

.collapsible-block-unfolded > * {
    padding: .53rem 1rem;
}
/* -------------------- */

/*-------- tabs --------*/

:is(.yui-navset.yui-navset-top .yui-nav li a:where(:hover, :active, :focus, :focus-within)) {
    color: var(--sp_tab-hover-text-color);
    background: var(--sp_tab-hover-background);
    border-color: var(--sp_tab-hover-border-color);
}

div.yui-navset {
    display: grid;
    grid-template-areas: "tab content";
    grid-template-columns: 12.5rem minmax(0,1fr);
    align-items: flex-start;
    --_gap: .45rem;
    gap: var(--_gap);
    padding: var(--_gap);
    background-color: rgb(var(--light-pink));
    border-radius: var(--radius);
}

:is(div.yui-navset)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--pink-border-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}

.yui-navset .yui-nav {
    grid-area: tab;
    display: grid;
    border: none;
    gap: var(--_gap);
    font-size: clamp(.875em, calc(.5em + .675vw), .9125em);
    top: var(--_gap);
    position: static;
}

.yui-navset.yui-navset-top>.yui-nav>li {
    flex-grow: 0;
    position: relative;
    margin: 1.2rem;
    padding: .53rem 1rem;

    border-color: transparent;
    border-radius: var(--radius);

    font-family: var(--header-font);
    font-size: 140%;
    text-align: center;
}

:is(.yui-navset.yui-navset-top>.yui-nav>li)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--pink-border-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}

:is(.yui-navset.yui-navset-top .yui-nav .selected a)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.22em;
    pointer-events: none;
}

:is(.yui-navset.yui-navset-top>.yui-nav>li a):is(:hover, :active, :focus, :focus-within)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.22em;
    pointer-events: none;
}

.yui-navset.yui-navset-top .yui-nav li a {
    border-radius: calc(var(--radius) - var(--_gap) + 0.02rem);
    border-width: .125rem;
    padding: .575em;
}
.yui-navset .yui-content {
    grid-area: content;
    align-self: stretch;
    border: none;
    border-radius: calc(var(--radius) - var(--_gap) + 0.01rem);
    padding: 0.325rem 1.25rem;
    background-color: rgba(var(--light-red), 0.8);
    min-height: var(--radius);
}
/* -------------------- */

/* ---------- tables ---------- */
table.wiki-content-table :is(th,td) {
    border-color: rgb(var(--border-color-general));
}

table.wiki-content-table th {
    background-color: rgb(var(--light-pink));
    color: rgb(var(--text-color));
}

table.wiki-content-table td {
    background: rgb(var(--light-red));
}
/* -------------------- */

/* ---------- image block ---------- */
.scp-image-block {
    border: none;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
    background: rgba(var(--bg-color), 0.25);
}

.scp-image-block.block-left { margin-left: 0; }

.scp-image-block.block-right { margin-right: 0; }

.scp-image-block .scp-image-caption {
    background-color: rgb(var(--light-purple));
    border: unset;
    padding: 0;
    padding-top: 0.25rem;
    color: rgb(var(--text-color));
    font-weight: normal;
    font-size: .95em;
}
/* -------------------- */

/* ---------- TOC ---------- */
#toc {
    background-color: rgb(var(--lighter-pink));
    border: var(--border-big) rgb(var(--border-color-general));
}
/* -------------------- */

/* ---------- ACS ---------- */
div.anom-bar-container {
  --five-color: 150, 52, 103;
  --four-color: 113, 58, 142;
  --three-color: 81, 74, 143;
  --two-color: 68, 103, 140;
  --one-color: 70, 142, 126;
}

div.danger-diamond a {
    color: transparent!important;
}

div.anom-bar-container.clear-6 .top-center-box > div {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/blue_spaces.jpg");
    background-blend-mode: normal;
}
/* -------------------- */

/* ---------- code ---------- */
.code {
    font-weight: bold;
    background: rgb(var(--light-red));
    border: none;
}

pre {
    font-family: var(--UI-font);
    font-size: 1.15em;
}

.hl-code,
.hl-default,
.hl-brackets,
.hl-quotes,
.hl-string,
.hl-identifier {
    color: rgb(18, 18, 18);
}
.hl-special {
    color: rgb(60, 158, 155);
}
.hl-number {
    color: rgb(199, 158, 71);
}
.hl-reserved {
    color: rgb(50, 131, 214);
}
.hl-var, .hl-comment {
  color: rgb(255, 97, 136);
}
/* -------------------- */

    /*---------------------------------------------------*/
    /*------------------- BOTTOM HALF -------------------*/
    /*---------------------------------------------------*/

/* ---------- license area ---------- */
#footer,
#license-area {
    position: relative;
    z-index: 2;
    background-color: rgb(var(--light-purple));
    color: rgb(var(--text-color));
}

#footer a, #license-area a {
    color: rgb(var(--dark-purple));
}

#footer {
    padding-top: 1rem;
}

#license-area {
    padding-top: 0;
}

.hovertip {
    color: rgb(var(--text-color));
    font-family: var(--UI-font);
}
/* -------------------- */

/* ---------- buttons ---------- */
div.buttons input, input.button, button, a.button, .owindow .button-bar .btn {
    margin: 0.125rem;
    padding: 0.25rem 0.675rem;
    text-decoration: none;
    background-color: rgb(var(--dark-purple));
    border: var(--button-border) rgb(var(--light-purple));
    font-weight: bold;
    color: rgb(var(--white));
}

:is(div.buttons input, input.button, button, a.button, .owindow .button-bar a):is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--white));
    background-color: rgb(var(--border-color-general));
    border: var(--button-border) rgb(var(--light-purple));
    font-weight: bold;
}

a.action-area-close:is(:hover, :active, :focus, :focus-within) {
    background-color: transparent;
}
/* -------------------- */

/* ---------- really misc misc stuff ---------- */

textarea, input.text {
    font-family: var(--UI-font);
    font-size: 1.198em;
    background-color: rgb(247, 225, 225);
}

:is(textarea, input.text)::selection {
  background-color: rgb(var(--og-selection-color));
  color: rgb(var(--white));
}

#lock-info {
    border-color: rgb(var(--border-color-general));
    background-color: rgb(var(--light-pink));
    color: rgb(var(--text-color));
}

.page-source {
    font-family: var(--UI-font);
    font-size: 1.18em;
    background-color: rgb(var(--light-red));
    border: var(--border-big) rgb(var(--border-color-general));
}

.page-tags > span {
  border-top: none;
}

#edit-page-title {
    width: 100%;
}

.keycap {
    color: rgb(var(--dark-purple));
}

table.form td div.sub, form div.sub {
    color: rgb(var(--text-color));
}
/* -------------------- */

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

    /*---------------------------------------------------*/
    /*---------------------- PHONE ----------------------*/
    /*---------------------------------------------------*/
@media only screen and (max-width: 1175px) {
#container::before {
    background-position: right center, center;
}

:root:root {
  --cloud-background-gradient-transition: calc(50vh - 17vw);
}
}

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

:root {
    --sp_header-logo-size: 15rem;
}

:root:root {
  --cloud-background-gradient-transition: calc(50vh - 120px);
}

#login-status {
    padding-left: 3em;
}

#header h1 {
    padding-left: 0.8rem;
}    

#header h1 a::before {
    font-size: 9rem;
}

#header h1 a {
    margin-bottom: 4rem;
}

#header::before {
    grid-column: 2/3;
}

#top-bar div[class*="top-bar"] > ul > li {
    position: static;
}

#container {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/cloudy_dawn_sky_new.png'), linear-gradient(0deg, rgba(var(--lowest-sky),1) calc(75vh - 5vw), rgba(var(--bg-color),1) calc(55vh - 15vw));
    background-size: auto calc(var(--sp_header-height) + var(--sp_top-bar-height)), auto;
    background-position: right 15%, center;
}

#container::before {
    background-size: auto calc(var(--sp_header-height) + var(--sp_top-bar-height)), auto;
}

#content-wrap {
  position: relative;
  margin: 0 auto 0;

:root:root {
  --cloud-background-gradient-transition: calc(50vh - 120px);
}

#main-content {
    padding: 2.5rem 0.5rem 0 0.5rem;
}

.owindow:has(#user-abuse-report-button-hovertip) {
    margin: 3rem auto;
}

/* -------- tabs on phone -------- */
div.yui-navset {
    grid-template-areas:
        "tab"
        "content";
    grid-template-columns: minmax(0,1fr);
}
.yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
    position: static;
}

.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
  flex-grow: 1;
}
}