@import url('https://fonts.googleapis.com/css2?family=Cutive&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');

:root {
    /* ===S-CSS-P INTEGRATION=== */
    --theme-base: "black-highlighter";
    --theme-id: "eventyr-theme";
    --theme-name: "Eventyr Theme";

    /* ===HEADER ELEMENTS=== */
   --logo-image: var(--eventyr-base);
    --header-title: "Eventyr";
    --header-subtitle: "The cycle continues, set to a new tune";

    /* === Header Logo Options === */
    --eventyr-base: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo);
    --eventyr-aro: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Aro);
    --eventyr-ace: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Ace);
    --eventyr-bi: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Bi);
    --eventyr-gay: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Gay);
    --eventyr-lesbian: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Lesbian);
    --eventyr-nonbinary: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20NB);
    --eventyr-pan: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Pan);
    --eventyr-trans: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Trans);
    --eventyr-agender: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Agender);
    --eventyr-demisexual: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Demi);
    --eventyr-genderfluid: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Genderfluid);
    --eventyr-genderqueer: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Genderqueer);
    --eventyr-intersex: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Intersex);
    --eventyr-lgbtq: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20LGBTQ);
    --eventyr-polyamorous: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Polyamorous);
    --eventyr-polysexual: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20SCP%20Logo%20Polysexual);

    /* ===Fonts=== */
    --UI-font: Cutive, serif;
    --header-font: Lavishly Yours, serif;
    --title-font: Cutive, serif;
    --mono-font: Recursive, monospace;

    /* ===LIGHT BROWNS=== */
    --off-white: 253, 252, 251;
    --yet-unwritten: 227, 219, 174;
    --wooden-floor: 202, 182, 153;
    --writing-pages: 190, 163, 99;
    --book-binding: 237, 230, 220;
    --writing-desk: 161, 145, 122;

    /* ===DARKS=== */
    --writing-ink: 96, 66, 48;
    --the-void: 12, 12, 12;

    /* ===GREENS=== */
    --study-wall: 42, 55, 37;
    --curtains: 201, 214, 195;

    /* ===ACCENTS=== */
    --hca-purple: 93, 15, 135;
    --bronze-ornament: 179, 122, 18;

    /* ===THEME ASSIGNMENTS=== */
    /* white */
    --white-monochrome: var(--off-white);
    /* v light gray for blockquotes and stuff */
    --pale-gray-monochrome: var(--book-binding);
    /* very light pale gray for misc. use */
    --light-pale-gray-monochrome: 244, 244, 244;
    /* very light accent gray for misc. use */
    --very-light-gray-monochrome: 215, 215, 215;
    /* light accent gray for login status */
    --light-gray-monochrome: var(--study-wall);
    /* gray */
    --gray-monochrome: var(--study-wall);
    /* dark accent gray for sidebar background */
    --dark-gray-monochrome: var(--curtains);
    /* black */
    --black-monochrome: var(--the-void);

    /* subdued theme color */
    --pale-accent: var(--writing-desk);
    /* vivid theme color the "default" accent color */
    --bright-accent: var(--writing-pages);
    /* theme color */
    --medium-accent: var(--wooden-floor);
    /* darker theme color */
    --dark-accent: var(--writing-ink);
    /* alternate accent color for newpage links */
    --alt-accent: var(--bronze-ornament);

    /* ===GENERAL COLORS=== */
    --swatch-border-color: var(--writing-ink);

    /* ===MENU COLORS=== */
    /* ===MENU BACKGROUND COLORS=== */
    --swatch-menubg-dark-color: var(--light-gray-monochrome);
    --swatch-menubg-black-color: var(--light-gray-monochrome);

    /* ===HEADER TITLE FONT SIZES=== */
    --header-h1-font-size: calc(var(--base-font-size) * (120 / 45));
    --header-h2-font-size: var(--base-font-size);

    /* ===OVERALL PAGE BACKGROUND COLOUR=== */
    --swatch-background: var(--white-monochrome);

    /* ===BACKGROUND GRADIENT=== */
    /* Subtle gradient that begins just below the top-bar and header */
    --background-gradient-color: var(--yet-unwritten);
    --background-gradient-distance: 40rem;

    /* ===LINK COLOURS=== */
        --link-color: var(--alt-accent);
        --visited-link-color: var(--hca-purple);
        --hover-link-color: var(--hca-purple);
        --newpage-color: 221, 102, 17;

        --header-background-image-size: 100% var(--header-height-on-desktop);
        --header-height-on-desktop: 12.25rem;
        --header-height-on-mobile: 12.25rem;
        --topbar-height-on-mobile: 2.5rem;
}

:root:lang(cn) {
    --theme-id: "eventyr-theme";
    --theme-name: "Eventyr 版式";
    --header-title: "Eventyr";
    --header-subtitle: "循环不止，新调已成";
    --UI-font: Cutive, Noto Serif SC, serif;
    --header-font: Lavishly Yours, Long Cang, serif;
    --title-font: Cutive, Noto Serif SC, serif;
}

#header {
    /* ===HEADER ELEMENTS=== */
    /* ===HEADER TITLES=== */
    /* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--dark-accent);
    --swatch-headerh2-color: var(--dark-accent);
    background-position: center top;
    background-size:180px;

    /* ===LOGIN BOX ELEMENT=== */
    --login-line-divider-color: var(--study-wall);
    --login-username-color: var(--study-wall);
    --login-myaccount-color: var(--study-wall);
    --login-myaccount-hover-color: var(--login-myaccount-color);
    --login-arrow-color: var(--study-wall);

    /* Dropdown Box when arrow is clicked */
    --login-dropdown-bg-color: var(--study-wall);
    --login-dropdown-bg-image: var(--study-wall);

    /* ===SEARCH ELEMENT=== */
    --search-icon-color: var(--study-wall);
}

#header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before {
    filter:drop-shadow(0px 0px 1px white);
}

#side-bar,
#interwiki {
    /* ===SIDE-BAR ELEMENTS=== */

    /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--study-wall);
    --sidebar-resources-bg-color: var(--curtains), 0.25;
    --sidebar-media-bg-color: var(--curtains), 0.125;

    --social-icon-hover-color: var(--swatch-primary);

    /* ===SIDEBLOCK MENU=== */
    --sideblock-bg-color: 0, 0, 0, 0; /* Transparent */
    --sideblock-heading-border-color: var(--swatch-primary);
    --sideblock-heading-bg-color: 0, 0, 0, 0; /* Transparent */
    --sideblock-heading-text-color: var(--alt-accent);

    /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--yet-unwritten), 0.08;
    --sidebar-subtext-color: var(--yet-unwritten);

    --sidebar-links-text: var(--curtains);
    --sidebar-links-bg-color: 0, 0, 0, 0; /* Transparent */
    --sidebar-links-hover-bg-color: var(--swatch-primary);
    --sidebar-links-hover-text-color: var(--swatch-text-secondary-color);

    /* ===SIDEBAR COLLAPSIBLES=== */
    /* Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-fld-link-color: var(--sideblock-heading-text-color);
    --sidebar-collapsible-fld-link-hover-bg: var(--swatch-primary-darker);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-secondary-color);
    --sidebar-collapsible-fld-arrow-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-secondary-color);

    /* Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--sidebar-collapsible-fld-link-bg);
    --sidebar-collapsible-ufld-link-color: var(--sideblock-heading-text-color);
    --sidebar-collapsible-ufld-link-hover-bg: var(--swatch-primary);
    --sidebar-collapsible-ufld-link-hover-color: var(--sidebar-collapsible-fld-link-hover-color);
    --sidebar-collapsible-ufld-arrow-color: var(--sidebar-collapsible-fld-arrow-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-fld-arrow-hover-color);

    /* Unfolded Body Colors */
    --sidebar-collapsible-body-bg: var(--swatch-primary), 0.125;
    --sidebar-collapsible-link-color: var(--sidebar-links-text);
    --sidebar-collapsible-link-hover-bg: var(--sidebar-links-hover-bg-color);
    --sidebar-collapsible-link-hover-color: var(--sidebar-links-hover-text-color);
}

#main-content {
    /* ===TABLES=== */
    --tables-header-bg: var(--writing-pages);
}

/* Center Header */
#header h1, #header h2 {
   width: 100%;
}

#header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before {
   display: block;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

#skrollr-body {
  background-image: none;
}

:root {
  --header-h1-font-size: 4rem;
  --gradient-header: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20top%20banner);
  --header-background-image-size: auto var(--header-height-on-desktop);
  background-position-x: center;
}

body {
  background-position-x: center;
}
#footer {
    position: relative;
    background-color: transparent;
    color: rgb(var(--dark-accent));
    margin-top: 100px !important;
    overflow: unset;
    isolation: isolate;
   --footer-link-color: var(--writing-ink);
   --footer-link-hover-color: var(--writing-ink);
}

#footer .options a {
    color: rgb(var(--dark-accent));
    width: auto;
    background-repeat: repeat-x;
    background-size: inherit;
}

#footer::before {
  position: absolute;
  z-index: auto;

  min-height: 100px;
  content: "Vort Jordliv her er Evighedens Frø";
  color: var(--writing-ink);
  font-size: 3rem;
  text-align: center;
  font-family: Lavishly Yours;
  line-height: calc(1rem + 13.25vw); /* Same as the height */
    bottom: 0; left: 0;
    height: calc(1rem + 13.25vw); width: 100%;
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr%20Footer%20Banner');
    background-size: cover;
    background-position: center top;
    pointer-events: none;
}

@media only screen and (max-width: 56.25rem) {
  :root {
    --gradient-header: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Mobile%20banner);
  }
   #footer::before {
      font-size: 1.5rem;
  content: "Evighedens Frø";
   }
#footer {
    margin-top: 40px !important;}
}

/* VOTING BOX MARGIN CORRECTION */
.number{
margin-top: 3px;
}

/* CUSTOM DIVS */

.storybook-hca {
     font-family: Philosopher, cursive;
     background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/5%20-%20Paper%20effect.png);
     padding: 15px;
     font-size: 105%;
     border: 2px solid #5d0f87;
}

.eventypewriter{
     font-family: Cutive, Noto Serif SC, serif;
     background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/5%20-%20Paper%20effect.png);
     padding: 15px;
     font-size: 90%;
     border: 2px solid #5d0f87;
}

.eventypewriter-left{
     font-family: Cutive, Noto Serif SC, serif;
     background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/5%20-%20Paper%20effect.png);
     padding: 15px;
     font-size: 80%;
     float: left;  
     width: 40%;
     border: 2px solid #5d0f87;
     margin: 20px;
}

.eventypewriter-right{
     font-family: Cutive, Noto Serif SC, serif;
     background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/5%20-%20Paper%20effect.png);
     padding: 15px;
     font-size: 80%;
     float: right;  
     width: 40%;
     border: 2px solid #5d0f87;
     margin: 20px;
}

.eventyr-title{
     font-family: var(--header-font), cursive;
     padding: 5px;
     font-size: 300%;
     text-align: center;
     color: var(--writing-ink);
}

.eventyr-butterfly-div{
    min-height: 200px;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Butterfly%20divider);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eventyr-hr{
    min-height: 6em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr-hr);
    background-size: cover;
@media only screen and (max-width: 600px) {
    background-size: contain;
}
    background-repeat: no-repeat;
    background-position: center;
}

.eventyr-hr-short{
    min-height: 6em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Eventyr-hr-short);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.evenflowery{
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Flowerytop), url(https://scp-wiki.wdfiles.com/local--files/theme:eventyr/Flowerybottom);
    background-repeat: no-repeat;
    background-size: 24%;
    background-position: top left, 102% 110%;
    padding: 1em 1em 1em 2em;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 中分评分模块适配 */
div.page-rate-widget-box .rate-points {
    border: none;
}

@supports (display:grid) {
    .creditButtonStandalone {
        display: inline-flex;
        margin: 0 0 .75rem;
        padding: 0;
        overflow: hidden;
        border: .0625rem solid rgba(var(--swatch-border-color), .15);
        border-bottom-width: 0;
        border-radius: 0;
        background-color: rgb(var(--rating-module-bg-color));
        box-shadow: 0 .125rem 0 0 rgb(var(--rating-module-bottom-border-color));
    }
    .creditButtonStandalone p a {
        display: flex;
        margin-left: 0;
        border-left: none;
        border-radius: unset;
        background: unset;
        box-shadow: unset;
    }
    .creditButtonStandalone p a:before {
        --mask-image: var(--credit-button-mask);
        -webkit-mask-image: var(--mask-image);
        -webkit-mask-size: calc(var(--rating-module-height) - .375em);
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width: calc((var(--base-font-size) * (14 / 15)) * 1.5);
        height: 100%;
        background-color: rgb(var(--rating-module-text-color));
        content: " ";
        mask-image: var(--mask-image);
        mask-position: center center;
        mask-repeat: no-repeat;
        mask-size: calc(var(--rating-module-height) - .375em);
        pointer-events: none;
        transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
    }
    .creditButtonStandalone p a:after {
        --clip-path: polygon(0 100%, 100% 115%, 100% 100%, 0 115%);
        -webkit-clip-path: var(--clip-path);
        z-index: 0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(var(--rating-module-text-color), 1);
        content: " ";
        clip-path: var(--clip-path);
        pointer-events: none;
        transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
        transition: clip-path .2s cubic-bezier(.4, 0, .2, 1);
        transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
    }
}