SCP-9240

Link to article: SCP-9240.

Module Styles

• #page-content {
    padding-block: 0;
  }

• 
  .hover-opacity-div {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  .hover-opacity-div:hover {
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  
  
  .hover-text {
    display: inline-block;
    position: relative;
    width: max-content;
  }
  
  .hover-text .text-default,
  .hover-text .text-hover {
    display: block;
    white-space: nowrap;
    transition: opacity 0.3s ease;
  }
  
  .hover-text .text-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center; /* Center the shorter text */
    opacity: 0;
    visibility: hidden;
  }
  
  .hover-text:hover .text-default {
    opacity: 0;
    visibility: hidden;
  }
  
  .hover-text:hover .text-hover {
    opacity: 1;
    visibility: visible;
  }
  

• #page-title {
  display: none;
  }
  
  .meta-title::after {
    display: none;
  }
  
  .meta-title > p {  
    margin: 0;
  }

• 
  h1 { font-size: 1.5rem; }
  
  h2 { font-size: 1.25rem; }
  
  h3 { font-size: 1rem; }
  

• 
  .bar {
    display: flex;
    align-items: center;
  }
  
  .left {
    white-space: nowrap; /* prevents wrapping, just in case */
    margin-right: auto;  /* pushes everything else away to the right */
  }
  
  .right {
    margin: 0 auto;       /* centers this in the remaining space */
  }
  
  .header-trigger {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
  }
  
  .target {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .header-trigger:hover + .target {
    opacity: 1;
  }
  

• 
  /* Hide all by default */
  .text-small-pc,
  .text-large-pc,
  .text-mobile-landscape,
  .text-mobile-portrait {
    display: none;
  }
  
  /* Small PC: max 650px, desktop pointer */
  @media only screen and (max-width: 650px) and (pointer: fine) and (hover: hover) {
    .text-small-pc {
      display: block;
    }
  }
  
  /* Large PC: above 651px, desktop pointer */
  @media only screen and (min-width: 651px) and (pointer: fine) and (hover: hover) {
    .text-large-pc {
      display: block;
    }
  }
  
  /* Mobile Portrait */
  @media only screen and (max-device-width: 767px) and (orientation: portrait) and (pointer: coarse) {
    .text-mobile-portrait {
      display: block;
    }
  }
  
  /* Mobile Landscape */
  @media only screen and (max-device-height: 767px) and (orientation: landscape) and (pointer: coarse) {
    .text-mobile-landscape {
      display: block;
    }
  }
  

• 
  .trigger:hover {
    text-shadow:
      0 0 5px rgb(255,48,48), /* First shadow layer (subtle glow) */
      0 0 10px rgb(255,48,48) /* Second shadow layer (medium glow) */
  }
  
  .trigger:hover ~ .basic {
    visibility: visible;
    opacity: 1;
  }
  
  .basic {
    visibility: hidden;
    opacity: 0;
    max-width: 100%;
    word-wrap: break-word;
    z-index: 20; /* Higher than the trigger's z-index */
    
    --margin-tb: 0px;
    --margin-rl: 0px;
    --bubble-width: 100%;
    --transition-time: 1s;
      
    background: #f0f0f0;
    color: #333;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    text-align: left;
  }
  
  
  
  .trigger > p {
    margin: 0;
    padding: 0;
  }
  
  .dialogue-box {
    width: 100%;
    position: relative;
    
    display: grid;
    grid-template-columns: 35% 30% 35%;
    grid-template-rows: repeat(3, min-content);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas:
      "tl tc tr"
      ". trigger ."
      "bl bc br";
  }
  
  .tl {
    grid-area: tl;
    position: absolute;
    bottom:0;
    right:0;
    
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
  }
  .tc {
    grid-area: tc;
    position: absolute;
    bottom:0;
    
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
  }
  .tr {
    grid-area: tr;
    position: absolute;
    bottom:0;
    
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
  }
  
  .trigger {
    padding: 1vh 0;
  
    grid-area: trigger;
    text-align: center;
    cursor: pointer;  
    z-index: 10;
  }
  
  .bl {
    grid-area: bl;
    position: absolute;
    right:0;
    
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
  }
  .bc {
    grid-area: bc;
    position: absolute;
    
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
  }
  .br {
    grid-area: br;
    position: absolute;
    
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
  }
  
  .tc, .bc {
    left: 50%;
    transform: translateX(-50%);
  }
  

• .image-bubble {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: opacity var(--transition-time);
    width: var(--bubble-width);
    margin: var(--margin-tb) var(--margin-rl);
    z-index: 20;
  }
  
  .image-bubble img {
    max-width: 60%;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  
  .image-bubble.mx-image img {
    max-width: 100%;
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  
  .trigger:hover ~ .image-bubble {
    visibility: visible;
    opacity: 1;
  }

• 
  .trigger:hover ~ .amelia {
    visibility: visible;
    opacity: 1;
  }
  
  .amelia {
    visibility: hidden;
    opacity: 0;
    max-width: 100%;
    word-wrap: break-word;
    z-index: 20; /* Higher than the trigger's z-index */
    
    --margin-tb: 0px;
    --margin-rl: 0px;
    --bubble-width: 100%;
    --transition-time: 1s;
    
    background-color: rgba(11, 57, 84);
    color: rgb(199, 255, 252);
    border-radius: 2px;  
    text-align: center;
  }
  
  .trigger:hover ~ .rosenaic {
    visibility: visible;
    opacity: 1;
  }
  
  .rosenaic {
    visibility: hidden;
    opacity: 0;
    max-width: 100%;
    word-wrap: break-word;
    z-index: 20; /* Higher than the trigger's z-index */
    
    --margin-tb: -1rem;
    --margin-rl: 0px;
    --bubble-width: 100%;
    --transition-time: 1s;
    
    background-color: rgba(0, 0, 0);
    color: rgb(78, 154, 6);
    border-radius: 2px;  
    text-align: center;
    
    padding: 1.5rem 0px;
    
    clip-path: polygon(
      20px 1rem,
      100% 1rem,
      100% calc(100% - 1rem),
      calc(50% + 20px) calc(100% - 1rem),
      50% 100%,
      0% 100%,
      0 30px
    );
  }
  
  .trigger:hover ~ .mother  {
    visibility: visible;
    opacity: 1;
  }
  
  .mother {
    visibility: hidden;
    opacity: 0;
    max-width: 100%;
    word-wrap: break-word;
    z-index: 20; /* Higher than the trigger's z-index */
    
    --margin-tb: 0px;
    --margin-rl: 0px;
    --bubble-width: 100%;
    --transition-time: 1s;
    
    background-color: rgba(46, 24, 52);
    color: rgb(204, 153, 1);
    border-radius: 6px;  
    text-align: center;
    
    animation: ge-anim03-paths 5s step-end infinite;
  }
  

• 
  :root {
      --linkColour: #FFF;
      --barColour: #0C2436;
  }
  
  .info-container {
    content: " ";
    width: 100%;
    text-align: center;
    bottom: 2em;
    margin-bottom: 1em;
  }
  
  .info-container h1 {
    text-align: center;
  }
  
  .info-container .collapsible-block-folded,
  .info-container .collapsible-block-unfolded-link {
    -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 628 18' xml:space='preserve'%3E%3Cpolygon fill='%23B2B2B2' points='628.3,0 0,0 0,5.3 243.6,5.3 268.1,18.2 360,18.3 384.7,5.3 628.3,5.3 '/%3E%3C/svg%3E%0A");
    
    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 628 18' xml:space='preserve'%3E%3Cpolygon fill='%23B2B2B2' points='628.3,0 0,0 0,5.3 243.6,5.3 268.1,18.2 360,18.3 384.7,5.3 628.3,5.3 '/%3E%3C/svg%3E%0A");
    
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: top center;
    mask-position: top center;
    background: var(--barColour);
  }
  
  .info-container .collapsible-block-folded {
      display: block;
      margin: 0 auto;
      height: 1.5em;
      width: 100%;
  }
  
  .translation_block > p {
      margin: 1em 2em 0 2em;
  }
  
  .info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 103 205.3' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M4.2,75.6c24.1-2.6,48.2-5.2,74.9-8.1c0,15.6,0,29.4,0,43.3c0,20.8,0.4,41.6-0.2,62.3 c-0.3,10.5,4,16.3,13.4,20c4,1.5,7.1,5.3,10.6,8c-0.8,1.4-1.6,2.8-2.4,4.3c-32.4,0-64.8,0-97.3,0c-0.9-1.1-1.7-2.3-2.6-3.4 c3.3-2.7,6.2-7,9.9-7.8c11.4-2.3,15.3-9,15.2-19.9c-0.2-20.3-0.6-40.5,0.1-60.8c0.4-11.8-4.4-18.1-15-22.3c-4.4-1.8-7.4-7.2-11-11 C1.4,78.6,2.8,77.1,4.2,75.6z'/%3E%3Cpath fill='%23FFFFFF' d='M79.6,27c0,16.3-11,26.9-27.5,26.7c-16.5-0.2-26.2-9.9-26.2-26c0-17,10.1-27.7,26.5-27.7 C68.6-0.1,79.6,10.8,79.6,27z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
      
    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 103 205.3' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M4.2,75.6c24.1-2.6,48.2-5.2,74.9-8.1c0,15.6,0,29.4,0,43.3c0,20.8,0.4,41.6-0.2,62.3 c-0.3,10.5,4,16.3,13.4,20c4,1.5,7.1,5.3,10.6,8c-0.8,1.4-1.6,2.8-2.4,4.3c-32.4,0-64.8,0-97.3,0c-0.9-1.1-1.7-2.3-2.6-3.4 c3.3-2.7,6.2-7,9.9-7.8c11.4-2.3,15.3-9,15.2-19.9c-0.2-20.3-0.6-40.5,0.1-60.8c0.4-11.8-4.4-18.1-15-22.3c-4.4-1.8-7.4-7.2-11-11 C1.4,78.6,2.8,77.1,4.2,75.6z'/%3E%3Cpath fill='%23FFFFFF' d='M79.6,27c0,16.3-11,26.9-27.5,26.7c-16.5-0.2-26.2-9.9-26.2-26c0-17,10.1-27.7,26.5-27.7 C68.6-0.1,79.6,10.8,79.6,27z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-size: 0.5em;
    mask-size: 0.5em;
    -webkit-mask-position: top center;
    mask-position: top center;
    mask-position-y: 3px;
    -webkit-mask-position-y: 3px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background: var(--linkColour);
    text-decoration: none;
  }
  
  .info-container .collapsible-block-unfolded-link {
    display: block;
    margin: 0 auto;
    height: 1.5em;
    width: 100%;
  }
  
  .info-container .collapsible-block-unfolded {
    border: 1px solid #BBB;
    border-top: none;
    background: #8495a0;
  }
  
  .info-container .collapsible-block-content {
    text-align: left;
    padding-bottom: 0px;
  }
  
  .info-container .collapsible-block-content div {
    margin: 0em;
  }
  

• :root {
      --linkColour: #FFF;
      --barColour: #0C2436;
  }
  
  #breadcrumbs{
    margin: auto;
    text-align: center;
    padding-bottom: 4px;
  }
  
  #page-title {
    position: relative;
    text-align: center;
    border-bottom: none;
    margin-bottom: 0;
  }

Inline Styles

• display: none

• flex-wrap: wrap; display: flex; justify-content: space-between;

• align-self: center;

Includes

• :scp-wiki:component:preview [info]
• :scp-wiki:theme:basalt [info]
• :scp-wiki:component:croqstyle [info]
• :scp-wiki:component:betterfootnotes [info]
• :scp-wiki:component:glitch-elements [info]
• :scp-wiki:component:ratio-bar [info]
• :scp-wiki:info:start [info]
• :scp-wiki:component:ratio-bar [info]
• :scp-wiki:info:end [info]
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• crom-thumbnail

• meta-title

• footer-wikiwalk-nav

Page Source

=====
[[include :scp-wiki:component:preview text=Hacking Into an Overwatch File Directory... Who Could Go Wrong?]]
=====

[!--
Direct links to all fragment pages:
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-00  - "Device Test"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-01  - "Exclusionary Warning"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-02  - "File Directory"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-03  - "Preliminary ADA"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-04  - "Level-3 ADA"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-05  - "Personnel File"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-06  - "Corrupted Directory"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-07  - "Mother's Test"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-08  - "Mother's Goal" (Easter Egg Page)
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-09  - "Full-Access Directory"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-10  - "Level-4 ADA"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-11  - "Full-Access ADA & Personnel File"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-12  - "Level-6 Council Records"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-13  - "First Boss"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-14  - "Through the Way"
https://scp-wiki.wikidot.com/fragment:9000contestfiretamer-15  - "Full Research Notes"

The numbers below are approximate values, and should in no way be used as a benchmark when translating. Additionally, due to the custom formatting and html elements, it is advised to double check the full document on both a PC and Phone.

Offset 0 - Device Test - 350 words
Offset 1 - Exclusionary Warning - 515 Words
Offset 2 - File Directory - 1,059 Words
Offset 3 - Preliminary ADA - 3,665 Words
Offset 4 - Level-3 ADA - 3,080 Words
Offset 5 - Personnel File - 2,2060 Words
Offset 6 - Corrupted Directory - 560 Words
Offset 7 - Mother's Test - Difficult to Count up
Offset 8 - Mother's Goal - 560 Words
Offset 9 - Full-Access File Directory - 570 Words
Offset 10 - Level-4 ADA - 1,920 Words
Offset 11 - Full-Access ADA - 2,315 Words
Offset 12 - Level-6 Council Records - 0 Words
Offset 13 - First Boss - 360 Words
Offset 14 - Through the Way - 220 Words
Offset 15 - Full-Research Notes - 4,340 Words
--]

[[include :scp-wiki:theme:basalt wide=a|hidetitle=a|acs-itemnum=a]]

[[include :scp-wiki:component:croqstyle]]

[[include :scp-wiki:component:betterfootnotes]]

[[include :scp-wiki:component:glitch-elements]]

[[include :scp-wiki:component:ratio-bar base=-- |ex=--]]



[[image https://scp-wiki.wikidot.com/local--files/9000contestfiretamer/Mother_Mad.jpg class="crom-thumbnail" style="display: none"]]



[[module css]]
#page-content {
  padding-block: 0;
}
[[/module]]



[[module css]]

.hover-opacity-div {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hover-opacity-div:hover {
  opacity: 1;
  transition: opacity 0.5s ease;
}


.hover-text {
  display: inline-block;
  position: relative;
  width: max-content;
}

.hover-text .text-default,
.hover-text .text-hover {
  display: block;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.hover-text .text-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center; /* Center the shorter text */
  opacity: 0;
  visibility: hidden;
}

.hover-text:hover .text-default {
  opacity: 0;
  visibility: hidden;
}

.hover-text:hover .text-hover {
  opacity: 1;
  visibility: visible;
}

[[/module]]



[[module css]]
#page-title {
display: none;
}

.meta-title::after {
  display: none;
}

.meta-title > p {  
  margin: 0;
}
[[/module]]

[[div style="flex-wrap: wrap; display: flex; justify-content: space-between;"]]

[[div class="meta-title"]]
SCP-XXXX File Directory
[[/div]]

[[div style="align-self: center;"]]
[[include :scp-wiki:info:start]]
**SCP-XXXX:** The Server Screams
**Author:** [[*user FireTamer]]

**Word Count:** This article has an approximate word count of 22-24K words. Fair warning as so many offsets can hide the length quite well.

**Content Warning:** Emotional & psychological abuse, Sadistic behavior, Manipulative Antagonist, Light Gore (Passing Comment), Strong Language (Expletives).

**Epilepsy Warning:** If you as the reader have a condition such as photosensitive epilepsy or are reading this work around individuals with such a condition, it is highly advised to turn off animation effects for Windows, or turn on the "Reduced Motion" setting for Mac. Fast changing, flickering, and flashing visuals are present in this work.

**Credits:**
* Forked Version of the "Info Bar" component for the "Directory Menu". https://www.wikidot.com/user:info/ayers

[[include :scp-wiki:component:ratio-bar pie=--]]

[[include :scp-wiki:info:end]]
[[/div]]

[[/div]]



[[module css]]

h1 { font-size: 1.5rem; }

h2 { font-size: 1.25rem; }

h3 { font-size: 1rem; }

[[/module]]







[[module css]]

.bar {
  display: flex;
  align-items: center;
}

.left {
  white-space: nowrap; /* prevents wrapping, just in case */
  margin-right: auto;  /* pushes everything else away to the right */
}

.right {
  margin: 0 auto;       /* centers this in the remaining space */
}

.header-trigger {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  cursor: pointer;
}

.target {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.header-trigger:hover + .target {
  opacity: 1;
}

[[/module]]







[[module css]]

/* Hide all by default */
.text-small-pc,
.text-large-pc,
.text-mobile-landscape,
.text-mobile-portrait {
  display: none;
}

/* Small PC: max 650px, desktop pointer */
@media only screen and (max-width: 650px) and (pointer: fine) and (hover: hover) {
  .text-small-pc {
    display: block;
  }
}

/* Large PC: above 651px, desktop pointer */
@media only screen and (min-width: 651px) and (pointer: fine) and (hover: hover) {
  .text-large-pc {
    display: block;
  }
}

/* Mobile Portrait */
@media only screen and (max-device-width: 767px) and (orientation: portrait) and (pointer: coarse) {
  .text-mobile-portrait {
    display: block;
  }
}

/* Mobile Landscape */
@media only screen and (max-device-height: 767px) and (orientation: landscape) and (pointer: coarse) {
  .text-mobile-landscape {
    display: block;
  }
}

[[/module]]





[[module css]]

.trigger:hover {
  text-shadow:
    0 0 5px rgb(255,48,48), /* First shadow layer (subtle glow) */
    0 0 10px rgb(255,48,48) /* Second shadow layer (medium glow) */
}

.trigger:hover ~ .basic {
  visibility: visible;
  opacity: 1;
}

.basic {
  visibility: hidden;
  opacity: 0;
  max-width: 100%;
  word-wrap: break-word;
  z-index: 20; /* Higher than the trigger's z-index */
  
  --margin-tb: 0px;
  --margin-rl: 0px;
  --bubble-width: 100%;
  --transition-time: 1s;
    
  background: #f0f0f0;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-align: left;
}



.trigger > p {
  margin: 0;
  padding: 0;
}

.dialogue-box {
  width: 100%;
  position: relative;
  
  display: grid;
  grid-template-columns: 35% 30% 35%;
  grid-template-rows: repeat(3, min-content);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "tl tc tr"
    ". trigger ."
    "bl bc br";
}

.tl {
  grid-area: tl;
  position: absolute;
  bottom:0;
  right:0;
  
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
}
.tc {
  grid-area: tc;
  position: absolute;
  bottom:0;
  
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
}
.tr {
  grid-area: tr;
  position: absolute;
  bottom:0;
  
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
}

.trigger {
  padding: 1vh 0;

  grid-area: trigger;
  text-align: center;
  cursor: pointer;  
  z-index: 10;
}

.bl {
  grid-area: bl;
  position: absolute;
  right:0;
  
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
}
.bc {
  grid-area: bc;
  position: absolute;
  
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
}
.br {
  grid-area: br;
  position: absolute;
  
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
}

.tc, .bc {
  left: 50%;
  transform: translateX(-50%);
}

[[/module]]





[[module css]]
.image-bubble {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: opacity var(--transition-time);
  width: var(--bubble-width);
  margin: var(--margin-tb) var(--margin-rl);
  z-index: 20;
}

.image-bubble img {
  max-width: 60%;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.image-bubble.mx-image img {
  max-width: 100%;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.trigger:hover ~ .image-bubble {
  visibility: visible;
  opacity: 1;
}
[[/module]]






[[module css]]

.trigger:hover ~ .amelia {
  visibility: visible;
  opacity: 1;
}

.amelia {
  visibility: hidden;
  opacity: 0;
  max-width: 100%;
  word-wrap: break-word;
  z-index: 20; /* Higher than the trigger's z-index */
  
  --margin-tb: 0px;
  --margin-rl: 0px;
  --bubble-width: 100%;
  --transition-time: 1s;
  
  background-color: rgba(11, 57, 84);
  color: rgb(199, 255, 252);
  border-radius: 2px;  
  text-align: center;
}

.trigger:hover ~ .rosenaic {
  visibility: visible;
  opacity: 1;
}

.rosenaic {
  visibility: hidden;
  opacity: 0;
  max-width: 100%;
  word-wrap: break-word;
  z-index: 20; /* Higher than the trigger's z-index */
  
  --margin-tb: -1rem;
  --margin-rl: 0px;
  --bubble-width: 100%;
  --transition-time: 1s;
  
  background-color: rgba(0, 0, 0);
  color: rgb(78, 154, 6);
  border-radius: 2px;  
  text-align: center;
  
  padding: 1.5rem 0px;
  
  clip-path: polygon(
    20px 1rem,
    100% 1rem,
    100% calc(100% - 1rem),
    calc(50% + 20px) calc(100% - 1rem),
    50% 100%,
    0% 100%,
    0 30px
  );
}

.trigger:hover ~ .mother  {
  visibility: visible;
  opacity: 1;
}

.mother {
  visibility: hidden;
  opacity: 0;
  max-width: 100%;
  word-wrap: break-word;
  z-index: 20; /* Higher than the trigger's z-index */
  
  --margin-tb: 0px;
  --margin-rl: 0px;
  --bubble-width: 100%;
  --transition-time: 1s;
  
  background-color: rgba(46, 24, 52);
  color: rgb(204, 153, 1);
  border-radius: 6px;  
  text-align: center;
  
  animation: ge-anim03-paths 5s step-end infinite;
}

[[/module]]






[[module css]]

:root {
    --linkColour: #FFF;
    --barColour: #0C2436;
}

.info-container {
  content: " ";
  width: 100%;
  text-align: center;
  bottom: 2em;
  margin-bottom: 1em;
}

.info-container h1 {
  text-align: center;
}

.info-container .collapsible-block-folded,
.info-container .collapsible-block-unfolded-link {
  -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 628 18' xml:space='preserve'%3E%3Cpolygon fill='%23B2B2B2' points='628.3,0 0,0 0,5.3 243.6,5.3 268.1,18.2 360,18.3 384.7,5.3 628.3,5.3 '/%3E%3C/svg%3E%0A");
  
  mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 628 18' xml:space='preserve'%3E%3Cpolygon fill='%23B2B2B2' points='628.3,0 0,0 0,5.3 243.6,5.3 268.1,18.2 360,18.3 384.7,5.3 628.3,5.3 '/%3E%3C/svg%3E%0A");
  
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: top center;
  mask-position: top center;
  background: var(--barColour);
}

.info-container .collapsible-block-folded {
    display: block;
    margin: 0 auto;
    height: 1.5em;
    width: 100%;
}

.translation_block > p {
    margin: 1em 2em 0 2em;
}

.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
  -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 103 205.3' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M4.2,75.6c24.1-2.6,48.2-5.2,74.9-8.1c0,15.6,0,29.4,0,43.3c0,20.8,0.4,41.6-0.2,62.3 c-0.3,10.5,4,16.3,13.4,20c4,1.5,7.1,5.3,10.6,8c-0.8,1.4-1.6,2.8-2.4,4.3c-32.4,0-64.8,0-97.3,0c-0.9-1.1-1.7-2.3-2.6-3.4 c3.3-2.7,6.2-7,9.9-7.8c11.4-2.3,15.3-9,15.2-19.9c-0.2-20.3-0.6-40.5,0.1-60.8c0.4-11.8-4.4-18.1-15-22.3c-4.4-1.8-7.4-7.2-11-11 C1.4,78.6,2.8,77.1,4.2,75.6z'/%3E%3Cpath fill='%23FFFFFF' d='M79.6,27c0,16.3-11,26.9-27.5,26.7c-16.5-0.2-26.2-9.9-26.2-26c0-17,10.1-27.7,26.5-27.7 C68.6-0.1,79.6,10.8,79.6,27z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    
  mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 103 205.3' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23FFFFFF' d='M4.2,75.6c24.1-2.6,48.2-5.2,74.9-8.1c0,15.6,0,29.4,0,43.3c0,20.8,0.4,41.6-0.2,62.3 c-0.3,10.5,4,16.3,13.4,20c4,1.5,7.1,5.3,10.6,8c-0.8,1.4-1.6,2.8-2.4,4.3c-32.4,0-64.8,0-97.3,0c-0.9-1.1-1.7-2.3-2.6-3.4 c3.3-2.7,6.2-7,9.9-7.8c11.4-2.3,15.3-9,15.2-19.9c-0.2-20.3-0.6-40.5,0.1-60.8c0.4-11.8-4.4-18.1-15-22.3c-4.4-1.8-7.4-7.2-11-11 C1.4,78.6,2.8,77.1,4.2,75.6z'/%3E%3Cpath fill='%23FFFFFF' d='M79.6,27c0,16.3-11,26.9-27.5,26.7c-16.5-0.2-26.2-9.9-26.2-26c0-17,10.1-27.7,26.5-27.7 C68.6-0.1,79.6,10.8,79.6,27z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-size: 0.5em;
  mask-size: 0.5em;
  -webkit-mask-position: top center;
  mask-position: top center;
  mask-position-y: 3px;
  -webkit-mask-position-y: 3px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background: var(--linkColour);
  text-decoration: none;
}

.info-container .collapsible-block-unfolded-link {
  display: block;
  margin: 0 auto;
  height: 1.5em;
  width: 100%;
}

.info-container .collapsible-block-unfolded {
  border: 1px solid #BBB;
  border-top: none;
  background: #8495a0;
}

.info-container .collapsible-block-content {
  text-align: left;
  padding-bottom: 0px;
}

.info-container .collapsible-block-content div {
  margin: 0em;
}

[[/module]]







[[module CSS]]
:root {
    --linkColour: #FFF;
    --barColour: #0C2436;
}

#breadcrumbs{
  margin: auto;
  text-align: center;
  padding-bottom: 4px;
}

#page-title {
  position: relative;
  text-align: center;
  border-bottom: none;
  margin-bottom: 0;
}
[[/module]]


------

[[module ListPages category="fragment" parent="." order="created_at" limit="1" offset="@URL|0"]]
%%content%%
[[/module]]









[[div class="footer-wikiwalk-nav"]]
[[=]]
<< [[[SCP-9239]]] | SCP-9240 | [[[SCP-9241]]] >>
[[/=]]
[[/div]]



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

------

> **Filename:** "Amelia_Original.jpg"
> **License:** CC BY-SA 2.0

This image was not edited; sourced from:

> **Name:** girl-book-glasses-678700
> **Author:** Diem
> **License:** Public Domain (uploaded 17 March 2015)
> **Source:** [https://pixabay.com/photos/girl-book-glasses-678700 pixabay]

------

> **Filename:** "Amy_gun.jpg"
> **License:** CC BY-SA 2.0

This image was edited by FireTamer; sourced from:

> **Name:** killer-mercenary-assassin-mafia-3803886
> **Author:** Vika_Glitter
> **License:** Public Domain (uploaded 11 November 2018)
> **Source:** [https://pixabay.com/photos/killer-mercenary-assassin-mafia-3803886 pixabay]

------

> **Filename:** "Amy_profile.jpg"
> **License:** CC BY-SA 2.0

This image was edited by FireTamer; sourced from:

> **Name:** killer-mercenary-assassin-mafia-3803886
> **Author:** Vika_Glitter
> **License:** Public Domain (uploaded 11 November 2018)
> **Source:** [https://pixabay.com/photos/killer-mercenary-assassin-mafia-3803886 pixabay]

------

> **Filename:** "Amy_Sunset-Walk.jpg"
> **License:** CC BY-SA 2.0

This image was edited by FireTamer; sourced from:

> **Name:** adult-back-view-blonde-hair-1867694
> **Author:** Pexels
> **License:** Public Domain (uploaded 28 November 2016)
> **Source:** [https://pixabay.com/photos/adult-back-view-blonde-hair-1867694 pixabay]

------

> **Filename:** "Mother_eh.jpg", "Mother_Mad.jpg", "Mother_Mid.jpg", & "Mother_Nice.jpg"
> **License:** CC BY-SA 2.0

These images were derived from the same source, edited by FireTamer:

> **Name:** eye-blue-eye-woman-eye-lashes-3805227
> **Author:** AlexanderGrey
> **License:** Public Domain (uploaded 12 November 2018)
> **Source:** [https://pixabay.com/photos/eye-blue-eye-woman-eye-lashes-3805227 pixabay]

------

> **Filename:** "Ros_Angry.jpg", "Ros_calm.jpg", "Ros_mid.jpg", & "Ros_normal.jpg"
> **License:** CC BY-SA 2.0

These images were derived from the same source, edited by FireTamer:

> **Name:** girl-book-glasses-678700
> **Author:** Diem
> **License:** Public Domain (uploaded 17 March 2015)
> **Source:** [https://pixabay.com/photos/girl-book-glasses-678700 pixabay]


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