@import url('https://fonts.bunny.net/css2?family=Boogaloo&display=swap');
@import url('https://fonts.bunny.net/css2?family=Margarine&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
@import url(https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou&display=swap);

:root {
  --whiteboy: #fff5f3; /* color dropped from al */
  --jolly-roger: #221f1e; /* color dropped from als hat */
  --poop: #544446; /* no comment */
  --body-text: #222;

  --sp_top-bar-gradient-top-color: var(--poop);
  --sp_top-bar-gradient-bottom-color: var(--jolly-roger);
  --sp_top-bar-height: 1.8rem;
  --header-subtitle: "";
  --sp_rate-module-background: var(--jolly-roger);
  --sp_header-logo: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alLogo.webp");
  --sp_header-logo-size: 18rem;
  --sp_header-height: 16rem;

  --body-font: "Margarine", 'ZCOOL KuaiLe', sans-serif;

  --header-font: "Boogaloo", 'ZCOOL QingKe HuangYou' ,sans-serif;
}

body {
  background-color: var(--whiteboy);
  font-family: var(--body-font);
  color: var(--body-text);
  font-size-adjust: 0.55;
}

/* header */

#header {
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alBanner.png"), url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alBanner.png"), url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alBanner.png"), url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alBanner.png");
  background-size: auto 50%, auto 100%, auto 60%, auto 40%;
  background-position: bottom left, bottom center, top right, top -20% center;
}

#header h1 a {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  filter: drop-shadow(0 0 3px black);
}

#header h1 a::before {
  content: "";
  height: 8rem;
  width: 100%;
  display: block;
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alSCP.webp");
  background-size: contain;
  background-position: left -1rem center;
  background-repeat-y: no-repeat;
}

#header::before {
  filter: drop-shadow(0 0 3px white);
}

#login-status {
  background-color: var(--jolly-roger);
  width: max-content;
  margin-left: auto;
  padding: 0.3rem;
  margin-top: 0.8rem;
  outline: solid 4px var(--poop);
  border-radius: 0.3rem;
}

#top-bar .open-menu a {
  border: none;
  background-color: var(--whiteboy);
  color: transparent;
  top: 0.2rem;
  left: 0.2rem;
  height: 4rem;
  width: 4rem;
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/ALCANYON.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#search-top-box-form input[type="submit"] {
  background: var(--jolly-roger);
  border: 0;
  outline: solid 4px var(--poop);
  padding: 0.2rem 0.4rem;
}

#search-top-box-form input[type="submit"]:is(:hover, :focus, :active) {
  background: var(--poop);
  border: 0;
}

/* fade in */

#extra-div-1 {
    position: absolute;
    top:0; left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #00000000 0%, #00000000 40%, #000000 100%);
    z-index: -1;
}

#extra-div-1 span {
    position: fixed;
    top:0; left:0;
    width: 100%;
    height: 100%;
    height: 100lvh;
    pointer-events: none;
    z-index: 5;
    opacity: 0.25;
    background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/Fallen.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100vw;
}

/* footer */

#footer {
  background-color: var(--jolly-roger);
  margin-top: 15rem;
  position: relative;
  overflow: unset;
}

#footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 14rem;
  width: 100%;
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alBanner.png");
  background-size: auto 100%;
  z-index: -1;
}

/* headers */

#page-title, h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font);
}

/* page elements */

blockquote, div.blockquote {
  position: relative;
}

blockquote > *, div.blockquote > * {
  position: relative;
  z-index: 2;
}

:is(blockquote, div.blockquote):before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(https://scp-wiki.wikidot.com/local--files/theme:al-slop/Like_one_of_your_french_girls.webp);
  background-size: 6rem;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
}

hr {
  height: 4rem;
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alBunker.webp");
  background-color: transparent;
  background-size: 100% 100%;
  margin: 0;
}

tt {
  font-weight: bold;
}

/* rating module */

div.page-rate-widget-box .cancel a {
  color: white;
}

div.page-rate-widget-box {
  outline: solid 4px var(--poop);
  margin: 0 3rem;
}

.rateup, .ratedown, .cancel {
  position: relative;
}

:is(.rateup, .ratedown, .cancel)::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  height: 6rem;
  width: 9rem;
  background-size: cover;
  background-position: center;
  transform: translateX(-50%);
  clip-path: polygon(100% 94%, 60% 94%, 50% 100%, 40% 94%, 0 94%, 0 0, 100% 0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in 1s;
}

:is(.rateup, .ratedown, .cancel):has(a:active)::before {
  opacity: 1;
  transition: none;
}

.rateup::before {
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alJoy.png");
}

.ratedown::before {
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alDespair.png");
}

.cancel::before {
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/alPiracy.png");
}

/* side-bar */

#side-bar .side-block {
  position: relative;
}

#side-bar .side-block > * {
  position: relative;
  z-index: 1;
}

#side-bar .side-block.resources::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/ALCANYON.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.3;
}

/* code */

.code {
  position: relative;
}

.code .hl-main {
  position: relative;
}

.code::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:al-slop/M_lady.webp");
  opacity: 0.1;
  background-repeat: no-repeat;
  background-position: top center;
}