Sailorenoch's Super Cute Author Page

Link to article: Sailorenoch's Super Cute Author Page.

Module Styles

• 
  
  
  @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');
  @import url('https://fonts.google.com/specimen/Oranienbaum?categoryFilters=Serif:%2FSerif%2FModern');
  
  .Pitle{
       font-family:Oranienbaum;
       font-size: 250%;
       text-align: center;
       box-sizing: border-box; 
  }
  
  
  :root {
      --darkpink: #d7b9ca;
      --palepink: #f0dbde;
      --purplegrey: #a69ba8;
      --darkgrey: #463b48;
  
      --dela: "Dela Gothic One";
      --gild: "Gilda Display";
      --libr: "Libre Caslon Text";
      --heart: path("M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z");
      --ribbon: polygon(25% 4%, 22% 10%, 18% 21%, 26% 25%, 31% 25%, 23% 30%, 19% 36%, 19% 39%, 25% 43%, 30% 46%, 26% 60%, 24% 68%, 25% 75%, 31% 76%, 43% 87%, 40% 78%, 39% 69%, 44% 74%, 41% 60%, 42% 44%, 46% 34%, 50% 29%, 54% 35%, 58% 45%, 59% 51%, 58% 67%, 56% 75%, 61% 70%, 60% 79%, 58% 88%, 70% 78%, 76% 77%, 77% 69%, 75% 60%, 70% 46%, 82% 40%, 82% 37%, 78% 30%, 68% 25%, 74% 25%, 82% 21%, 79% 11%, 74% 3%, 63% 8%, 52% 19%, 49% 18%, 47% 19%, 37% 9%);
  
      --header-title: "ゲイベイビーのテーマ";
      --header-subtitle: "あなたについて話しているの";
      --sp_header-logo: none;
      --sp_header-title-size: 2rem;
      --sp_header-subtitle-size: 1.8rem;
  
      --sp_header-height: 16rem;
      --sp_top-bar-height: 1.6rem;
  
      --sp_top-bar-gradient-top-color: var(--darkgrey);
      --sp_top-bar-gradient-bottom-color: var(--darkgrey);
  
      --sp_top-bar-link-color: var(--palepink);
      --sp_top-bar-link-hover-color: var(--darkpink);
      --sp_top-bar-link-hover-background: var(--darkgrey);
  
      --sp_dropdown-link-color: var(--palepink);
      --sp_dropdown-link-hover-color: var(--darkgrey);
      --sp_dropdown-link-background: var(--darkgrey);
      --sp_dropdown-link-hover-background: var(--palepink);
      --sp_dropdown-link-border: none;
  
      --sp_rate-module-background: var(--darkgrey);
      --sp_rate-module-text-color: var(--palepink);
      --sp_rate-module-button-color: var(--palepink);
      --sp_rate-module-button-background: var(--darkgrey);
      --sp_rate-module-sub-color: var(--palepink);
      --sp_rate-module-button-hover-color: var(--darkgrey);
      --sp_rate-module-button-hover-background: var(--palepink);
  
      --sp_tab-selected-text-color: var(--darkgrey);
      --sp_tab-selected-background: var(--darkpink);
      --sp_tab-selected-border-color: var(--darkgrey);
  
      --sp_tab-text-color: var(--darkpink);
      --sp_tab-background: var(--darkgrey);
      --sp_tab-border-color: var(--darkgrey);
  
      --sp_tab-hover-text-color: var(--sp_tab-selected-text-color);
      --sp_tab-hover-background: var(--sp_tab-selected-background);
      --sp_tab-hover-border-color: var(--sp_tab-selected-border-color);
  }
  
  a, a:visited, #interwiki a, #side-bar a {
      background-color: var(--darkgrey);
      color: var(--darkpink);
      transition: 200ms;
  }
  a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover {
      background-color: var(--darkpink);
      color: var(--darkgrey);
      text-decoration: none;
  }
  h1, h2, h3, h4, h5 {
      color: var(--darkgrey);
  }
  
  body, html {
      color: black;
  }
  
  #login-status {
      padding-block-start: 0;
      margin-top: 3px;
      margin-right: 10px;
      transition: 200ms;
  }
  #login-status .printuser {
      color: var(--palepink);
  }
  #login-status a:hover {
      background: var(--darkpink);
      color: var(--darkgrey);
      text-decoration: none;
  }
  
  .printuser img, .owindow img {
      filter: saturate(0.5);
  }
  
  .owindow {
      background-color: var(--darkgrey);
      border: 0.6rem solid var(--purplegrey);
      color: var(--darkpink);
  }
  .owindow h1 {
      color: var(--darkpink);
  }
  .owindow .title {
      position: relative;
      background-color: var(--purplegrey);
      color: var(--darkgrey);
      text-align: center;
  }
  .owindow .title::before {
      position: absolute;
      content: "";
      background-color: var(--palepink);
      height: 24px;
      width: 24px;
      top: 38%;
      right: 1%;
      clip-path: var(--heart);
      transform: translate(50%, -50%) rotate(16deg) scale(4);
  }
  .owindow img {
      background-color: transparent !important;
      padding: 0 !important;
      border: none;
      margin-right: 1em;
  }
  .owindow td img {
      display: none;
  }
  
  #account-options {
      background-color: var(--darkgrey);
      border: none;
      text-align: center;
  }
  #account-options li {
      position: relative;
  }
  #login-status li:last-child::before {
      position: absolute;
      content: "";
      background-color: #c0818c;
      height: 24px;
      width: 24px;
      top: 100%;
      right: 99%;
      clip-path: var(--heart);
      transform: translate(50%, -50%) rotate(-5deg) scale(2);
  }
  #login-status ul a {
      transition: 200ms;
      color: var(--palepink);
  }
  #login-status ul a:hover {
      color: var(--darkgrey);
      background-color: var(--palepink);
  }
  
  #search-top-box {
      align-items: flex-end;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      padding: 8px 12px 0 0;
      margin-right: -2px;
      z-index: 1;
  }
  #search-top-box-form input[type=submit] {
      background-color: var(--darkgrey);
      background-image: none;
      color: var(--palepink);
      box-shadow: none;
      border: none;
      border-radius: 0;
      transition: 200ms;
  }
  #search-top-box-form input[type=submit]:hover {
      background-color: var(--palepink);
      background-image: none;
      border: none;
      color: var(--darkgrey);
      box-shadow: none;
  }
  
  #header {
  grid-template-areas:
      ". . login login login"
      ". . . . search"
      "h1 h1 h1 h1 h1"
      "h2 h2 h2 h2 h2"
      ". . . . ."
      "top-bar top-bar top-bar top-bar top-bar";
      grid-template-columns: repeat(5, 1fr);
      background-image: linear-gradient(var(--darkgrey) 1.6em, #dfb8ba 1.6em);
      background-color: transparent;
      padding-bottom: 0px;
      position: relative;
      box-shadow: 0 14rem #be8f9a;
  }
  #header h1, #header h2 {
      padding-inline-start: 0;
      text-align: center;
  }
  #header h1 a::before, #header h2 span::before {
      text-shadow: none;
      letter-spacing: 0;
      color: var(--darkgrey);
  }
  #header-extra-div-1, #header-extra-div-2 {
      position: absolute;
      background-size: 95px 100px;
      background-position: center;
      background-repeat: repeat-x;
      height: 100px;
      width: inherit;
      z-index: 0;
  }
  #header-extra-div-1 {
      background-image:
       radial-gradient(circle at 10px 95px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 13px 86px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 18px 78px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 24px 71px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 32px 66px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 40px 62px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 49px 61px, var(--darkpink) 3px, transparent 3px),
       radial-gradient(circle at 90px 95px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 87px 86px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 82px 78px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 76px 71px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 68px 66px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 60px 62px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 51px 61px, var(--darkpink) 3px, transparent 3px),
  
       radial-gradient(circle at 10px 95px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 13px 86px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 18px 78px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 24px 71px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 32px 66px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 40px 62px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 49px 61px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 90px 95px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 87px 86px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 82px 78px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 76px 71px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 68px 66px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 60px 62px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 51px 61px, var(--darkgrey) 5px, transparent 5px),
      
       radial-gradient(circle at 50px 100px, var(--darkgrey) 25px, transparent 10px),
       radial-gradient(circle at 50px 100px, var(--darkpink) 30px, transparent 10px),
       radial-gradient(circle at 50px 100px, var(--darkgrey) 40px, transparent 10px);
      bottom: 1.6em;
  }
  #header-extra-div-2 {
      background-image:
       radial-gradient(circle at 10px 5px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 13px 14px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 18px 22px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 24px 29px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 32px 34px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 40px 38px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 49px 39px, var(--darkpink) 3px, transparent 3px),
       radial-gradient(circle at 90px 5px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 87px 14px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 82px 22px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 76px 29px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 68px 34px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 60px 38px, var(--darkpink) 2px, transparent 2px),
       radial-gradient(circle at 51px 39px, var(--darkpink) 3px, transparent 3px),
  
       radial-gradient(circle at 10px 5px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 13px 14px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 18px 22px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 24px 29px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 32px 34px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 40px 38px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 49px 39px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 90px 5px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 87px 14px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 82px 22px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 76px 29px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 68px 34px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 60px 38px, var(--darkgrey) 5px, transparent 5px),
       radial-gradient(circle at 51px 39px, var(--darkgrey) 5px, transparent 5px),
      
       radial-gradient(circle at 50px 0, var(--darkgrey) 25px, transparent 10px),
       radial-gradient(circle at 50px 0, var(--darkpink) 30px, transparent 10px),
       radial-gradient(circle at 50px 0, var(--darkgrey) 40px, transparent 10px);
      top: 1.6em;
  }
  #extrac-div-1, #extrac-div-2 {
      position: absolute;
      content: "";
      height: 200px;
      width: 200px;
      background-color: black;
      transform: translate(-50%, -50%);
      clip-path: var(--ribbon);
  }
  #extrac-div-1 {
      top: 26rem;
      left: 3%;
  }
  #extrac-div-2 {
      top: 26rem;
      left: 97.5%;
  }
  
  #top-bar {
      max-width: 100%;
      font-family: var(--gild);
      font-weight: bold;
  }
  #top-bar ul li {
      flex-grow: 1;
  }
  #top-bar ul li a {
      transition: 200ms;
  }
  #top-bar ul li ul {
      border-width: 0 0;
  }
  #top-bar ul li ul li {
      position: relative;
  }
  #top-bar ul li ul li:last-child::before {
      position: absolute;
      content: "";
      background-color: #ffe1e6;
      height: 24px;
      width: 24px;
      top: 95%;
      right: 5%;
      clip-path: var(--heart);
      transform: translate(50%, -50%) rotate(6deg) scale(2.5);
  }
  #top-bar .open-menu a {
      color: var(--darkgrey);
      line-height: 0.7em;
      background-color: transparent;
      border-image: radial-gradient(white 69%, transparent 70%) 84.5% / 50%;
      clip-path: polygon(-41% 0, 50% 91%, 141% 0);
      transform: rotate(-13deg);
      transition: 200ms;
  }
  #top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
      box-shadow: none;
  }
  #top-bar .open-menu a:hover {
      color: black;
  }
  
  #side-bar, #side-bar:is(:hover,:active,:focus-within) {
      background-color: rgba(0, 0, 0, 0.5);
      scrollbar-color: var(--darkpink) var(--darkgrey);
  }
  #side-bar .side-block.media a {
      background-color: transparent;
  }
  #side-bar .heading, #interwiki .heading {
      margin: 0.6rem 0 0.5rem;
      padding: 0 0 5px 0;
      color: var(--palepink);
      height: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: solid 3px var(--purplegrey);
  }
  #side-bar .menu-item {
      display: flex;
  }
  #side-bar .menu-item a {
      flex-grow: 1;
      text-align: center;
  }
  #side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
      background-color: var(--darkgrey);
      border-radius: 0;
      box-shadow: none;
      border: solid 3px var(--purplegrey);
      color: var(--purplegrey);
  }
  
  #container-wrap-wrap {
      overflow-x: hidden;
  }
  
  #container {
      background-color: #be8f9a;
      background-image:
       repeating-linear-gradient(23deg, transparent, transparent 40px, black 40px, black 50px),
       repeating-linear-gradient(-23deg, transparent, transparent 40px, black 40px, black 50px),
       repeating-linear-gradient(23deg, transparent, transparent 40px, black 40px, black 50px),
       repeating-linear-gradient(-23deg, transparent, transparent 40px, black 40px, black 50px);
      background-position: -1% 0, -1% 0, 101% 0, 101% 0;
      background-repeat: repeat-y;
      background-size: 70px;
  }
  
  ::-webkit-scrollbar {
      width: 13px;
  }
  
  ::-webkit-scrollbar-thumb {
      background-color: var(--darkpink);
      background-image: var(--scrollbar);
      background-size: contain;
      background-position: center center;
      border-top: solid 1px var(--palepink);
      border-bottom: solid 1px var(--palepink);
  }
  
  ::-webkit-scrollbar-track {
      background: var(--darkgrey);
      border-left: solid 3px var(--darkpink);
  }
  
  #page-title, .meta-title {
      font-size: clamp(1.125rem, 0.679rem + 1.19vw, 1.75rem);
      font-weight: bold;
      color: #dfb8ba;
      border-color: transparent;
      font-family: var(--libr);
  }
  #page-title, .meta-title {
      --s: 1.8em;
      --d: .8em;
      --c: .8em;
  
      padding: 0 calc(var(--s) + .5em) var(--d);
      line-height: 1.8;
      background:
       conic-gradient(at left  var(--s) bottom var(--d),
       #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
       conic-gradient(at right var(--s) bottom var(--d),
       #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
      clip-path:
       polygon(0 var(--d), var(--s) var(--d),
       var(--s) 0,calc(100% - var(--s)) 0,
       calc(100% - var(--s)) var(--d),
       100% var(--d),
       calc(100% - var(--c)) calc(50% + var(--d)/2),
       100% 100%,
       calc(100% - var(--s) - var(--d)) 100%,
       calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),
       calc(var(--s) + var(--d)) calc(100% - var(--d)),
       calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
      background-color: #514653;
      width: inherit;
      text-align: center;
  }
  
  .page-rate-widget-box {
      border-radius: 0;
      text-transform: capitalize;
      box-shadow: none;
      position: relative;
  }
  div.page-rate-widget-box {
      padding-left: 12px;
  }
  .page-rate-widget-box .cancel {
      padding-right: 6px;
  }
  .page-rate-widget-box::before {
      position: absolute;
      content: "";
      background-color: var(--palepink);
      height: 24px;
      width: 24px;
      top: 50%;
      right: 100%;
      clip-path: var(--heart);
      transform: translate(50%, -50%) rotate(-16deg) scale(1.5);
  }
  .page-rate-widget-box::after {
      position: absolute;
      content: "";
      background-color: var(--darkpink);
      height: 24px;
      width: 24px;
      top: 75%;
      right: -5%;
      clip-path: var(--heart);
      transform: translate(50%, -50%) rotate(24deg) scale(1.3);
  }
  
  table.wiki-content-table td {
      border: 1px solid var(--darkgrey);
      background-image: linear-gradient(-11deg, transparent, var(--palepink));
      text-align: center;
  }
  table.wiki-content-table {
      position: relative;
  }
  table.wiki-content-table::before {
      position: absolute;
      content: "";
      background-color: var(--darkgrey);
      height: 24px;
      width: 24px;
      top: 100%;
      right: 0%;
      clip-path: var(--heart);
      transform: translate(50%, -50%) rotate(10deg) scale(1.4);
  }
  
  .blockquote, div.blockquote {
      border: 1px solid var(--darkgrey);
      background-color: transparent;
      background-image: linear-gradient(-11deg, transparent, var(--darkpink));
      padding: 0 2em;
      position: relative;
  }
  .blockquote::before, div.blockquote::before, .blockquote::after, div.blockquote::after {
      position: absolute;
      content: "";
      background-color: black;
      height: 75px;
      width: 75px;
      top: 40%;
      right: 0%;
      clip-path: var(--ribbon);
      transform: translate(50%, -50%);
  }
  .blockquote::before, div.blockquote::before {
      right: 0%;
  }
  .blockquote::after, div.blockquote::after {
      right: 100%;
  }
  
  .yui-navset .yui-nav {
      border-width: 0;
  }
  .yui-navset .yui-content {
      background-image: linear-gradient(-11deg, transparent, var(--palepink));
      border: 1px solid var(--darkgrey);
  }
  
  
  @media (max-width: 767px) {
  #main-content {
      padding: 0 50px;
      }
  #container {
      background-position: -5% 0, -5% 0, 105% 0, 105% 0;
      }
  }
  

Inline Styles

• (none)

Includes

• :scp-wiki:component:sigma-plus [info]
• :scp-wiki:component:toggle-sidebar [info]
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• Pitle

Page Source

[[include :scp-wiki:component:sigma-plus]]
[[include :scp-wiki:component:toggle-sidebar]]

[[module css]]



@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.google.com/specimen/Oranienbaum?categoryFilters=Serif:%2FSerif%2FModern');

.Pitle{
     font-family:Oranienbaum;
     font-size: 250%;
     text-align: center;
     box-sizing: border-box; 
}


:root {
    --darkpink: #d7b9ca;
    --palepink: #f0dbde;
    --purplegrey: #a69ba8;
    --darkgrey: #463b48;

    --dela: "Dela Gothic One";
    --gild: "Gilda Display";
    --libr: "Libre Caslon Text";
    --heart: path("M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z");
    --ribbon: polygon(25% 4%, 22% 10%, 18% 21%, 26% 25%, 31% 25%, 23% 30%, 19% 36%, 19% 39%, 25% 43%, 30% 46%, 26% 60%, 24% 68%, 25% 75%, 31% 76%, 43% 87%, 40% 78%, 39% 69%, 44% 74%, 41% 60%, 42% 44%, 46% 34%, 50% 29%, 54% 35%, 58% 45%, 59% 51%, 58% 67%, 56% 75%, 61% 70%, 60% 79%, 58% 88%, 70% 78%, 76% 77%, 77% 69%, 75% 60%, 70% 46%, 82% 40%, 82% 37%, 78% 30%, 68% 25%, 74% 25%, 82% 21%, 79% 11%, 74% 3%, 63% 8%, 52% 19%, 49% 18%, 47% 19%, 37% 9%);

    --header-title: "ゲイベイビーのテーマ";
    --header-subtitle: "あなたについて話しているの";
    --sp_header-logo: none;
    --sp_header-title-size: 2rem;
    --sp_header-subtitle-size: 1.8rem;

    --sp_header-height: 16rem;
    --sp_top-bar-height: 1.6rem;

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

    --sp_top-bar-link-color: var(--palepink);
    --sp_top-bar-link-hover-color: var(--darkpink);
    --sp_top-bar-link-hover-background: var(--darkgrey);

    --sp_dropdown-link-color: var(--palepink);
    --sp_dropdown-link-hover-color: var(--darkgrey);
    --sp_dropdown-link-background: var(--darkgrey);
    --sp_dropdown-link-hover-background: var(--palepink);
    --sp_dropdown-link-border: none;

    --sp_rate-module-background: var(--darkgrey);
    --sp_rate-module-text-color: var(--palepink);
    --sp_rate-module-button-color: var(--palepink);
    --sp_rate-module-button-background: var(--darkgrey);
    --sp_rate-module-sub-color: var(--palepink);
    --sp_rate-module-button-hover-color: var(--darkgrey);
    --sp_rate-module-button-hover-background: var(--palepink);

    --sp_tab-selected-text-color: var(--darkgrey);
    --sp_tab-selected-background: var(--darkpink);
    --sp_tab-selected-border-color: var(--darkgrey);

    --sp_tab-text-color: var(--darkpink);
    --sp_tab-background: var(--darkgrey);
    --sp_tab-border-color: var(--darkgrey);

    --sp_tab-hover-text-color: var(--sp_tab-selected-text-color);
    --sp_tab-hover-background: var(--sp_tab-selected-background);
    --sp_tab-hover-border-color: var(--sp_tab-selected-border-color);
}

a, a:visited, #interwiki a, #side-bar a {
    background-color: var(--darkgrey);
    color: var(--darkpink);
    transition: 200ms;
}
a:hover, a:visited:hover, #interwiki a:hover, #side-bar a:hover {
    background-color: var(--darkpink);
    color: var(--darkgrey);
    text-decoration: none;
}
h1, h2, h3, h4, h5 {
    color: var(--darkgrey);
}

body, html {
    color: black;
}

#login-status {
    padding-block-start: 0;
    margin-top: 3px;
    margin-right: 10px;
    transition: 200ms;
}
#login-status .printuser {
    color: var(--palepink);
}
#login-status a:hover {
    background: var(--darkpink);
    color: var(--darkgrey);
    text-decoration: none;
}

.printuser img, .owindow img {
    filter: saturate(0.5);
}

.owindow {
    background-color: var(--darkgrey);
    border: 0.6rem solid var(--purplegrey);
    color: var(--darkpink);
}
.owindow h1 {
    color: var(--darkpink);
}
.owindow .title {
    position: relative;
    background-color: var(--purplegrey);
    color: var(--darkgrey);
    text-align: center;
}
.owindow .title::before {
    position: absolute;
    content: "";
    background-color: var(--palepink);
    height: 24px;
    width: 24px;
    top: 38%;
    right: 1%;
    clip-path: var(--heart);
    transform: translate(50%, -50%) rotate(16deg) scale(4);
}
.owindow img {
    background-color: transparent !important;
    padding: 0 !important;
    border: none;
    margin-right: 1em;
}
.owindow td img {
    display: none;
}

#account-options {
    background-color: var(--darkgrey);
    border: none;
    text-align: center;
}
#account-options li {
    position: relative;
}
#login-status li:last-child::before {
    position: absolute;
    content: "";
    background-color: #c0818c;
    height: 24px;
    width: 24px;
    top: 100%;
    right: 99%;
    clip-path: var(--heart);
    transform: translate(50%, -50%) rotate(-5deg) scale(2);
}
#login-status ul a {
    transition: 200ms;
    color: var(--palepink);
}
#login-status ul a:hover {
    color: var(--darkgrey);
    background-color: var(--palepink);
}

#search-top-box {
    align-items: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding: 8px 12px 0 0;
    margin-right: -2px;
    z-index: 1;
}
#search-top-box-form input[type=submit] {
    background-color: var(--darkgrey);
    background-image: none;
    color: var(--palepink);
    box-shadow: none;
    border: none;
    border-radius: 0;
    transition: 200ms;
}
#search-top-box-form input[type=submit]:hover {
    background-color: var(--palepink);
    background-image: none;
    border: none;
    color: var(--darkgrey);
    box-shadow: none;
}

#header {
grid-template-areas:
    ". . login login login"
    ". . . . search"
    "h1 h1 h1 h1 h1"
    "h2 h2 h2 h2 h2"
    ". . . . ."
    "top-bar top-bar top-bar top-bar top-bar";
    grid-template-columns: repeat(5, 1fr);
    background-image: linear-gradient(var(--darkgrey) 1.6em, #dfb8ba 1.6em);
    background-color: transparent;
    padding-bottom: 0px;
    position: relative;
    box-shadow: 0 14rem #be8f9a;
}
#header h1, #header h2 {
    padding-inline-start: 0;
    text-align: center;
}
#header h1 a::before, #header h2 span::before {
    text-shadow: none;
    letter-spacing: 0;
    color: var(--darkgrey);
}
#header-extra-div-1, #header-extra-div-2 {
    position: absolute;
    background-size: 95px 100px;
    background-position: center;
    background-repeat: repeat-x;
    height: 100px;
    width: inherit;
    z-index: 0;
}
#header-extra-div-1 {
    background-image:
     radial-gradient(circle at 10px 95px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 13px 86px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 18px 78px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 24px 71px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 32px 66px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 40px 62px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 49px 61px, var(--darkpink) 3px, transparent 3px),
     radial-gradient(circle at 90px 95px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 87px 86px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 82px 78px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 76px 71px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 68px 66px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 60px 62px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 51px 61px, var(--darkpink) 3px, transparent 3px),

     radial-gradient(circle at 10px 95px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 13px 86px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 18px 78px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 24px 71px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 32px 66px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 40px 62px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 49px 61px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 90px 95px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 87px 86px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 82px 78px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 76px 71px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 68px 66px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 60px 62px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 51px 61px, var(--darkgrey) 5px, transparent 5px),
    
     radial-gradient(circle at 50px 100px, var(--darkgrey) 25px, transparent 10px),
     radial-gradient(circle at 50px 100px, var(--darkpink) 30px, transparent 10px),
     radial-gradient(circle at 50px 100px, var(--darkgrey) 40px, transparent 10px);
    bottom: 1.6em;
}
#header-extra-div-2 {
    background-image:
     radial-gradient(circle at 10px 5px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 13px 14px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 18px 22px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 24px 29px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 32px 34px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 40px 38px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 49px 39px, var(--darkpink) 3px, transparent 3px),
     radial-gradient(circle at 90px 5px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 87px 14px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 82px 22px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 76px 29px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 68px 34px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 60px 38px, var(--darkpink) 2px, transparent 2px),
     radial-gradient(circle at 51px 39px, var(--darkpink) 3px, transparent 3px),

     radial-gradient(circle at 10px 5px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 13px 14px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 18px 22px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 24px 29px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 32px 34px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 40px 38px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 49px 39px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 90px 5px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 87px 14px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 82px 22px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 76px 29px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 68px 34px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 60px 38px, var(--darkgrey) 5px, transparent 5px),
     radial-gradient(circle at 51px 39px, var(--darkgrey) 5px, transparent 5px),
    
     radial-gradient(circle at 50px 0, var(--darkgrey) 25px, transparent 10px),
     radial-gradient(circle at 50px 0, var(--darkpink) 30px, transparent 10px),
     radial-gradient(circle at 50px 0, var(--darkgrey) 40px, transparent 10px);
    top: 1.6em;
}
#extrac-div-1, #extrac-div-2 {
    position: absolute;
    content: "";
    height: 200px;
    width: 200px;
    background-color: black;
    transform: translate(-50%, -50%);
    clip-path: var(--ribbon);
}
#extrac-div-1 {
    top: 26rem;
    left: 3%;
}
#extrac-div-2 {
    top: 26rem;
    left: 97.5%;
}

#top-bar {
    max-width: 100%;
    font-family: var(--gild);
    font-weight: bold;
}
#top-bar ul li {
    flex-grow: 1;
}
#top-bar ul li a {
    transition: 200ms;
}
#top-bar ul li ul {
    border-width: 0 0;
}
#top-bar ul li ul li {
    position: relative;
}
#top-bar ul li ul li:last-child::before {
    position: absolute;
    content: "";
    background-color: #ffe1e6;
    height: 24px;
    width: 24px;
    top: 95%;
    right: 5%;
    clip-path: var(--heart);
    transform: translate(50%, -50%) rotate(6deg) scale(2.5);
}
#top-bar .open-menu a {
    color: var(--darkgrey);
    line-height: 0.7em;
    background-color: transparent;
    border-image: radial-gradient(white 69%, transparent 70%) 84.5% / 50%;
    clip-path: polygon(-41% 0, 50% 91%, 141% 0);
    transform: rotate(-13deg);
    transition: 200ms;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    box-shadow: none;
}
#top-bar .open-menu a:hover {
    color: black;
}

#side-bar, #side-bar:is(:hover,:active,:focus-within) {
    background-color: rgba(0, 0, 0, 0.5);
    scrollbar-color: var(--darkpink) var(--darkgrey);
}
#side-bar .side-block.media a {
    background-color: transparent;
}
#side-bar .heading, #interwiki .heading {
    margin: 0.6rem 0 0.5rem;
    padding: 0 0 5px 0;
    color: var(--palepink);
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: solid 3px var(--purplegrey);
}
#side-bar .menu-item {
    display: flex;
}
#side-bar .menu-item a {
    flex-grow: 1;
    text-align: center;
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
    background-color: var(--darkgrey);
    border-radius: 0;
    box-shadow: none;
    border: solid 3px var(--purplegrey);
    color: var(--purplegrey);
}

#container-wrap-wrap {
    overflow-x: hidden;
}

#container {
    background-color: #be8f9a;
    background-image:
     repeating-linear-gradient(23deg, transparent, transparent 40px, black 40px, black 50px),
     repeating-linear-gradient(-23deg, transparent, transparent 40px, black 40px, black 50px),
     repeating-linear-gradient(23deg, transparent, transparent 40px, black 40px, black 50px),
     repeating-linear-gradient(-23deg, transparent, transparent 40px, black 40px, black 50px);
    background-position: -1% 0, -1% 0, 101% 0, 101% 0;
    background-repeat: repeat-y;
    background-size: 70px;
}

::-webkit-scrollbar {
    width: 13px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--darkpink);
    background-image: var(--scrollbar);
    background-size: contain;
    background-position: center center;
    border-top: solid 1px var(--palepink);
    border-bottom: solid 1px var(--palepink);
}

::-webkit-scrollbar-track {
    background: var(--darkgrey);
    border-left: solid 3px var(--darkpink);
}

#page-title, .meta-title {
    font-size: clamp(1.125rem, 0.679rem + 1.19vw, 1.75rem);
    font-weight: bold;
    color: #dfb8ba;
    border-color: transparent;
    font-family: var(--libr);
}
#page-title, .meta-title {
    --s: 1.8em;
    --d: .8em;
    --c: .8em;

    padding: 0 calc(var(--s) + .5em) var(--d);
    line-height: 1.8;
    background:
     conic-gradient(at left  var(--s) bottom var(--d),
     #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
     conic-gradient(at right var(--s) bottom var(--d),
     #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
    clip-path:
     polygon(0 var(--d), var(--s) var(--d),
     var(--s) 0,calc(100% - var(--s)) 0,
     calc(100% - var(--s)) var(--d),
     100% var(--d),
     calc(100% - var(--c)) calc(50% + var(--d)/2),
     100% 100%,
     calc(100% - var(--s) - var(--d)) 100%,
     calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),
     calc(var(--s) + var(--d)) calc(100% - var(--d)),
     calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
    background-color: #514653;
    width: inherit;
    text-align: center;
}

.page-rate-widget-box {
    border-radius: 0;
    text-transform: capitalize;
    box-shadow: none;
    position: relative;
}
div.page-rate-widget-box {
    padding-left: 12px;
}
.page-rate-widget-box .cancel {
    padding-right: 6px;
}
.page-rate-widget-box::before {
    position: absolute;
    content: "";
    background-color: var(--palepink);
    height: 24px;
    width: 24px;
    top: 50%;
    right: 100%;
    clip-path: var(--heart);
    transform: translate(50%, -50%) rotate(-16deg) scale(1.5);
}
.page-rate-widget-box::after {
    position: absolute;
    content: "";
    background-color: var(--darkpink);
    height: 24px;
    width: 24px;
    top: 75%;
    right: -5%;
    clip-path: var(--heart);
    transform: translate(50%, -50%) rotate(24deg) scale(1.3);
}

table.wiki-content-table td {
    border: 1px solid var(--darkgrey);
    background-image: linear-gradient(-11deg, transparent, var(--palepink));
    text-align: center;
}
table.wiki-content-table {
    position: relative;
}
table.wiki-content-table::before {
    position: absolute;
    content: "";
    background-color: var(--darkgrey);
    height: 24px;
    width: 24px;
    top: 100%;
    right: 0%;
    clip-path: var(--heart);
    transform: translate(50%, -50%) rotate(10deg) scale(1.4);
}

.blockquote, div.blockquote {
    border: 1px solid var(--darkgrey);
    background-color: transparent;
    background-image: linear-gradient(-11deg, transparent, var(--darkpink));
    padding: 0 2em;
    position: relative;
}
.blockquote::before, div.blockquote::before, .blockquote::after, div.blockquote::after {
    position: absolute;
    content: "";
    background-color: black;
    height: 75px;
    width: 75px;
    top: 40%;
    right: 0%;
    clip-path: var(--ribbon);
    transform: translate(50%, -50%);
}
.blockquote::before, div.blockquote::before {
    right: 0%;
}
.blockquote::after, div.blockquote::after {
    right: 100%;
}

.yui-navset .yui-nav {
    border-width: 0;
}
.yui-navset .yui-content {
    background-image: linear-gradient(-11deg, transparent, var(--palepink));
    border: 1px solid var(--darkgrey);
}


@media (max-width: 767px) {
#main-content {
    padding: 0 50px;
    }
#container {
    background-position: -5% 0, -5% 0, 105% 0, 105% 0;
    }
}

[[/module]]

[[=]]
[[module rate]]
[[/=]]


[[=image https://i.imgur.com/oblxjgV.png]]
[[div class="Pitle"]]
**Faust**
[[/div]]
[[=]]
Any pronouns besides it | transmasc | 23 | talk to me about yaoi, alternative fashion, or dolls 

Discord: emperorfaust
Twitter: @sailorenoch
[[[https://ko-fi.com/emperorfaust/ |Kofi: emperorfaust]]]
TikTok: @emperorfaust
Tumblr: nekofaust
[[/=]]

[[tabview]]
[[tab SCPs]]

[[image https://i.imgur.com/nuA1SEq.png]]
[[=]]

++ **[[[https://scp-wiki.wikidot.com/scp-8166 |SCP-8166 | Eastward of Eden]]]**

[[*user AstersQuill]], [[*user FlyPurgatorio]], [[*user sailorenoch]]
Where it all started...

@@ @@

++ **[[[https://scp-wiki.wikidot.com/scp-8307 |SCP-8307 | The Arthurian Cycle]]]**

[[*user sailorenoch]], [[*user rottingraisins]], [[*user Rosyfox2002]]
I actually came back to this after losing a close friend of mine just before PDcon. The concept bounced around for awhile but no draft came of it. I'm very proud of all the entries of PDcon, I want to give Rosy and Raisin a very sincere thank you for sticking for this very strange idea of magical girl King Arthur and somehow executing it perfectly. 

@@ @@


++ **[[[https://scp-wiki.wikidot.com/scp-8191 |SCP-8191 | Fisher Queen]]]**

 [[*user rottingraisins]], [[*user Rosyfox2002]], [[*user sailorenoch]]
Raisin sweep Raisin sweep 

@@ @@
++ **[[[https://scp-wiki.wikidot.com/scp-8815 |SCP-8815| To Pai, From the Moon]]]**

 [[*user sailorenoch]]  [[*user Uncle Nicolini]]

[[image https://i.imgur.com/ZQT9h3t.png]]
[[/=]]
[[/tab]]
[[tab Tales]]
[[image https://i.imgur.com/nuA1SEq.png]]
[[=]]
++ **[[[https://scp-wiki.wikidot.com/ponyposting |Pony Posting is Now Banned at Site-19]]]**

 [[*user sailorenoch]], [[*user AstersQuill]], [[*user FlyPurgatorio]],
Based on a true story

@@ @@

++ **[[[https://scp-wiki.wikidot.com/tinkertailorsoldierjailor |Tinker Tailor Soldier Jailor]]]**

 [[*user sailorenoch]], [[*user FlyPurgatorio]],
I forgot how to play poker


@@ @@

++ **[[[https://scp-wiki.wikidot.com/dragandrabbits |Draven and Dmitri Hit The Stage]]]**

[[*user Waxx]], [[*user FlyPurgatorio]], [[*user sailorenoch]],
There needs to be more drag articles on the wiki

@@ @@

++ **[[[https://scp-wiki.wikidot.com/let-there-be-green |Let There Be Green]]]**

[[*user Rosyfox2002]], [[*user sailorenoch]], [[*user rottingraisins]]
Rosy sweep Rosy sweep 

@@ @@

++ **[[[https://scp-wiki.wikidot.com/horned-is-the-enchanter |Horned is the Enchanter]]]**

[[*user sailorenoch]]
Funny wizard comic


@@ @@

++ **[[[https://scp-wiki.wikidot.com/fandation |Fandation]]]**

[[*user sailorenoch]], [[*user Fish^12]], [[*user prismal]], [[*user Alexander245]], [[*user SynthPanda\_]], [[*user harmacy]], [[*user FrankEntropy]], [[*user AstersQuill]], [[*user Guaire]], [[*user Miss Lapis]]
Welcome to Fandom!


@@ @@

++ **[[[https://scp-wiki.wikidot.com/this-machine-bleeds |This Machine Bleeds]]]**

[[*user sailorenoch]], [[*user Fish^12]]
A full visual novel for the wiki! My entry for INTCon in the Machina canon


[[image https://i.imgur.com/ZQT9h3t.png]]
[[/=]]
[[/tab]]
[[tab Other]]
[[image https://i.imgur.com/nuA1SEq.png]]
[[=]]

++ **[[[https://scp-wiki.wikidot.com/art:faust-s-art-page |Art Page]]]**

@@ @@

++ **[[[https://scp-wiki.wikidot.com/eventyr-hub |Eventyr Hub]]]**
@@ @@

[[image https://i.imgur.com/ZQT9h3t.png]]
[[/=]]
[[/tab]]
[[/tabview]]

@@ @@

[[include :scp-wiki:component:license-box
|author=sailorenoch]]

> **Filename:** oblxjgV.png
> **Author:** [[*user sailorenoch]]
> **License:** CC BY-SA 3.0
> **Source Link:**[[[https://i.imgur.com/oblxjgV.png |LINK]]]

> **Filename:** nuA1SEq.png
> **Author:** [[*user sailorenoch]]
> **License:** CC BY-SA 3.0
> **Source Link:**[[[https://i.imgur.com/nuA1SEq.png |LINK]]]

> **Filename:** ZQT9h3t.png
> **Author:** [[*user sailorenoch]]
> **License:** CC BY-SA 3.0
> **Source Link:**[[[https://i.imgur.com/ZQT9h3t.png |LINK]]]

> **Filename:** Oranienbaum
> **License:** Open Font License
> **Source Link:** https://fonts.google.com/specimen/Oranienbaum

[[include :scp-wiki:component:license-box-end]]