/*
    Plotato Engine license:
    Copyright 2021 Shark in a Hat

    Permission to use, copy, modify, and/or distribute this software
    for any purpose with or without fee is hereby granted, provided
    that the above copyright notice and this permission notice
    appear in all copies.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL
    WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED
    WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL
    THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
    CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
    NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
    CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/

:root {
    --css_version: '4';
    --color_yellow: rgb(250,193,72);
    --color_bg_gray: rgb(128, 128, 128);
    --color_bg_lightgray: rgb(166, 166, 168);
    --color_bg_darkgray: rgb(86, 86, 88);
    --color_gray40: rgba(200,200,200,0.4);
    --color_light: rgba(255, 255, 240, 1.0);
    --color_dim: rgb(225, 230, 225);
    --color_dark: rgb(48, 48, 48);
    --color_black90: rgba(0, 0, 0, 0.9);
    --color_black70: rgba(0, 0, 0, 0.7);
    --color_black50: rgba(0, 0, 0, 0.5);
    --color_black20: rgba(0, 0, 0, 0.2);
    --color_white90: rgba(255, 255, 255, 0.9);
    --color_white70: rgba(255, 255, 255, 0.7);
    --color_scroll1: rgba(180, 180, 180,0.9);
    --color_scroll2: rgba(160, 160, 160,0.9);
    --color_green: rgba(60,90,65,0.9);
    --color_green2: rgba(60,100,75,0.9);
    --body_width: 96vw;
    --use_vh: 0;
}
html {
    box-sizing: border-box;
    scrollbar-color: var(--color_scroll1) var(--color_black20);
    scrollbar-width: thin
}
*, *::before, *::after {
    box-sizing: inherit;
}

::selection { background-color: transparent; }

/* Cool font, with good readability */
@font-face{
    font-family: "monofonto";
    src:url('../font/monofonto.ttf');
    font-display: block;
}

/* Font Awesome -for icons */
@font-face{
    font-family: "fa-solid-900";
    src:url('../font/fa-solid-900.ttf');
    font-display: block;
}

/* Cyrylic style font  */
@font-face{
    font-family: "kyrilla";
    src:url('../font/kyrilla.ttf');
    font-display: block;
}

body {
    background-color: var(--color_bg_darkgray);
    margin: auto;
    color:  var(--color_light);
    overflow-y: scroll;
}

/* Scrollbar style for chrome */
/* width */
::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color_scroll1);
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color_scroll2);
}

/* H5 used for copyright notice at bottom */
.copyright {
    color:  var(--color_black50);
    font-size: 12px;
    position: fixed;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 4px;
    margin: 0;
}
.copyright::after{
    content: '.' var(--css_version);
}

/* H1 used for loading text*/
h1{
    text-align: center;
    font-family: monofonto;
}

.buymeacoffee{
    width : 21.8em;
    height: 6.12em;
    background-color: #FFDD00;
    background-image: url('../img/svg/bmc-button.svg');
    background-size: cover;
    box-shadow: 0px 0px 5px var(--color_black90);
    border-radius: 1em;
    text-align: center;
    text-decoration: none;
    color: var(--color_black50);
    border: 2px solid black;
    position: absolute;
    bottom: 1em;
    right: 1em;
    cursor: pointer;
    animation-name: noticemesenpai;
    animation-delay: 2000ms;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
.buymeacoffee:hover{
    border: none;
    box-shadow: 0px 2px 5px var(--color_black90);
}
.buymeacoffee:active{
    transform: translate(0, 1px);
}

@keyframes noticemesenpai{
  0%  {transform: rotate(0deg);}
  4%  {transform: rotate(2deg);}
  8%  {transform: rotate(-2deg);}
  12%  {transform: rotate(2deg);}
  16%  {transform: rotate(0deg);}
  100%  {transform: rotate(0deg);}
}

.load_timeout{
    pointer-events:none;
    -webkit-user-select: none;
    user-select: none;
    color: transparent;
    animation-name: delay_vis;
    animation-duration: 8000ms;
    animation-fill-mode: forwards;
    }

@keyframes delay_vis {
  0% {color:transparent;}
  90% {color:transparent;}
  100% {color:var(--color_light);}
}

/* Portrait mode warning*/
.portrait_mode{
    display: none;
    }
@media (max-aspect-ratio: 6/5) {
    .portrait_mode{
        display: block;
        width: 90%;
        margin: 1em;
        text-align: center;
        font-family: monofonto;
        font-size: 3.5vh;
        text-shadow: 0 0 5px black;
        cursor: default;
    }
}
@media (min-aspect-ratio: 16/9) {
    :root {
    --body_width: 170vh;
    --use_vh: 1;
    }
}

/* Spin anim for loading spinner*/
@keyframes rotate360 {
  to {transform: rotate(-360deg);}
}
/* Anim for phone icon*/
@keyframes rotate90 {
  75%  {transform: rotate(95deg);}
  100%  {transform: rotate(90deg);}
}

/*Hide the file input thing, so we can actually style it...*/
input[type="file"] {
    display: none;
}
input[type="text"]::selection {
    background-color: lightblue;
}

/* pre is used for the main text to add newlines if needed without extra markup*/
/* max-height used for stupid mobile browsers changing font size*/
pre {
    margin:0 5px;
    font-family: monofonto;
    font-size: 150%;
    color:  var(--color_light);
    text-shadow: 0 0 3px black;
    white-space: pre-wrap;
    word-wrap: break-word;
    pointer-events:none;
    -webkit-user-select: none;
    user-select: none;
    max-height: 900000px;
    -webkit-font-smoothing: antialiased;
}

pre::first-line {
  color:  var(--color_dim);
}

/* Drop down style */
select {
    color: var(--color_dark);
    font-size: 90%;
    width: 95%;
    font-family: monofonto;
    white-space: nowrap;
    padding: 1px 5px;
    background-color: var(--color_white90);
    border-style: none;
    border-radius: 3px;
    margin: 2px;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-size: 2em auto;
    background-position: right 0.25em center;
    background-image: url('../img/svg/triangle.svg');
}
.dropdown_top {
    background-image: url('../img/svg/shirt_triangle.svg');
}
.dropdown_bra {
    background-image: url('../img/svg/bra_triangle.svg');
}
.dropdown_accessory {
    background-image: url('../img/svg/neck_triangle.svg');
}
.dropdown_bottom {
    background-image: url('../img/svg/pants_triangle.svg');
}
.dropdown_panties {
    background-image: url('../img/svg/panties_triangle.svg');
}
.dropdown_socks {
    background-image: url('../img/svg/socks_triangle.svg');
}

.dropdown_filter {
    font-size: 110%;
    width: 90%;
    margin: 5px;
    background-color: var(--color_white90);
}
/* Placeholder, needed for proper positioning */
.container {
    position: relative;
    width: 100%;
    height: calc(var(--body_width) * 0.5625);
    overflow: hidden;
    background-color: var(--color_bg_gray);
}

.history{
    background-color: var(--color_dark);
    padding: 0.5em 2em;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px var(--color_black50);
    font-family: monofonto;
    font-size: 120%;
    color:  var(--color_light);
    text-shadow: 0 0 3px black;
}
.history_txt{
    margin: 0.5em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.history_txt::selection {
    background-color: var(--color_green);
}

.portrait{
    float: left;
}
.tts_fieldset{
    width: calc(95% - 128px);
    border: 1px solid var(--color_bg_lightgray);
    border-radius: 5px;
    padding: 5px;
}

.tts_slider{
    width: 100%;
}

.tts_voices{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.tts_voice{
    white-space: nowrap;
    overflow: auto;
    min-width: 46%;
    border-radius: 10px;
    border-style: solid;
    border-color: var(--color_black50);
    margin: 5px;
    padding: 5px;
}
.tts_header{
    font-size: 120%;
    text-align: center;
}
.tts_txt{
    width:80%;
    margin-left:10%;
}
.tts_config{
    background-color: var(--color_dark);
    padding: 0.5em 2em;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: 3px 3px 5px var(--color_black50);
    font-family: monofonto;
    font-size: 120%;
    color:  var(--color_light);
    text-shadow: 0 0 3px black;
}
/* Buttons for controls */
.tts_button{
    font-size: 100%;
    font-family: monofonto;
    color:  var(--color_black90);
    background: var(--color_white90);
    padding: 0.5em 1.5em;
    margin: 0.1em auto;
    display: block;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.tts_button:active{
    transform: translate(0, 1px);
}

/*overlay for color splash effects, FF has no backdrop-filter support so just use for color effect*/
.overlay{
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    animation-name: no_anim;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    opacity: 0.0;
    pointer-events: none;
}
/* Main image but larger, scrolling from top to bottom, also used for parallax effect  */
.overscroll_img_y {
    width: 100%;
    height: calc(var(--body_width) * 0.5625);
    position: absolute;
    object-fit: cover;
    object-position: 0% 0%;
    animation-name: scroll_y;
    animation-delay: 300ms;
    animation-duration: 15000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    -webkit-user-select: none;
    user-select: none;
}
@keyframes scroll_y {
  0% {
    object-position: 100% 0%;
  }
  100% {
    object-position: 100% 100%;
  }
}

/* Main image but larger, scrolling from left to right, also used for parallax effect  */
.overscroll_img_x {
    position: absolute;
    width: calc(var(--body_width));
    height: calc(var(--body_width) * 0.5625);
    object-fit: cover;
    object-position: 0% 0%;
    animation-name: scroll_x;
    animation-duration: 12000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    -webkit-user-select: none;
    user-select: none;
}
@keyframes scroll_x {
  0% {
    object-position: 0% 100%;
  }
  100% {
    object-position: 100% 100%;
  }
}

/* Main image is the main image, d'uh */
.main_img {
    width: 100%;
    height: auto;
    position: absolute;
    animation-name: fade_in;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    -webkit-user-select: none;
    user-select: none;
}

/* image overlayed on top of all other imgs (also on top of pc/npc ) */
.imgs_overlay {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;

}
.overlay_blend_screen {
    width: 100%;
    height: auto;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    mix-blend-mode: screen;
}

.overlay_drug {
    background: linear-gradient(45deg, rgba(230,0,219,0.4) 0%, rgba(0,0,0,0.2) 10%, rgba(0,200,70,0.4) 100%);
    width: 100%;
    height: auto;
    position: absolute;
    mix-blend-mode: saturation;
    -webkit-user-select: none;
    user-select: none;
    background-size: 100% 100%;
    animation-name: drug;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

@keyframes drug{
  0% { background-size: 100% 100%; opacity: 100%;}
  50% { opacity: 0%;}
  100%   { background-size: 1200% 100%; opacity: 100%;}
}

.overlay_fog {
    background: url("../img/fx/fog.webp") repeat;
    width: 100%;
    height: auto;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    animation-name: scroll_up_right;
    animation-delay: 111ms;
    animation-duration: 20000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.overlay_fog2 {
    background: url("../img/fx/fog.webp") repeat;
    width: 100%;
    height: auto;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    animation-name: scroll_up_left;
    animation-delay: 237ms;
    animation-duration: 21000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes scroll_up_right {
  from { background-position: 0 0;}
  to   { background-position: -1280px -720px;}
}

@keyframes scroll_up_left {
  from { background-position: 0 0;}
  to   { background-position: 1280px -720px;}
}

.overlay_disco1 {
    width: 100%;
    height: auto;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    mix-blend-mode: screen;
    animation-name: fade_in;
    animation-delay: 111ms;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

.overlay_disco2 {
    width: 100%;
    height: auto;
    position: absolute;
    -webkit-user-select: none;
    user-select: none;
    mix-blend-mode: screen;
    animation-name: fade_in;
    animation-delay: 37ms;
    animation-duration: 650ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

/* fade-in used for main img cross fade*/
@keyframes fade_in {
  from {opacity: 0.0;}
  to   {opacity: 1.0;}
}

/* fade-out used for overlay/splash effect*/
@keyframes fade_out {
  from {opacity: 1.0;}
  to   {opacity: 0.0;}
}

@keyframes fade_in_out {
  0% {opacity: 0.0;}
  10% {opacity: 1.0;}
  80% {opacity: 1.0;}
  100%   {opacity: 0.0;}
}

/* Main text container, at the bottom */
.main_txt {
    contain: layout;
    position: absolute;
    bottom: 2em;
    left: 50%;
    width: 90%;
    max-width: 100ch;
    max-height: 40%;
    min-height: 6em;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translate(-50%, 0%);
    background: var(--color_black50);
    padding: 0.5em 2.5em 2.5em 1.5em;
    border-radius: 10px;
    box-shadow: 3px 3px 5px var(--color_black50);
    cursor: pointer;
    animation-name: no_anim;
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    scrollbar-color: var(--color_scroll1) var(--color_black20);
    scrollbar-width: thin;
    backdrop-filter: blur(4px);
}

/* Text change may not always be obvious,
 *  so we need to draw attention to the monkey part of the brain with motion */
@keyframes popin {
  0% {transform: translate(-50%, 0%) scale(1.0) ;}
  33% {transform: translate(-50%, 0%) scale(1.02) ;}
  66% {transform:  translate(-50%, 0%) scale(0.98) ;}
  100% {transform:  translate(-50%, 0%) scale(1.0) ;}
}

/* Error msg */
.error_txt {
    color:  red;
    width: 70%;
    margin: auto;
    background-color: black;
    border-radius: 2px;
    padding: 20px;
    border-style: solid;
    border-color: yellow;
    font-family: monofonto, monospace;
    font-size: 120%;
}

.error_txt::selection {
    background-color: yellow;
}

/* Buttons for controls */
.rollback_button{
    width: 90%;
    font-size: 120%;
    font-family: monofonto;
    white-space: nowrap;
    display: block;
    color:  var(--color_black90);
    background: var(--color_white90);
    padding: 2px;
    margin: 0.7em auto;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.rollback_button:active{
    transform: translate(0, 1px);
}

.cfg_button{
    width: 3em;
    font-size: 100%;
    font-family: monofonto;
    display: block;
    color:  var(--color_black90);
    background: var(--color_white90);
    padding: 2px;
    margin: 2px auto;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.cfg_button:active{
    transform: translate(0, 1px);
}

.err_button{
    font-size: 100%;
    font-family: monofonto;
    display: block;
    color:  black;
    background: red;
    padding: 2px 1em;
    margin: 2px auto;
    border: none;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.err_button:active{
    transform: translate(0, 1px);
}

.mod_button{
    font-size: 100%;
    display: block;
    color:  var(--color_black90);
    background: lightgray;
    padding: 2px;
    margin: 5px;
    border: solid black 1px;
    border-radius: 3px;
    text-decoration: none;
    font-family: monofonto;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.mod_button:active{
    transform: translate(0, 1px);
}

.no_select{
    user-select: none;
    -webkit-user-select: none;
}

/* Choice buttons*/
.choice_box{
    display: flex;
    flex-flow: column wrap;
    position: absolute;
    top: 1.1em;
    max-height: 50%;
    width: 100%;
    padding: 0 2em;
    gap: 0.3em
}
.choice_button{
    min-width:40%;
    display: block;
    font-size: 150%;
    color:  var(--color_light);
    text-shadow: 0 0 3px black;
    background: var(--color_green);
    padding: 0.4em 1.6em;
    margin: 0 auto;
    border-radius: 10px;
    border-style: solid;
    border-color: var(--color_white70);
    font-family: monofonto;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    backdrop-filter: blur(4px);
}
.choice_button:active{
    transform: translate(0, 2px);
}

.choice_button:hover{
    background: var(--color_green2);
    border-color: var(--color_white90);
}

/*Button for the shop/wardrobe  */
.shop_button{
    width: 90%;
    font-size: 85%;
    color:  var(--color_light);
    text-shadow: 0 0 2px black;
    font-family: monofonto;
    border-style: solid;
    border-radius: 5px;
    border-width: 2px;
    border-color: var(--color_white70);
    background: var(--color_green);
    padding: 6px;
    margin: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.shop_button:active{
    transform: translate(0, 1px);
}
.shop_button:hover{
    background: var(--color_green2);
    border-color: var(--color_white90);
}

/* Placeholder for even spaced elements*/
.flex_spacer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 1.6em;
}

/* Grid -used for shop/wardrobe layout */
.grid {
  position: absolute;
  top: 1%;
  right: 1%;
  width: 70%;
  height: 98%;
  display: grid;
  grid-gap: 1% 1%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 3fr 5fr;
  grid-template-areas:
    'left right_top'
    'left right_bottom';
}
/* ..more for the grid*/
.grid_box {
    background-color: var(--color_black50);
    border-radius: 10px;
    color:  var(--color_light);
    text-shadow: 0 0 3px black;
    font-family: monofonto;
    font-size: 130%;
    text-align: center;
    overflow: hidden;
    backdrop-filter: blur(4px);
    padding: 0.5em 0.5em;
}
/* Labels in the shop/wardrobe screen with optional icons */
.shop_header{
    font-size: 90%;
    color:  var(--color_light);
    text-shadow: 0 0 3px black;
    font-family: monofonto;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
.shop_header::before{
    font-size: 80%;
    content: attr(data-icon_before);
    font-family: fa-solid-900;
    font-weight: 900;
}
.shop_header::after{
    font-size: 80%;
    content: attr(data-icon_after);
    font-family: fa-solid-900;
    font-weight: 900;
}

/* Scrollable container, used all over the place*/
.scrollable{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--color_scroll1) var(--color_black20);
    scrollbar-width: thin;
}

/* Placeholder for positioning elements near the centre */
.center{
    position: absolute;
    top: 4%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40%;
}

/* Placeholder for positioning elements in the left top corner */
.top_left{
    position: absolute;
    top: 6px;
    left: 6px;
}
/* Placeholder for positioning elements in the left top corner */
.status{
    position: absolute;
    bottom:0.5em;
    left: 0.5em;
    font-size: 100%;
    font-family: monofonto;
    color:   var(--color_light);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    text-shadow:
        -1px 0px 1px black,
        0px -1px 1px black,
        0px 1px 1px black,
        1px 0px 1px black;
}

/* Settings panel */
details > summary {
  cursor: pointer;
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
.rollback{
    text-align: right;
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    font-size: 125%;
    color:  var(--color_white70);
    background-color: var(--color_black50);
    padding: 8px;
    margin: 2px;
    border-radius: 10px;
    font-family: monofonto;
    backdrop-filter: blur(4px);
}

.rollback_text{
    user-select: none;
    -webkit-user-select: none;
    width: 13.5em;
    text-align: left;
    margin: 0.4em;
}
.rollback_text::before{
    position: absolute;
    content: 'ROLLBACK & HISTORY';
    font-size: 115%;
    transform: translate(0, -1.4em);
    pointer-events:none;
}

.settings{
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    font-size: 150%;
    color:  var(--color_white70);
    background-color: var(--color_black50);
    padding: 8px;
    margin: 2px;
    border-radius: 10px;
    font-family: monofonto;
    backdrop-filter: blur(4px);
}
.settings_columns{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 5px;
    text-align: center;
}

/* vertical slider*/
.vslider_container{
    transform: rotate(-90deg) translate(-100%, -50%);
    transform-origin: 0% 0%;
    display: inline-block;
    position: absolute;
    width: 11em;
}
.vslider{
    width: 90%;
}


/* Blinking text */
.blinker{
    font-size:85%;
    font-family: monofonto;
    color: white;
    animation-name: no_anim;
    animation-duration: 150ms;
    animation-iteration-count: 2
}
/* keyframes for blinking text*/
@keyframes no_anim {
}
@keyframes blink_red {
  from {color: white;}
  to {color: red;}
}
@keyframes blink_green {
  from {color: white;}
  to {color: green;}
}
@keyframes blink_pink {
  from {color: white;}
  to {color: pink;}
}

/* Font Awesome icons*/
.icon_aws{
    margin:0 5px;
    padding:0;
    display: inline-block;
    background-color: transparent;
    text-shadow: 0 0 1em black;
    border: none;
    font-size: 120%;
    color:  var(--color_white90);
    border-radius: 10px;
    font-family: fa-solid-900;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Used only for the pointing arrow on main text box*/
.arrow_anim{
    font-size: 200%;
    font-family: fa-solid-900;
    pointer-events:none;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    top:50%;
    transform: translate(0, -50%);
    right:1rem;
    color: var(--color_gray40);
    text-shadow: 0 0 3px rgba(0,0,0,0.2);
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-name: wobble;
}
@keyframes wobble {
  from {right: 1em;}
  to {right: 0.5em;}
}

/* Map marker */
.map_marker_left{
    font-size: 140%;
    position: absolute;
    color:  var(--color_light);
    text-shadow:
        1px 1px 2px black,
        -1px -1px 2px black,
        -1px 1px 2px black,
        1px -1px 2px black,
        0px 8px 8px var(--color_black70);
    font-family: monofonto;
    transform: translate(0, -100%);
    white-space: pre;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    backface-visibility: hidden;
}
.map_marker_left::before{
    position: absolute;
    content:attr(data-icon);
    font-family: fa-solid-900;
    font-weight: 900;
    transform: translate(-80%, 20%);
    pointer-events:none;
}

.map_marker_right{
    font-size: 140%;
    position: absolute;
    color:  var(--color_light);
    text-shadow:
        1px 1px 2px black,
        -1px -1px 2px black,
        -1px 1px 2px black,
        1px -1px 2px black,
        0px 8px 8px var(--color_black70);
    font-family: monofonto;
    transform: translate(-100%, -100%);
    white-space: pre;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.map_marker_right::after{
    position: absolute;
    content:attr(data-icon);
    font-family: fa-solid-900;
    font-weight: 900;
    transform: translate(-50%, 20%);
    pointer-events:none;
}
.map_marker_center{
    font-size: 140%;
    position: absolute;
    color:  var(--color_light);
    text-shadow:
        1px 1px 2px black,
        -1px -1px 2px black,
        -1px 1px 2px black,
        1px -1px 2px black,
        0px 8px 8px var(--color_black70);
    font-family: monofonto;
    transform: translate(-50%, -200%);
    white-space: pre;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.map_marker_center::after{
    width:100%;
    text-align: center;
    display: block;
    position: absolute;
    content:attr(data-icon);
    font-family: fa-solid-900;
    font-weight: 900;
    pointer-events:none;
}
/* NPC image*/
.npc_img {
    width: 25%;
    height: auto;
    position: relative;
    left: 70%;
    top: 0;
    pointer-events:none;
}

/* PC image*/
.pc_img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}
.pc_imgs {
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}

.credits{
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: monofonto;
    font-size: 280%;
    color: var(--color_light);
    text-shadow: 1px 1px 5px black;
    pointer-events:none;
    -webkit-user-select: none;
    user-select: none;
    animation-name: fade_in_out;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    opacity: 0.0;
    white-space: pre-wrap;
    word-wrap: break-word;
    }

/* Nuke all anims if user has reduce motion set*/
@media (prefers-reduced-motion: reduce) {
    @keyframes noticemesenpai{}
    @keyframes wobble {}
    @keyframes popin {}
    @keyframes rotate360 {}
    @keyframes rotate90 {}
    @keyframes scroll_y {}
    @keyframes scroll_x {}
    @keyframes drug{}
    @keyframes scroll_up_right {}
    @keyframes scroll_up_left {}
    @keyframes blink_green {}
      from {color: green;}
      to {color: green;}
    }
    @keyframes blink_pink {
      from {color: pink;}
      to {color: pink;}
    }
    @keyframes fade_in {
      from {opacity: 1.0;}
      to   {opacity: 1.0;}
    }
    @keyframes fade_out {
      from {opacity: 0.0;}
      to   {opacity: 0.0;}
    }
}