@import url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/Mx437_IBM_VGA_8x16.css");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

/*
    Turbo Vision Theme
    [2021 Wikidot Theme]
    By JakdragonX
    Based on SCP Sigma 9-Theme created by Aelanna and Dr Devan
    Based on the original Turbo Vision Theme created by Croquembouche

    The Turbo Vision theme is split into two CSS fragments.

    This fragment styles user-created Turbo Blocks, and does not require
    the other fragment in order to function correctly.
*/

/* BEFORE WE BEGIN, A QUICK FIX FOR UNDOING SIGMA-9 WEIRD THINGS */

@media (min-width: 768px) and (max-width: 979px) {
  div,
  div table {
    clear: initial;
  }
}

.avatar-hover {
  z-index: 1;
}

/* AND NOW... */
/* ------------------------------------- */
/* NOW FOR THE MAIN COURSE */

/* VARIABLES */

:root {
  --turbo-block-shadow: 0.5em 1em 0 0 #3e3f47;
  --turbo-block-border-width: 22px;
}

/* BLOCKQUOTES */

.turbo-block blockquote,
.turbo-block div.blockquote {
  background-color: #aaaaaa;
  color: #000;
  padding: 0;
  margin-bottom: 2em;
  border-width: var(--turbo-block-border-width);
  border-style: solid;
  border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white.svg") 16 round;
  box-shadow: var(--turbo-block-shadow);
}

/* SIMPLE TABLES */

.turbo-block table.wiki-content-table {
  box-shadow: var(--turbo-block-shadow);
  margin-bottom: 2em;
}

.turbo-block table.wiki-content-table td {
  border: 1px solid #fff;
  background-color: #aaaaaa;
}

.turbo-block table.wiki-content-table th {
  border: 1px solid #011657;
  color: #fff;
  background-color: #011657;
}

/* "BLOCK" DIV'S, DEFAULT CONFIG */

.turbo-block {
  position: relative;
  border-radius: 0;
  border-width: var(--turbo-block-border-width);
  border-style: solid;
  box-shadow: var(--turbo-block-shadow);
  color: white;
  margin: 0.75rem 1.5rem 1.5rem 0.75rem;
  z-index: 1;

  /* Properties that apply to whole document in the general fragment */
  font-family: "IBM Plex Mono", sans-serif;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.5px;
  image-rendering: pixelated;
}

.turbo-block .heading {
  position: relative;
  border: none;
  margin-top: 1.5em;
}

.turbo-block .heading::before {
  content: "";
  border-top: 3px double white;
  position: absolute;
  width: calc(100% + 22px);
  top: calc(50% - 1.5px);
  left: 0;
  margin: 0 -11px;
}

.turbo-block .heading p {
  display: table;
  position: relative;
  padding: 0 8px;
  background: inherit;
  margin: 0 0 0 2em;
  color: white;
}

.turbo-block hr {
  padding: 0;
  margin: 1em 0 0 -11px;
  width: calc(100% + 22px);
  max-width: none;
  height: 3px;
  border-top: 3px double white;
  background: none;
}
.turbo-block.border-white hr {
  border-color: white;
}
.turbo-block.border-black hr {
  border-color: black;
}

.turbo-block::after {
  content: attr(data-title);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, 0);
  color: white;
  padding: 0 8px;
}

/* IMAGE BLOCKS */
/* Image blocks are supposed to have a turbo block all of their own */

.turbo-block .scp-image-block {
  margin: 4px 0 0 0;
  float: none;
  border: none;
  box-shadow: none;
}

.turbo-block .scp-image-caption {
  background-color: transparent;
  font-weight: normal;
  border: none;
}

/* COLORIZED DIV BLOCKS */

.turbo-block.bg-cyan,
.turbo-block.bg-cyan::after,
.turbo-block.bg-cyan .heading p {
  background: #1f8785;
}

.turbo-block.bg-grey,
.turbo-block.bg-grey::after,
.turbo-block.bg-grey .heading p {
  background: #9f9f9f;
}

.turbo-block.bg-red,
.turbo-block.bg-red::after,
.turbo-block.bg-red .heading p {
  background: #840603;
}

.turbo-block.bg-orange,
.turbo-block.bg-orange::after,
.turbo-block.bg-orange .heading p {
  background: #b07713;
}

.turbo-block.bg-green,
.turbo-block.bg-green::after,
.turbo-block.bg-green .heading p {
  background: #13781f;
}

.turbo-block.bg-purple,
.turbo-block.bg-purple::after,
.turbo-block.bg-purple .heading p {
  background: #7f0e9c;
}

.turbo-block.bg-yellow,
.turbo-block.bg-yellow::after,
.turbo-block.bg-yellow .heading p {
  background: #98a31d;
}

.turbo-block.bg-black,
.turbo-block.bg-black::after,
.turbo-block.bg-black .heading p {
  background: #000;
}

.turbo-block.bg-white,
.turbo-block.bg-white::after,
.turbo-block.bg-white .heading p {
  background: #fff;
}

/* DIV "BLACK" AND "WHITE" AND WHAT THAT MEANS */

.turbo-block.border-black {
  border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_black2.svg")
    16 round;
}

.turbo-block.border-black .heading::before {
  border-color: black;
}

.turbo-block.border-white {
  border-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white2.svg")
    16 round;
}

.turbo-block.border-white .heading {
  background-image: url("https://scp-wiki.wikidot.com/local--files/theme:turbo-vision/border_white2.svg")
    16 round;
}

.turbo-block.text-black,
.turbo-block.text-black .heading p,
.turbo-block.text-black::after {
  color: black;
}

.turbo-block.text-white,
.turbo-block.text-white .heading p,
.turbo-block.text-white::after {
  color: white;
}

/* LINKS IN COLORIZED BLOCKS */

/* For big contrast and maximum readability, links in colorized blocks have
 * their background set to the block's text color, and their text color set to
 * the block's background color. This avoids any concerns about the default
 * link color only being suitable for certain background colors.
 */

.turbo-block a {
  padding: 0 2px;
  background-color: white; /* default */
}
.turbo-block.text-white a {
  background-color: white;
}
.turbo-block.text-black a {
  background-color: black;
}
.turbo-block.bg-cyan a {
  color: #1f8785;
}
.turbo-block.bg-grey a {
  color: #9f9f9f;
}
.turbo-block.bg-red a {
  color: #840603;
}
.turbo-block.bg-orange a {
  color: #b07713;
}
.turbo-block.bg-green a {
  color: #13781f;
}
.turbo-block.bg-purple a {
  color: #7f0e9c;
}
.turbo-block.bg-yellow a {
  color: #98a31d;
}
.turbo-block.bg-black a {
  color: #000;
}
.turbo-block.bg-white a {
  color: #fff;
}
.turbo-block a:hover {
  text-decoration: none;
  background-color: #11ff00;
  color: black;
}

/* "OFFSET-LEFT|RIGHT" DIVS */

.offset-right {
  float: right;
}
.offset-right > * {
  float: none;
}

.offset-left {
  float: left;
}
.offset-left > * {
  float: none;
}

.offset-right.right-5 {
  margin-right: calc(((50vw - 50%) * -1) + 1rem);
}

.offset-right.right-4 {
  margin-right: calc(((50vw - 50%) * -0.8) + 1rem);
}

.offset-right.right-3 {
  margin-right: calc(((50vw - 50%) * -0.6) + 1rem);
}

.offset-right.right-2 {
  margin-right: calc(((50vw - 50%) * -0.4) + 1rem);
}

.offset-right.right-1 {
  margin-right: calc(((50vw - 50%) * -0.2) + 1rem);
}

.offset-left.left-5 {
  margin-left: calc(((50vw - 50%) * -1) + 1rem);
}

.offset-left.left-4 {
  margin-left: calc(((50vw - 50%) * -0.8) + 1rem);
}

.offset-left.left-3 {
  margin-left: calc(((50vw - 50%) * -0.6) + 1rem);
}

.offset-left.left-2 {
  margin-left: calc(((50vw - 50%) * -0.4) + 1rem);
}

.offset-left.left-1 {
  margin-left: calc(((50vw - 50%) * -0.2) + 1rem);
}

/* FIXING MOBILE SHIT */

@media (max-width: 600px) {
  /* Stop all floats and offsets on really thin devices */
  .offset-right,
  .offset-left,
  .turbo-block,
  .turbo-block .scp-image-block {
    float: none;
    clear: both;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}