@charset "utf-8";

/* =================================================================================== //

8888888b.  8888888888 888     888 8888888888 888      .d88888b.  8888888b.  8888888888 8888888b.  
888  "Y88b 888        888     888 888        888     d88P" "Y88b 888   Y88b 888        888   Y88b 
888    888 888        888     888 888        888     888     888 888    888 888        888    888 
888    888 8888888    Y88b   d88P 8888888    888     888     888 888   d88P 8888888    888   d88P 
888    888 888         Y88b d88P  888        888     888     888 8888888P"  888        8888888P"  
888    888 888          Y88o88P   888        888     888     888 888        888        888 T88b   
888  .d88P 888           Y888P    888        888     Y88b. .d88P 888        888        888  T88b  
8888888P"  8888888888     Y8P     8888888888 88888888 "Y88888P"  888        8888888888 888   T88b 
                                                                                                  
                                                                                                  
                                                                                                  
8888888 888b    888 8888888888 .d88888b.                                                          
  888   8888b   888 888       d88P" "Y88b                                                         
  888   88888b  888 888       888     888                                                         
  888   888Y88b 888 8888888   888     888                                                         
  888   888 Y88b888 888       888     888                                                         
  888   888  Y88888 888       888     888                                                         
  888   888   Y8888 888       Y88b. .d88P                                                         
8888888 888    Y888 888        "Y88888P"                                                          

 Theme Name: PARASITE MOON
 Author URI: www.somdow.com
 Description: A Special and unique digital book.
 Author: Somdow
 Version: 1.0

 */

/* =================================================================================== //

 .d8888b.   .d8888b.   .d8888b.       8888888b.  8888888888 .d8888b.  8888888888 88888888888 
d88P  Y88b d88P  Y88b d88P  Y88b      888   Y88b 888       d88P  Y88b 888            888     
888    888 Y88b.      Y88b.           888    888 888       Y88b.      888            888     
888         "Y888b.    "Y888b.        888   d88P 8888888    "Y888b.   8888888        888     
888            "Y88b.     "Y88b.      8888888P"  888           "Y88b. 888            888     
888    888       "888       "888      888 T88b   888             "888 888            888     
Y88b  d88P Y88b  d88P Y88b  d88P      888  T88b  888       Y88b  d88P 888            888     
 "Y8888P"   "Y8888P"   "Y8888P"       888   T88b 8888888888 "Y8888P"  8888888888     888     

 // ==================================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0px;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*! NORMALIZE CSS RESET 4.1.1 */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary {
    /* 1 */
    display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
    display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
    outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
    font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
    font: inherit; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
    font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* =================================================================================== //

 .d8888b.  8888888888 888b    888 8888888888 8888888b.         d8888 888           
d88P  Y88b 888        8888b   888 888        888   Y88b       d88888 888           
888    888 888        88888b  888 888        888    888      d88P888 888           
888        8888888    888Y88b 888 8888888    888   d88P     d88P 888 888           
888  88888 888        888 Y88b888 888        8888888P"     d88P  888 888           
888    888 888        888  Y88888 888        888 T88b     d88P   888 888           
Y88b  d88P 888        888   Y8888 888        888  T88b   d8888888888 888           
 "Y8888P88 8888888888 888    Y888 8888888888 888   T88b d88P     888 88888888      

 8888888 888b    888 8888888 88888888888                                            
  888   8888b   888   888       888                                                
  888   88888b  888   888       888                                                
  888   888Y88b 888   888       888                                                
  888   888 Y88b888   888       888                                                
  888   888  Y88888   888       888                                                
  888   888   Y8888   888       888                                                
8888888 888    Y888 8888888     888                                                

.d8888b. 88888888888 Y88b   d88P 888      8888888888 .d8888b.                     
d88P  Y88b    888      Y88b d88P  888      888       d88P  Y88b                    
Y88b.         888       Y88o88P   888      888       Y88b.                         
 "Y888b.      888        Y888P    888      8888888    "Y888b.                      
    "Y88b.    888         888     888      888           "Y88b.                    
      "888    888         888     888      888             "888                    
Y88b  d88P    888         888     888      888       Y88b  d88P                    
 "Y8888P"     888         888     88888888 8888888888 "Y8888P"                     

 // ==================================================================================== */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MY GEN STYLES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html,
body {
    width: 100%;
    height: 100%;
    font-family: "calluna", Tahoma, Geneva, Verdana, sans-serif;
    color: #929292;
    /* background: #000; */
    scroll-behavior: smooth;
}

.fl {
    float: left;
}
.fr {
    float: right;
}
.clearEm {
    clear: both;
}
.clearEmL {
    clear: left;
}
.clearEmR {
    clear: right;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.SMDorangeText {
    color: #f15a25;
}

[data-coin-purse-on-hand] {
    color: yellow;
}

.orangeFontColor {
    color: #f15a25 !important;
}

.orangeBorderColor {
    border-color: #f15a25 !important;
}

.SMDWhiteText {
    color: #fff;
}

h1,
h2,
h3 {
    margin: 0px;
}

.mainCharactersThoughtsOrDirectlySpeaks {
    color: #f15a25;
}

input[type="submit"] {
    border: none;
    padding: 10px;
    border-radius: 10px;
}

.bookTextInteractiveElement {
    /* border-bottom: 4px #F15A25 dashed; */
    cursor: pointer;
    color: #f15a25 !important;
}

.noteToSelf_somethingToChangeLater {
    background: yellow;
    color: #000;
}

/* #regularPageTextContentContainer p {
    text-indent: 100px;
} */

/* =========================================================  custom scrollbar design */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb {
    background-color: #f15a25;
    /* outline: 1px solid slategrey; */
}
/* =========================================== end custom scrollbar */

/* =================================================================================== //
8888888b.        d8888 8888888b.  888    d8P  888b     d888  .d88888b.  8888888b.  8888888888 
888  "Y88b      d88888 888   Y88b 888   d8P   8888b   d8888 d88P" "Y88b 888  "Y88b 888        
888    888     d88P888 888    888 888  d8P    88888b.d88888 888     888 888    888 888        
888    888    d88P 888 888   d88P 888d88K     888Y88888P888 888     888 888    888 8888888    
888    888   d88P  888 8888888P"  8888888b    888 Y888P 888 888     888 888    888 888        
888    888  d88P   888 888 T88b   888  Y88b   888  Y8P  888 888     888 888    888 888        
888  .d88P d8888888888 888  T88b  888   Y88b  888   "   888 Y88b. .d88P 888  .d88P 888        
8888888P" d88P     888 888   T88b 888    Y88b 888       888  "Y88888P"  8888888P"  8888888888 

// ==================================================================================== */
:root {
    --SMDorange: #f15a25;
    --darkModeMainBackgroundColor: #232529;
    --darkModeSwitchTiming: 300ms;
    --darkModeTransitionEffect: ease-in-out;
    --lighterGrayForDarkmode: #444444;
}

body {
    transition: var(--darkModeSwitchTiming) var(--darkModeTransitionEffect);
}

#commentsSidebarRightColumn {
    transition: var(--darkModeSwitchTiming) var(--darkModeTransitionEffect);
}

textarea,
input,
a {
    transition: var(--darkModeSwitchTiming) var(--darkModeTransitionEffect);
}

#heroGradient {
    transition: var(--darkModeSwitchTiming) var(--darkModeTransitionEffect);
}

.darkModeBackgroundColor {
    background: var(--darkModeMainBackgroundColor) !important;
}

.darkModeForText {
    color: rgb(151, 151, 151) !important;
}

.darkModeForTextLinks:not(#chapterBlockFooterWithButtonsAndLikeActions a, #heroSectionContinueButton a) {
    color: rgb(255, 255, 255) !important;
    transition: 300ms ease-in-out;
}

.darkModeTEXTAREAS {
    background: var(--darkModeMainBackgroundColor) !important;
    color: #fff !important;
}

.heroGrandientDarkMode {
    background: linear-gradient(0deg, #232529, transparent) !important;
}

.darkmodeToggleLogoColor {
    -webkit-filter: invert();
    filter: invert();
    transition: 500ms ease-in-out; 
}

.darkmodeToggleLogoColorForLocationAndCharactersPages {
    mix-blend-mode: difference;
}

.darkmodeForMidMenu {
    background: var(--lighterGrayForDarkmode) !important;
}

/* =================================================================================== //
8888888888 .d88888b.  888b    888 88888888888 .d8888b.  
888       d88P" "Y88b 8888b   888     888    d88P  Y88b 
888       888     888 88888b  888     888    Y88b.      
8888888   888     888 888Y88b 888     888     "Y888b.   
888       888     888 888 Y88b888     888        "Y88b. 
888       888     888 888  Y88888     888          "888 
888       Y88b. .d88P 888   Y8888     888    Y88b  d88P 
888        "Y88888P"  888    Y888     888     "Y8888P"  
// ==================================================================================== */

@font-face {
    font-family: "ninjaNaruto";
    src: url("fonts/njnaruto.ttf") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "SegoeRegular";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/Segoe-UI.woff") format("woff");
}

@font-face {
    font-family: "SegoeItalic";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/Segoe-UI-Italic.woff") format("woff");
}

@font-face {
    font-family: "SegoeBold";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/Segoe-UI-Bold.woff") format("woff");
}

@font-face {
    font-family: "SegoeBoldItalic";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/Segoe-UI-Bold-Italic.woff") format("woff");
}

@font-face {
    font-family: "SegoeCondensed";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/segoe-condensed.ttf") format("truetype");
}

@font-face {
    font-family: "SegoeCondensedBold";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/segoe-condensed-bold.ttf") format("truetype");
}

@font-face {
    font-family: "SegoeLight";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/segoe-light.ttf") format("truetype");
}

@font-face {
    font-family: "calluna";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/Calluna-Regular.otf") format("opentype");
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CUSTOM FONT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BOX SIZING HACK ~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HIDDEN CSS FOR GRACEFUL DEGRADATION ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* =================================================================================== //
888    888 8888888888        d8888 8888888b.  8888888888 8888888b.  
888    888 888              d88888 888  "Y88b 888        888   Y88b 
888    888 888             d88P888 888    888 888        888    888 
8888888888 8888888        d88P 888 888    888 8888888    888   d88P 
888    888 888           d88P  888 888    888 888        8888888P"  
888    888 888          d88P   888 888    888 888        888 T88b   
888    888 888         d8888888888 888  .d88P 888        888  T88b  
888    888 8888888888 d88P     888 8888888P"  8888888888 888   T88b 
// ==================================================================================== */

#headerWrapper {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 9000;
    /* border-bottom: solid 1px #ffffff38; */
    /* -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); */
}

#headerWrapperInner {
    display: flex;
    padding: 20px;
}

#mainLogo {
    flex-basis: 10%;
    max-width: 183px;
    position: relative;
    height: 100px;
}

#mainLogo img {
    display: block;
    width: 100%;
    height: auto;
    transition: 500ms ease-in-out;
    position: absolute;
}

#mainLogo #logoText {
    display: block;
    height: auto;
    transition: 500ms ease-in-out;
}

#mainLogo #logoMoon {
    display: block;
    height: auto;
    transition: 500ms ease-in-out;
}









#mainLogoForMenuWrapper {
    display: flex;
    padding: 20px;
}


#mainLogoForMenuInnerWrapper {
    flex-basis: 10%;
    max-width: 183px;
    position: relative;
    height: 100px;
}

#mainLogoForMenuInnerWrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: 500ms ease-in-out;
    position: absolute;

}

#mainLogoForMenuInnerWrapper #logoText {
    display: block;
    height: auto;
    transition: 500ms ease-in-out;
}

#mainLogoForMenuInnerWrapper #logoMoon {
    display: block;
    height: auto;
    transition: 500ms ease-in-out;
}





















#submitForm {
    margin-top: 10px;
}

.modalWrapper input[type="text"] {
    margin-bottom: 5px;
    background: #e6e6e6;
    border: none;
    padding: 10px;
    border-radius: 5px;
    width: 80%;
}

/* =================================================================================== //

 .d8888b. 8888888 8888888b.  8888888888 888888b.         d8888 8888888b.   .d8888b.  
d88P  Y88b  888   888  "Y88b 888        888  "88b       d88888 888   Y88b d88P  Y88b 
Y88b.       888   888    888 888        888  .88P      d88P888 888    888 Y88b.      
 "Y888b.    888   888    888 8888888    8888888K.     d88P 888 888   d88P  "Y888b.   
    "Y88b.  888   888    888 888        888  "Y88b   d88P  888 8888888P"      "Y88b. 
      "888  888   888    888 888        888    888  d88P   888 888 T88b         "888 
Y88b  d88P  888   888  .d88P 888        888   d88P d8888888888 888  T88b  Y88b  d88P 
 "Y8888P" 8888888 8888888P"  8888888888 8888888P" d88P     888 888   T88b  "Y8888P"   
// ==================================================================================== */

#commentsSidebarWrapper {
    position: fixed;
    width: 500px;
    height: 100%;

    top: 0px;
    z-index: 9996;

    right: -423px;
    /* opacity: 0; */

    display: flex;

    transition: 300ms ease-in-out;

    /* these 3 rules below fix blurry fonts when this div is animated */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

#commentsSidebarLeftColumn {
    padding: 20px;
    border-left: solid 1px #ffffff38;
    background: #02020257;
    color: #fff;
}

#commentsSidebarRightColumn {
    padding: 20px;
    background: #fff;
    box-shadow: rgba(195, 195, 195, 0.55) 0px 2px 50px 0px;
    overflow-y: scroll;
    width:419px;
}

#commentsSidebarWrapper::-webkit-scrollbar {
    width: 2px;
}

#commentsSidebarWrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#commentsSidebarWrapper::-webkit-scrollbar-thumb {
    background-color: #f15a25;
    /* outline: 1px solid slategrey; */
}

.animateCommentsSidebarLeftAndRight {
    right: 0px !important;
}

/* =================================================================================== //

888b     d888 8888888 8888888b.   .d8888b.  8888888888 .d8888b.                   
8888b   d8888   888   888  "Y88b d88P  Y88b 888       d88P  Y88b                  
88888b.d88888   888   888    888 Y88b.      888       888    888                  
888Y88888P888   888   888    888  "Y888b.   8888888   888                         
888 Y888P 888   888   888    888     "Y88b. 888       888                         
888  Y8P  888   888   888    888       "888 888       888    888                  
888   "   888   888   888  .d88P Y88b  d88P 888       Y88b  d88P                  
888       888 8888888 8888888P"   "Y8888P"  8888888888 "Y8888P"                   

.d8888b.   .d88888b.  888b    888 88888888888 8888888888 888b    888 88888888888 
d88P  Y88b d88P" "Y88b 8888b   888     888     888        8888b   888     888     
888    888 888     888 88888b  888     888     888        88888b  888     888     
888        888     888 888Y88b 888     888     8888888    888Y88b 888     888     
888        888     888 888 Y88b888     888     888        888 Y88b888     888     
888    888 888     888 888  Y88888     888     888        888  Y88888     888     
Y88b  d88P Y88b. .d88P 888   Y8888     888     888        888   Y8888     888     
 "Y8888P"   "Y88888P"  888    Y888     888     8888888888 888    Y888     888     
// ==================================================================================== */

.paddingTopForChapterPages {
    margin-top: 110px;
}

#homepageLoginPageColumnWrapper {
    max-width: 320px;
    margin: 0px auto;
    text-align: center;
}

#homepageLoginPageLargeLogo {
    margin-bottom: 60px;
}

#homepageLoginPageColumnWrapper ul {
    font-size: 14px;
    margin-top: 20px;
}

#homepageLoginPageLargeLogo img {
    display: block;
    width: 100%;
    height: auto;
}

#logInButton a {
    font-size: 1em;
    background: #cd282e;
    padding: 20px;
    display: inline-block;
    border-radius: 10px;
    color: #fff;
}

#loginBoxInnerWrapper {
    width: 320px;
    background: #fff;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loginBoxInnerWrapper .homepageLoginText {
    font-size: 20px;
    color: red;
}

#loginBoxInnerWrapper img {
    display: block;
    width: 100%;
    height: auto;
}

#loginText {
    padding: 20px 20px 80px 20px;
}

.containerWidth {
    /* max-width:1200px; */
    max-width: 55%;
    margin: 0px auto;
}

.finePrint {
    font-size: 12px;
}

#regularPageTextContentContainer {
    font-family: "calluna";
    font-size: clamp(16px, 1.5vw, 40px);
}

/* #regularPageTextContentContainer p:last-child{
  margin-bottom:120px;
} */

/* #regularPageTextContentContainer:not(:first-child p){
  margin: 40px 0px 0px 0px;
} */

#featuredChapterParagraph {
    margin-top: 30px !important;
}

.regularTextChapterStylings {

    font-size: clamp(20px, 2vw, 40px);
    font-family: "calluna", Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 20px;
    
}

.mixedMediaChapterIntroBoxLeftColumn .regularTextChapterStylings {

    font-size: clamp(20px, 8.5vw, 8.5vw);
    line-height: .8;

}

#QTEtimer{
    margin-left: auto;
    margin-right: 6px;
    font-size:40px;
}

#chapterIntroMediaBox #introPageLargeTitle {
    position: absolute;
    z-index: 9001;
    left: 4%;
    top: 40%;
    font-size: 6vw;
    color: #fff;
    font-family: "calluna", Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 20px;
}

.regularPageCenterColumnWrapper {
    padding-bottom: 200px;
    padding-top: 3%;
    position: relative;
}

.mixedMediaChapterIntroBoxWrapper {
    width: 100%;
    height: 100%;
    /* background:#e6e6e6e1; */
    /* display:none; */
    z-index: 9997;
}

#mixedMediaChapterFeaturedBG {
    width: 100%;
    height: 100%;
}
#mixedMediaChapterFeaturedBG img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0px auto;
}

#mixedMediaChapterInnerTextAndCharacterImageWrapper {
    position: absolute;
    /* width: 90%; */
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 50%;
    transform: translate(-50%);
    bottom: 0px;
}

.mixedMediaChapterIntroBoxInteriorWrapper {
    width: 100%;
    height: 100%;
    /* background:white; */
    /* box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 10px 0px; */
    /* border-left: solid 8px #F15A25; */
    position: relative;

    transition: 300ms ease-in-out;
}

.mixedMediaModalChapterListing span:not(:first-child span) {
    font-size: 1.5vw;
}

.mixedMediaModalChapterListing a {
    flex-basis: 10%;
}

[data-mixed-media-icon] {
    cursor: pointer;
    padding: 20px 0px;
}

.chapterListingAudioIcon {
    font-size: 40px;
}
sup {
    top: -0.9;
}

.moreInfoModalInteriorWrapper {
    position: fixed;
    border-radius: 20px;
    overflow: hidden;
    margin: 0px auto;
    background: #fff;
    box-shadow: rgb(0 0 0 / 18%) 0px 2px 10px 0px;
    border: solid thin #dbdbdb57;
    width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.moreInfoModalInteriorWrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.moreInfoModalInteriorWrapper p {
    padding: 10px;
}

.closeMoreInfoModalBTN {
    position: absolute;
    right: 13px;
    top: 15px;
    padding: 10px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    color: #f15a25;
    font-weight: bold;
}

.characterCardWrapper {
    width: 100%;
    height: 100%;
    background: #e6e6e6ab;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9997;
}

#chapterBlockFooterWithButtonsAndLikeActions {
    display: flex;
    margin: 80px auto 10px auto;
    gap: 10px;
}

#chapterBlockFooterWithButtonsAndLikeActions i {
    color: #f15a25;
    margin-top: 15px;
    margin-right: 15px;
    font-size: 27px;
    cursor: pointer;
}

#modalAndPopupsBackground {
    position: fixed;
    background: #19191982;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 9991;
    top: 0px;
    left: 0px;
}

.cardCloseButton {
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
}

#commentsSidebarHeader {
    display: flex;
}

#commentsSidebarHeader h3 {
    flex-basis: 95%;
}

.cardUsername {
    font-weight: bold;
}

.userCardWrapper {
    margin-top: 20px;
    border-bottom: thin solid #e6e6e6;
    padding-bottom: 10px;
}

.postCommentWrapper {
    margin-top: 30px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 10px 0px;
    text-align: center;
    padding: 10px;
}

.postCommentWrapper textarea {
    border: none;
    width: 90%;
    overflow: auto;
    outline: none;
    resize: none;
    box-shadow: none;
}

.chapterListingText {
    display: flex;
    gap: 6px;
    align-items: center;
}

.chapterListingText sup {
    flex-basis: 3%;
    padding: 4px;
}

.chapterListingText a {
    flex-basis: 40%;
    justify-content: left;
}

.chapterListingText a:visited {
    color: white;
}

#playStatus {
    font-size: 12px;
}

#textAndAudioHighlightsSection {
    font-size:clamp(16px, 1.2vw, 40px);
    border-left: #f15a25 dotted 3px;
    padding-left: 10px;
    margin-left: 50px ;
}

.textAndAudioHighlightsSectionForCharacterAndLocationPages{   
    border-left: #f15a25 dotted 2px;
    border-right: #f15a25 dotted 2px;
    padding: 0px 10px;
}

.orangeWordHighlight {
    background: #f15a25;
    color: #fff;
    padding: 4px !important;
}

.mixedMediachapterBoxRightColumnTextColors {
    color: #afafaf;
    transition: 300ms ease-in-out;
}

.previousNextButtonStyling {
    background: #c0c0c0;
    padding: 10px 30px;
    border-radius: 10px;
    color: #000;
    font-family: "roboto";
    /* margin-top: 120px; */
    cursor: pointer;
}

#chaptersIcon,
#commentsFooterButton,
#settingsMenuButton,
#darkModeButton {
    cursor: pointer;
    color: #000;
}

#currentChapter {
    position: fixed;
    bottom: 35px;
    left: 30px;
    z-index: 9990;
    color: #818181;
    font-size: 13px;
}

/* locations page stylings */
#locationsFromTheBook {
    display: inline-flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.bookLocations {
    flex-basis: 24%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.bookLocations img {
    display: block;
    width: 100%;
    height: auto;
}

#narratorAvatarAndControls {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px #a9a5a5 solid;
    margin-right: 10px;
    background-color: #000;
    position: relative;
}

#narratorAvatarAndControls img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0px auto;
    opacity: 0.6;
}

/* confetti effect css */
canvas {
    /* border: 2px solid black !important; */
    /* background: red !important; */
    /* width:250px !important;
                  height: 250px !important; */
    position: fixed;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    z-index: 9999;
}

#leftColumn {
    max-width: 400px;
    min-width: 400px;
    background-position: center center;
    background-size: cover;
    position: relative;
    /* overflow: hidden; */
    background-color: #000;
}

#leftColumnText {
    position: absolute;
    width: 80%;
    z-index: 8000;
    left: 50%;
    color: #fff;
    bottom: 4%;
    transform: translate(-50%, -50%);
}

#leftColumnText p {
    font-size: 1.2rem;
}

#leftColumnFeaturedBackgroundImage img {
    width: 100%;
    display: block;
}

#leftColumnText h1 {
    font-size: 36px;
    /* font-family: 'Playfair Display', serif; */
    font-size: 2.1em;
    line-height: 1.3em;
}

#leftColumnCharacter {
    width: 100%;
}

#leftColumnCharacter img {
    display: block;
    width: 125%;
    position: absolute;
    z-index: 9900;
    bottom: 10%;
    left: -13%;
}

#singleColumnLayout {
    max-width: 1800px;
    margin: 0px auto;
    padding: 124px 10px 200px 10px;
}
#rightColumnWithNoLeftColumn {
    flex-basis: 80%;
    margin: 0px auto;
}

.settingsGroup {
    margin-bottom: 60px;
}

.chapter1InteriorPageFadedBG {
    background: url("images/chapter1-interior-page-faded-bg.png") no-repeat
        center top;
}

.houseLivingroomFadedBG {
    background: url("images/house-livingroom-faded-bg.png") no-repeat center top;
}

.eastoniaMarketFadedBG {
    background: url("images/eastonia-market-faded-bg.png") no-repeat center top;
}

.eastoniaWaterFadedBG {
    background: url("images/eastonia-water-faded-bg.png") no-repeat center top;
}

.southlandForestFadedBG {
    background: url("images/southland-forest-faded-bg.png") no-repeat center top;
}

/*

8888888b.  8888888 .d8888b.  888    888 88888888888                       
888   Y88b   888  d88P  Y88b 888    888     888                           
888    888   888  888    888 888    888     888                           
888   d88P   888  888        8888888888     888                           
8888888P"    888  888  88888 888    888     888                           
888 T88b     888  888    888 888    888     888                           
888  T88b    888  Y88b  d88P 888    888     888                           
888   T88b 8888888 "Y8888P88 888    888     888                           
                                                                          
 .d8888b. 8888888 8888888b.  8888888888 888888b.         d8888 8888888b.  
d88P  Y88b  888   888  "Y88b 888        888  "88b       d88888 888   Y88b 
Y88b.       888   888    888 888        888  .88P      d88P888 888    888 
 "Y888b.    888   888    888 8888888    8888888K.     d88P 888 888   d88P 
    "Y88b.  888   888    888 888        888  "Y88b   d88P  888 8888888P"  
      "888  888   888    888 888        888    888  d88P   888 888 T88b   
Y88b  d88P  888   888  .d88P 888        888   d88P d8888888888 888  T88b  
 "Y8888P" 8888888 8888888P"  8888888888 8888888P" d88P     888 888   T88b 
                                                                          
8888888 .d8888b.   .d88888b.  888b    888  .d8888b.                       
  888  d88P  Y88b d88P" "Y88b 8888b   888 d88P  Y88b                      
  888  888    888 888     888 88888b  888 Y88b.                           
  888  888        888     888 888Y88b 888  "Y888b.                        
  888  888        888     888 888 Y88b888     "Y88b.                      
  888  888    888 888     888 888  Y88888       "888                      
  888  Y88b  d88P Y88b. .d88P 888   Y8888 Y88b  d88P                      
8888888 "Y8888P"   "Y88888P"  888    Y888  "Y8888P"                       

*/

#bookmarkButton,
#fullscreenButton,
#teamMembers,
#maps,
#signPost,
#coinPurseWrapper,
#healthPotion,
#avatarIcon {
    /* position: initial; */
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;

    /* color: #fff !important; */
}



#bookmarkButton a,
#fullscreenButton a,
#teamMembers a,
#maps a,
#signPost a,
#coinPurseWrapper a,
#healthPotion a,
#avatarIcon a {
    color: #fff !important;
}

#avatarIcon {
    margin-right: 140px !important;
}

#bookmarkButton {
    font-size: 35px;
}

#healthPotion {
    font-size: 30px;
    opacity: 0.3;
}

#healthPotion .fa-vial {
    margin-left: 4px;
}

#coinPurseWrapper {
    opacity: 0.3;
}

#coinPurseWrapper .currentWalletTotal {
    margin-left: 2px;
}

#coinPurseWrapper .rightSidebarIconFontsize {
    font-size: 28px;
}

.currentWalletTotal {
    color: yellow !important;
    z-index: 99999;
    right: -2px;
    font-size: 1.2rem;
    top: 2.3rem;
    text-align: center;
    width: 36px;
}

.potionTotal {
    color: yellow !important;
    z-index: 99999;
    right: -2px;
    font-size: 1.2rem;
    top: 2.3rem;
    text-align: center;
    width: 36px;
}

#signPost a {
    color: #fff;
}

.rightSidebarIconFontsize {
    font-size: 32px;
}

#mapWrapper {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    overflow: hidden;
    z-index: 9911;
    background-color: #00000094;
    width: 100%;
    height: 100%;
}

#mapCloseButton {
    position: absolute;
    z-index: 9002;
    right: 20px;
    top: 20px;
    /* background-color: #000; */
    border-radius: 50%;
    padding: 20px;
    cursor: pointer;
    color: #fff;
}

#mapInnerWrapper {
    position: absolute;
    max-width: 1502px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9001;
}

#charactersFromTheBook {
    display: inline-flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.castMember {
    flex-basis: 14%;
    background-color: rgb(2, 2, 2);
    overflow: hidden;
    position: relative;
    color: #a3a3a3;
}

.castMember img {
    display: block;
    width: 100%;
    height: auto;
}

.castMemberBlockCover {
    display: block;
    width: 100%;
    height: 100%;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.castMemberCovered {
    -webkit-filter: grayscale(100%) blur(8px);
    filter: grayscale(100%) blur(8px);
    -webkit-clip-path: inset(0px);
    clip-path: inset(0px);
}

.castMemberCoveredLock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background: #151414a8;
    border-radius: 50%;
    z-index: 999;
}

#mainSiteWrapper {
    text-align: justify;
    line-height: 1.5;
    /* width: 100%;
  height: 100%; */
}

#mainSiteWrapper p {
    opacity: 0;
    font-family: "calluna";
    max-width: 90%;
    position: relative;
    margin: 0px auto;
    bottom: -50px;
    transition: all 2s ease-out;
}

#mainSiteWrapper a {
    color: #000;
}

.show {
    opacity: 1 !important;
    bottom: 0 !important;
}

#mixedMediaChapterInnerTextAndCharacterImageWrapper {
    bottom: -50px;
    opacity: 0;
    transition: all 1s ease-out;
}

#commentsSidebarInnerWrapper {
    width: 40px;
}

.southlandForestFeaturedBgBlurred {
    background: url("images/southland-forest-SAMPLE-blurred.webp");
    background-position: top;
    background-size: cover;
}

.eastoniaPageFeaturedBG {
    background: url("images/eastonia-sample.webp");
    background-position: top;
    background-size: cover;
}

.southlandForestPageFeaturedBG {
    background: url("images/southland-forest-SAMPLE.webp");
    background-position: top;
    background-size: cover;
}

.avaloniaPageBlurredBG {
    background: url("images/avalonia-background-blurred.webp");
    background-position: top;
    background-size: cover;
}

.avaloniaPageFeaturedBG {
    background: url("images/avalonia-sample.webp");
    background-position: top;
    background-size: cover;
}

.chapter2Page1featureddBG {
    background: url("images/bg3d-sample-blurred.webp");
    background-position: top;
    background-size: cover;
}

.chapter1featureddBG {
    background: url("images/chapter-one-bg-blurred.webp");
    background-position: top;
    background-size: cover;
}

.chapter2featureddBG {
    background: url("images/chapter-two-featured-image.webp");
    background-position: top;
    background-size: cover;
}

.chapter2featuredBlurredBG {
    background: url("images/chapter-two-featured-image-blurred.webp");
    background-position: top;
    background-size: cover;
}

.queenVivienneBgBlurred {
    background: url("images/queen-vivienne-bg-blurred.webp");
    background-position: top;
    background-size: cover;
}

.theWretchedBackground {
    background: url("images/the-wretched-background-blurred.webp");
    background-position: top;
    background-size: cover;
}

.chapter3featureddBG {
    background: url("images/chapter-three-featured-image.webp");
    background-position: top;
    background-size: cover;
}

.chapterWinterBG {
    background: url("images/winter-bg.webp");
    background-position: top;
    background-size: cover;
}

.chapter4featureddBG {
    background: url("images/chapter-four-featured-image.webp");
    background-position: top;
    background-size: cover;
}

.thumbnailTitle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    text-align: center;
    transition: top 0.3s ease;
}

.thumbnailWrapper {
    position: relative; /* Ensure position relative for child absolute positioning */
    transition: top 0.3s ease; /* Add transition for smooth movement */
    background-color: rgb(0, 0, 0);
}



.chapter2HeroBGimageBlurred {
    background: url("images/house-by-the-hill-blurred.webp");
    background-position: top;
    background-size: cover;
}

/* The VC coin options and wrappers on chapter 1 */
.bookCurrency {
    color: orange !important;
}

/* =================================================================================== //
8888888888 .d88888b.   .d88888b. 88888888888 8888888888 8888888b.  
888       d88P" "Y88b d88P" "Y88b    888     888        888   Y88b 
888       888     888 888     888    888     888        888    888 
8888888   888     888 888     888    888     8888888    888   d88P 
888       888     888 888     888    888     888        8888888P"  
888       888     888 888     888    888     888        888 T88b   
888       Y88b. .d88P Y88b. .d88P    888     888        888  T88b  
888        "Y88888P"   "Y88888P"     888     8888888888 888   T88b 
// ==================================================================================== */

#footerWrapper {
    position: fixed;
    bottom: 20px;
    width: 100%;
    z-index: 9996;
}

#footerWrapperNavInnerWrapper {
    display: flex;
    padding: 10px;
    width: 320px;
    /* border-top: #b3b3b3 5px solid; */
    border-radius: 20px;
    margin: 0px auto;
    background: #f15a25;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 10px 0px;
    border: solid thin #b4b4b473;
}

#footerWrapperNavInnerWrapper div {
    flex-basis: 25%;
    text-align: center;
    padding: 5px 0px 0px 0px;
}

#footerWrapperNavInnerWrapper a {
    color: #000;
}

#settingsBoxWrapperModal {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #000 30%, transparent 75%) !important;
    position: fixed;
    z-index: 9996;
    left: 0%;
    transition: 300ms ease-in-out;
    opacity: 0;
    display: none;
}

.settingsBoxWrapperModalAnimated {
    opacity: 1 !important;
    transition: 150ms ease-in-out;
}

#settingsBoxWrapperModalInterior #mainLogoForMenuWrapper {
    margin-bottom: 3%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0 3px;
}

#settingsBoxWrapperModalInterior{
    /* margin-top:10%; */
    padding-left:20px;
}

#settingsBoxWrapperModalInterior a{
    font-size:1.8rem;
    text-transform: uppercase;
    padding: 10px 0px 10px 0px;
    display: inline-block;
    transition: color 0.4s ease-in-out;
}




#sharingIsCaring *, #connectWithUs *, #sharingIsCaring a,
#connectWithUs a {
    color:#fff !important;
    text-decoration: line-through;
    
}

#settingsBoxWrapperModal a {
    color: #fff;
}

#fadeOutForNow{
   display:none;
}

#settingsBoxHeader p {
    margin-top: 2px;
    display: flex;
    align-items: center; /* Vertically center the text inside the p tag */
}

#settingsBoxHeader span {
    padding: 20px 0px;
}

#settingsBoxHeader * {
    flex-basis: 50%;
}

#accountSettingsWrapper a{
    display: inline-block !important;
}

.menuBoxCloseButton {
    text-align: right;
}

.settingsBoxLabel {
    color: #747474;
    text-transform: uppercase;
    font-size: 16px;
}

#charactersAndLocationPagesMenuOptions, #sharingIsCaring , #connectWithUs {
    margin-bottom:3%;
}

.menuBoxCloseButton {
    cursor: pointer;
}

#userNotificationWrapper {
    display: none;
}

#userNotificationInnerWrapper {
    display: flex;
    background-color: #fbb3b8;
    color: #000;
    width: 316px;
    position: absolute;
    left: 50%;
    bottom: 25%;
    transform: translate(-50%, -50%);
    padding: 26px 10px 20px 10px;
    border-radius: 4px;
    border-bottom: solid 2px #a07b7e;
    gap: 20px;
    /* transition: all 0.8s ease-in-out; */
    opacity: 0;
    transition: 300ms ease-in-out;
    z-index: 9996;
}

.userNotificationAnimate {
    opacity: 1 !important;
    bottom: 67% !important;
    /* transition: all 0.8s ease-in-out; */
    transition: 150ms ease-in-out;
}

/* =================================================================================== //
       d8888 8888888888 8888888888 8888888 888b    888 8888888 88888888888 Y88b   d88P 
      d88888 888        888          888   8888b   888   888       888      Y88b d88P  
     d88P888 888        888          888   88888b  888   888       888       Y88o88P   
    d88P 888 8888888    8888888      888   888Y88b 888   888       888        Y888P    
   d88P  888 888        888          888   888 Y88b888   888       888         888     
  d88P   888 888        888          888   888  Y88888   888       888         888     
 d8888888888 888        888          888   888   Y8888   888       888         888     
d88P     888 888        888        8888888 888    Y888 8888888     888         888 
// ==================================================================================== */

@-webkit-keyframes affinity-negative {
    0% {
        top: 50%;
        opacity: 0;
    }

    50% {
        top: 55%;
        opacity: 1;
    }

    100% {
        top: 60%;
        opacity: 0;
    }
}
@keyframes affinity-negative {
    0% {
        top: 50%;
        opacity: 0;
    }

    50% {
        top: 55%;
        opacity: 1;
    }

    100% {
        top: 60%;
        opacity: 0;
    }
}

@-webkit-keyframes affinity-positive {
    0% {
        top: 50%;
        opacity: 0;
    }

    50% {
        top: 45%;
        opacity: 1;
    }

    100% {
        top: 40%;
        opacity: 0;
    }
}

@keyframes affinity-positive {
    0% {
        top: 50%;
        opacity: 0;
    }

    50% {
        top: 45%;
        opacity: 1;
    }

    100% {
        top: 40%;
        opacity: 0;
    }
}

#affinityIconWrapper {
    position: fixed;
    top: 50%;
    right: 120px;
    z-index: 9999;
    width: 160px;
    /* overflow: hidden; */
    transform: translateY(-50%);
    /* transition: 1500ms ease-in-out;   */
    opacity: 0;

    pointer-events: none;
}

#affinityIconWrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.affinityIcon-positive {
    -webkit-animation: affinity-positive 3000ms linear;
    animation: affinity-positive 3000ms linear;
}

.affinityIcon-negative {
    -webkit-animation: affinity-negative 3000ms linear;
    animation: affinity-negative 3000ms linear;
}

/* =================================================================================== //
8888888b.  8888888888 .d8888b. 8888888 .d8888b. 8888888 .d88888b.  888b    888  .d8888b.  
888  "Y88b 888       d88P  Y88b  888  d88P  Y88b  888  d88P" "Y88b 8888b   888 d88P  Y88b 
888    888 888       888    888  888  Y88b.       888  888     888 88888b  888 Y88b.      
888    888 8888888   888         888   "Y888b.    888  888     888 888Y88b 888  "Y888b.   
888    888 888       888         888      "Y88b.  888  888     888 888 Y88b888     "Y88b. 
888    888 888       888    888  888        "888  888  888     888 888  Y88888       "888 
888  .d88P 888       Y88b  d88P  888  Y88b  d88P  888  Y88b. .d88P 888   Y8888 Y88b  d88P 
8888888P"  8888888888 "Y8888P" 8888888 "Y8888P" 8888888 "Y88888P"  888    Y888  "Y8888P"  
// ==================================================================================== */
/* CHAPTER 3 PAGE 4 DECISION */
[data-chapter3-page4-post-decision],
[data-chapter3-page4-decision-response],
[data-chapter3-page4-post-decision-navigation] {
    display: none;
}

/* CHAPTER 3 PAGE 5 DECISION */
[data-chapter3-page5-post-decision] {
    display: none;
}

/* CHAPTER 4 PAGE 3 INTERACTION */
[data-ch4pg3-post-decision-message] {
    display: none;
}

/* CHAPTER 1 PAGE 1 INTERACTION */
[data-show-after-ch1pg1-decision] {
    display: none;
}

/* CHAPTER 1 PAGE 2 INTERACTION */
[data-show-after-ch1pg2-decision] {
    display: none;
}

/* CHAPTER 2 PAGE 3 INTERACTION */
[data-show-after-ch2pg3-decision] {
    display: none;
}

/* CHAPTER 1 PAGE 1 INTERACTION */
[data-show-after-ch3pg3-decision] {
    display: none;
}

/* =================================================================================== //
8888888b.   .d88888b.  888       888 888b    888             
888  "Y88b d88P" "Y88b 888   o   888 8888b   888             
888    888 888     888 888  d8b  888 88888b  888             
888    888 888     888 888 d888b 888 888Y88b 888             
888    888 888     888 888d88888b888 888 Y88b888             
888    888 888     888 88888P Y88888 888  Y88888             
888  .d88P Y88b. .d88P 8888P   Y8888 888   Y8888             
8888888P"   "Y88888P"  888P     Y888 888    Y888             
                                                             
                                                             
                                                             
       d8888 8888888b.  8888888b.   .d88888b.  888       888 
      d88888 888   Y88b 888   Y88b d88P" "Y88b 888   o   888 
     d88P888 888    888 888    888 888     888 888  d8b  888 
    d88P 888 888   d88P 888   d88P 888     888 888 d888b 888 
   d88P  888 8888888P"  8888888P"  888     888 888d88888b888 
  d88P   888 888 T88b   888 T88b   888     888 88888P Y88888 
 d8888888888 888  T88b  888  T88b  Y88b. .d88P 8888P   Y8888 
d88P     888 888   T88b 888   T88b  "Y88888P"  888P     Y888 // ==================================================================================== */

#downArrowWrapper {
    position: absolute;
    z-index: 9990;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    cursor: pointer;
    -webkit-animation: upAndDown 1.5s infinite alternate;
    animation: upAndDown 1.5s infinite alternate;
}

@-webkit-keyframes upAndDown {
    0% {
        transform: translateY(0) translateX(-50%);
    }
    100% {
        transform: translateY(20px) translateX(-50%);
    }
}

@keyframes upAndDown {
    0% {
        transform: translateY(0) translateX(-50%);
    }
    100% {
        transform: translateY(20px) translateX(-50%);
    }
}

#downArrowWrapper img {
    display: block;
    margin: 0px auto;
}

#downArrowWrapper span {
    display: block;
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
}

/* =================================================================================== //
       d8888  .d8888b.  888    888 8888888 8888888888 888     888       
      d88888 d88P  Y88b 888    888   888   888        888     888       
     d88P888 888    888 888    888   888   888        888     888       
    d88P 888 888        8888888888   888   8888888    Y88b   d88P       
   d88P  888 888        888    888   888   888         Y88b d88P        
  d88P   888 888    888 888    888   888   888          Y88o88P  888888 
 d8888888888 Y88b  d88P 888    888   888   888           Y888P          
d88P     888  "Y8888P"  888    888 8888888 8888888888     Y8P           
                                                                        
                                                                        
                                                                        
888b     d888 8888888888 888b    888 88888888888 .d8888b.               
8888b   d8888 888        8888b   888     888    d88P  Y88b              
88888b.d88888 888        88888b  888     888    Y88b.                   
888Y88888P888 8888888    888Y88b 888     888     "Y888b.                
888 Y888P 888 888        888 Y88b888     888        "Y88b.              
888  Y8P  888 888        888  Y88888     888          "888              
888   "   888 888        888   Y8888     888    Y88b  d88P              
888       888 8888888888 888    Y888     888     "Y8888P"               
                                                                        
                                                                        
                                                                        
888888b.         d8888 8888888b.   .d8888b.  8888888888                 
888  "88b       d88888 888  "Y88b d88P  Y88b 888                        
888  .88P      d88P888 888    888 888    888 888                        
8888888K.     d88P 888 888    888 888        8888888                    
888  "Y88b   d88P  888 888    888 888  88888 888                        
888    888  d88P   888 888    888 888    888 888                        
888   d88P d8888888888 888  .d88P Y88b  d88P 888                        
8888888P" d88P     888 8888888P"   "Y8888P88 8888888888 
// ==================================================================================== */
#achievementsBadgeWrapper {
    width: 620px;
    background: #000;
    color: #fff;
    display: flex;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%, -50%);
    z-index: 9991;
    height: 102px;
    overflow: hidden;
    opacity: 0;
    /* display:none; */
    transition: 300ms ease-in-out;
    position: fixed;
    box-shadow: 0 0 10px 5px #f15a254d;
    pointer-events: none;
}

#achievementFadeAwayTimer {
    color: #f15a25;
    font-weight: bold;
}

.achievementsBadgeAnimated {
    /* display:block; */
    bottom: 8% !important;
    opacity: 1 !important;
    transition: 150ms ease-in-out;
}

#achievementsBadgeImage {
    flex-basis: 25%;
    background-color: red;
}
#achievementsBadgeText {
    flex-basis: 75%;
}

#achievementsBadgeText h2 {
    font-size: 18px;
}

#achievementsBadgeWrapper h2 {
    padding: 10px;
}

#achievementsBadgeWrapper p {
    padding-left: 10px;
}

/* =================================================================================== //
888    888 8888888888        d8888 888    88888888888 888    888                 
888    888 888              d88888 888        888     888    888                 
888    888 888             d88P888 888        888     888    888                 
8888888888 8888888        d88P 888 888        888     8888888888                 
888    888 888           d88P  888 888        888     888    888                 
888    888 888          d88P   888 888        888     888    888                 
888    888 888         d8888888888 888        888     888    888                 
888    888 8888888888 d88P     888 88888888   888     888    888                 
                                                                                 
                                                                                 
                                                                                 
8888888888 8888888888        d8888 88888888888 888     888 8888888b.  8888888888 
888        888              d88888     888     888     888 888   Y88b 888        
888        888             d88P888     888     888     888 888    888 888        
8888888    8888888        d88P 888     888     888     888 888   d88P 8888888    
888        888           d88P  888     888     888     888 8888888P"  888        
888        888          d88P   888     888     888     888 888 T88b   888        
888        888         d8888888888     888     Y88b. .d88P 888  T88b  888        
888        8888888888 d88P     888     888      "Y88888P"  888   T88b 8888888888
// ==================================================================================== */

#healthIndicatorRED {
    display: none;
    position: fixed;
    box-shadow: 0px 0px 35px 10px #f00 inset;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;
    top: 0px;
    -webkit-animation: pulsateRed 1.6s infinite;
    animation: pulsateRed 1.6s infinite;

    /* transition: all 0.8s ease-in-out; */
}

@-webkit-keyframes pulsateRed {
    0% {
        box-shadow: 0px 0px 35px 0px #f00 inset;
    }
    50% {
        box-shadow: 0px 0px 40px 20px #f00 inset;
        background: #ff001733;
    }
    100% {
        box-shadow: 0px 0px 35px 0px #f00 inset;
    }
}

@keyframes pulsateRed {
    0% {
        box-shadow: 0px 0px 35px 0px #f00 inset;
    }
    50% {
        box-shadow: 0px 0px 40px 20px #f00 inset;
        background: #ff001733;
    }
    100% {
        box-shadow: 0px 0px 35px 0px #f00 inset;
    }
}

/* TESTING HEALTH MEDIUM HEALTH INDICATOR */
#healthIndicatorYELLOW {
    position: fixed;
    display: none;
    top: 0px;
    box-shadow: 0px 0px 35px 10px rgb(255, 238, 0) inset;
    width: 100%;
    height: 100%;
    z-index: 9998;
    pointer-events: none;

    -webkit-animation: pulsateYellow 2.5s infinite;

    animation: pulsateYellow 2.5s infinite;
}

@-webkit-keyframes pulsateYellow {
    0% {
        box-shadow: 0px 0px 35px 0px rgb(255, 238, 0) inset;
    }
    50% {
        box-shadow: 0px 0px 40px 20px rgb(112, 108, 53) inset;
        background: #eeff0008;
    }
    100% {
        box-shadow: 0px 0px 35px 0px rgb(255, 238, 0) inset;
    }
}

@keyframes pulsateYellow {
    0% {
        box-shadow: 0px 0px 35px 0px rgb(255, 238, 0) inset;
    }
    50% {
        box-shadow: 0px 0px 40px 20px rgb(255, 238, 0) inset;
        background: #eeff0008;
    }
    100% {
        box-shadow: 0px 0px 35px 0px rgb(255, 238, 0) inset;
    }
}

/* =================================================================================== //
8888888b.  8888888b.  8888888888                                 
888   Y88b 888   Y88b 888                                        
888    888 888    888 888                                        
888   d88P 888   d88P 8888888                                    
8888888P"  8888888P"  888                                        
888        888 T88b   888      888888                            
888        888  T88b  888                                        
888        888   T88b 8888888888                                 
                                                                 
                                                                 
                                                                 
888      .d88888b.        d8888 8888888b.  8888888888 8888888b.  
888     d88P" "Y88b      d88888 888  "Y88b 888        888   Y88b 
888     888     888     d88P888 888    888 888        888    888 
888     888     888    d88P 888 888    888 8888888    888   d88P 
888     888     888   d88P  888 888    888 888        8888888P"  
888     888     888  d88P   888 888    888 888        888 T88b   
888     Y88b. .d88P d8888888888 888  .d88P 888        888  T88b  
88888888 "Y88888P" d88P     888 8888888P"  8888888888 888   T88b 
// ==================================================================================== */
.preloaderW {
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    z-index: 9999;
    transition: all 0.8s ease-in-out;
    top: 0px;
    pointer-events: none;
    opacity: 0;
}

#preloaderInnerWrapper {
    /* width: 64px;
    height: 64px; */
    position: absolute;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: 300ms ease-in-out;
    pointer-events: none;
}

.preloaderOpacity{
    opacity: 1 !important;
}



/* =================================================================================== //
888b    888        d8888 8888888b.  8888888b.         d8888 88888888888 .d88888b.  8888888b.  
8888b   888       d88888 888   Y88b 888   Y88b       d88888     888    d88P" "Y88b 888   Y88b 
88888b  888      d88P888 888    888 888    888      d88P888     888    888     888 888    888 
888Y88b 888     d88P 888 888   d88P 888   d88P     d88P 888     888    888     888 888   d88P 
888 Y88b888    d88P  888 8888888P"  8888888P"     d88P  888     888    888     888 8888888P"  
888  Y88888   d88P   888 888 T88b   888 T88b     d88P   888     888    888     888 888 T88b   
888   Y8888  d8888888888 888  T88b  888  T88b   d8888888888     888    Y88b. .d88P 888  T88b  
888    Y888 d88P     888 888   T88b 888   T88b d88P     888     888     "Y88888P"  888   T88b 
                                                                                            
888888b.         d8888 8888888b.                                                              
888  "88b       d88888 888   Y88b                                                             
888  .88P      d88P888 888    888                                                             
8888888K.     d88P 888 888   d88P                                                             
888  "Y88b   d88P  888 8888888P"                                                              
888    888  d88P   888 888 T88b                                                               
888   d88P d8888888888 888  T88b                                                              
8888888P" d88P     888 888   T88b 
// ==================================================================================== */
#mediaAudioInteractionBar {
    display: flex;
    align-items: center;
    padding: 10px;
    background: url("images/narrator-bar-bg.png") no-repeat #1c1e21;
    border-radius: 16px;
    height: 44px;
    position: relative;
    max-width: 90%;
    font-size: 20px;
    margin: 0px auto 56px 50px;
    cursor: pointer;
    color: #fff;
    border: thin #ffffff73 dotted;

    transition: all 0.3s ease; /* Add a transition for smooth changes */
}

#narratorAvatar {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 9002;
    display: block;
    width: 120px;
    height: auto;
}

#heroSectionCharacterLocationPageButton {
    margin-left: 110px;
    margin-top: 5px;
    cursor: pointer;
}

#heroSectionCharacterLocationPageDuration {
    margin-top: 6px;
    margin-left: auto;
}

#mediaAudioInteractionBar #mediaAudioInteractionBar {
    margin: 21px auto 40px 0px;
}

#mediaAudioInteractionBar .material-symbols-outlined {
    font-size: 40px;
    font-weight: bold;
}

/*These styles are for the narrator bar inside of hero pages(chapter starter pages like chapter1page1, chapter2page1 etc) */
.mixedMediaChapterIntroBoxLeftColumn #mediaAudioInteractionBar {
    max-width: 468px;
    min-width: 320px;
    margin: 30px auto 30px 0px;
}

.textToAudioButtonForHighlight {
    cursor: pointer;
}

.centerMediaBarSTICKYonScroll {
    position: -webkit-sticky;
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
    z-index: 9999;
    display: block;
}

.generalAppChoiceButtonsWrapper {
    display: flex;
    align-items: center;
    padding: 30px 20px 30px 20px;
    border-radius: 16px;
    width: 100%;
    position: relative;
    font-size: 20px;
    margin: 0px auto;
    cursor: pointer;
    color: #fff;
    border: thin #ffffff73 dotted;
    transition: all 0.3s ease; /* Add a transition for smooth changes */
    background-color: #1c1e21;
}

.generalChapterButtonStylings {
    display: flex;
    align-items: center;
    padding: 30px 20px 30px 20px;
    border-radius: 16px;
    width: 320px;
    position: relative;
    font-size: 20px;
    margin: 0px auto;
    cursor: pointer;
    color: #fff;
    border: thin #ffffff73 dotted;
    transition: all 0.3s ease; /* Add a transition for smooth changes */
    background-color: #1c1e21;
}

.hideForMobileOnly{
    display: none;
}

.showAfterRenataHidesFace{
    display: none;
}

.showPostRenataSawSomethingMove{
    display:none;
}

.appChoiceButtonsWrapperPeekThroughDoor {
    background: url("images/renata-looking-through-door-hole.png") no-repeat #1c1e21 center right;
}

.appChoiceButtonsWrapperStepsAwayFromDoor {
    background: url("images/renata-steps-away-from-door.jpg") no-repeat #1c1e21 center right;
}

.renata-hides-in-bushesBtnBG {
    background: url("images/renata-hides-in-bushes.png") no-repeat #1c1e21 center right;
}

.renata-face-hidden-by-bushesBtnBG {
    background: url("images/renata-face-behind-bushes.png") no-repeat #1c1e21 center right;
}

.ch2pg3RenataOpensTheDoorBtnBG {
    background: url("images/renata-opening-the-door.png") no-repeat #1c1e21 center right;
}

.ch2pg3RenataKeepsDoorClosedBtnBG {
    background: url("images/ch2pg3RenataKeepsDoorClosed.png") no-repeat #1c1e21 center right;
}

.renataGrabbingRedBook{
    background: url("images/renata-grabbing-red-book.png") no-repeat #1c1e21 center right;
}

.renataGrabbingLeatherBook{
    background: url("images/renata-grabbing-leather-book.png") no-repeat #1c1e21 center right;
}

.renataGrabbingPotions{
    background: url("images/renata-grabs-potion.png") no-repeat #1c1e21 center right;
}

.renataAngryFace{
    background: url("images/renata-face-angry.png") no-repeat #1c1e21 center right;
}

.renataResoluteFace{
    background: url("images/renata-resolute-face.png") no-repeat #1c1e21 center right;
}

.ch1BtnBg{
    background: url("images/ch1ButtonBG.png") no-repeat #1c1e21 center right;
}

.ch2BtnBg{
    background: url("images/ch2ButtonBG.png") no-repeat #1c1e21 center right;
}

.ch3BtnBg{
    background: url("images/ch3ButtonBG.png") no-repeat #1c1e21 center right;
}

.ch4BtnBg{
    background: url("images/ch4ButtonBG.png") no-repeat #1c1e21 center right;
}

#chapterButtonsWrapper{
    /* width:320px; */
    position: fixed;
    z-index: 9998;
    left: 50%;
    bottom: -7%;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
    display: none;
}

#chapterButtonsWrapper a{
    margin-bottom:8px;
}

.appChoiceButtonsWrapper {
    display: flex;
    align-items: center;
    padding: 30px 20px 30px 110px;
    background: url("images/narrator-avatar-icon.png") no-repeat #1c1e21;
    border-radius: 16px;
    width: 100%;
    position: relative;
    font-size: 20px;
    margin: 0px auto;
    cursor: pointer;
    color: #fff;
    border: thin #ffffff73 dotted;

    transition: all 0.3s ease; /* Add a transition for smooth changes */
}

.decisionsToMakeWrapper {
    display: block;
    margin: 0px auto;
    width: 50%;
}

/* =================================================================================== //
88888888888 8888888888 .d8888b. 88888888888 8888888 888b    888  .d8888b.  
    888     888       d88P  Y88b    888       888   8888b   888 d88P  Y88b 
    888     888       Y88b.         888       888   88888b  888 888    888 
    888     8888888    "Y888b.      888       888   888Y88b 888 888        
    888     888           "Y88b.    888       888   888 Y88b888 888  88888 
    888     888             "888    888       888   888  Y88888 888    888 
    888     888       Y88b  d88P    888       888   888   Y8888 Y88b  d88P 
    888     8888888888 "Y8888P"     888     8888888 888    Y888  "Y8888P88 
// ==================================================================================== */
#chapterIntroMediaBox {
    display: block;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.mixedMediaChapterIntroBoxLeftColumn {
    position: absolute;
    z-index: 9009;
    left: 4%;
    top: 46%;
    transform: translateY(-50%);
    width: 46%;
    color: #ffffff;
    /* border-left: solid 8px #F15A25; */
}

.homepageLeftColumn {
    position: fixed;
    z-index: 9009;
    left: 50%;
    bottom: 35%;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 320px;
    color: #ffffff;
}

#homepageFeaturedImg{
    position:absolute;
    z-index: 9008;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    
    width:1315px;
    height:100%;
    background:url("images/homepage-featured-img.webp") no-repeat top;
}

#homepageFeaturedImg img{
    display: block;
    width: 100%;
    height: auto;
    margin:0px auto;
}

.homepageLeftColumn a{
    color:#fff !important;
    padding: 16px 60px !important;
    cursor: pointer !important;
    background-color: var(--SMDorange) !important;
    margin-top:40px;
}

.homepageLeftColumn p{
    opacity: 1 !important;
    font-size:1.4rem;
}

.mixedMediaChapterIntroBoxLeftColumn p span {
    font-size: 1.5vw;
}

.mixedMediaChapterIntroBoxRightColumn {
    position: absolute;
    right: 6%;
    bottom: 0%;

    z-index: 9000;
    width: auto;
    height: 100%;

    pointer-events: none;
}

.bookmarkIconFloatingMobile{
    position: fixed;
    top:5%;
    right:3%;
    z-index: 9995;
    display:none; 
    color:#000; 
}

.oppositeColorForDarkModeBookmarkButtonOnly{
    color:#fff !important;
}



#ambientSoundsMenuText{
    color:#fff;
}

.mixedMediaChapterIntroBoxRightColumn img {
    display: block;
    width: auto;
    height: 100%;
    margin: 0px auto;
}

#heroGradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, #fff, transparent);
    z-index: 9001;
}

#heroGradientDark {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, #000, transparent);
    z-index: 9001;
}

/*new hero CSS */
#heroChapterTitle{
    display:block;
    font-size:200px;
    text-transform: uppercase;
    font-weight: bold;
}
#heroChapterSubtitle{
    font-size: 1.5vw;
    padding-left:50px;
    display:block;
    /* margin-top:-88px; */
    text-transform: uppercase;
    font-weight: bold;
}

 #mediaAudioInteractionBar, #heroSectionContinueButton{
    margin-left: 50px !important;
    
}

#generalStatusAndLoaderStatusBar{
    width:320px;
    padding: 4px 10px;
    color:#fff;
    background-color: rgba(0, 0, 0, 0.90);
    border-radius: 20px;
    text-align: center;
    transform: translate(-50%, -50%);
    position: fixed;
    left: 50%;
    bottom: 70px;
    opacity: 0;
    transition: 300ms ease-in-out;
    z-index: 9990;
    pointer-events: none;
}

#magicJar1{
    position:absolute;
    top:0;
    left:8%;
    width:40%;
    height:auto;
    z-index: 9008;
    pointer-events: none;
}

#magicJar1 img{
    display:block;
    width:100%;
    height:auto;
}




@-webkit-keyframes blinkAnimation {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blinkAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}


/* tutorial popups css */

#tutorialPopUpWrapper{
    max-width:750px;
    overflow: hidden;
    box-shadow: -2px 0px 92px 1px rgba(241,90,37,1);
    color:#cbc6c6;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9997;
    border-radius: 18px;
    /* background: #212222; */
    font-size:1.2rem;
    text-align: right;
    
}
.tutorialPopupInnerWrapper{
    padding: 24px;
    text-align: left;   
}

.tutorialCard{
    background: #131313;
    width:100%;
    height: 100%;
    padding-bottom:24px;
    display:none;
    position:relative;
}

.tutorialPopupInnerWrapperCard2{
    padding: 24px;
    text-align: left; 
    margin-top:-100px;  
}

.bookmarkTutorialCardMoveUp{
    margin-top: -120px;
}

#bookmarkIconOnTutorialCard{
    position:absolute;
    left:50%;
    top:28%;
    transform: translate(-50%, -50%);
    z-index: 9990;
    font-size: 140px;
}


#tutorialCard1 img:first-child{
    display:block;
    width: 100%;
    height:auto;
    /* border-bottom: dotted 1px rgba(241,90,37, .3); */
}

#tutorialPopUpWrapper h1{
    font-size:1.6rem;
}

#tutorialPopUpWrapper ul{
    list-style-type:circle;
    padding-left: 20px;
}

.tutorialNaviBTN{
    margin-right:20px;
    font-size: 16px;
}



#finalCard p{
  text-align: justify !important;  
}

#finalCardHeroGraphicWrapper{
    position:absolute;
    display:block;
    width:100%;
    pointer-events: none;
    background-color: red;
}

#finalCardHeroGraphicWrapper img{
    position:absolute;
    z-index: 9999;
}

#finalCardHeroGraphicWrapper img:first-child{
    position:absolute;
    z-index: 9999;
    left:24px;
    margin-top: 10%;
}

#finalCardHeroGraphicWrapper img:nth-child(2){
    position:absolute;
    z-index: 9999;
    right: 0;
}

.previousCardBTN{
    padding: 10px ;
    border-radius: 10px;
    color: #000;
    font-family: "roboto";
    cursor: pointer;
}

#tutorialCardsNavigation .previousCardBTN{
    color:#fff !important;
}

#tutorialBackdropFadedBG{
    background-color: rgba(0, 0, 0, 0.589);
    position: fixed;
    width:100%;
    height: 100%;
    z-index: 9997;
    display:none;
}


/*for the shaking of the DOM on chapter 4 page 4 when the monster hums */
@-webkit-keyframes shakeOnHum {
    0% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-10px); }
    60% { transform: translateX(10px); }
    70% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    90% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}
@keyframes shakeOnHum {
    0% { transform: translateX(0); }
    10% { transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-10px); }
    60% { transform: translateX(10px); }
    70% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    90% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

.shakeDomOnHum {
    -webkit-animation: shakeOnHum 0.1s infinite;
            animation: shakeOnHum 0.1s infinite;
}

@-webkit-keyframes shakeOnMonsterStep {
    0% { transform: translateX(0); }
    10% { transform: translateX(-3px); }
    20% { transform: translateX(3px); }
    30% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    90% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}
@keyframes shakeOnMonsterStep {
    0% { transform: translateX(0); }
    10% { transform: translateX(-3px); }
    20% { transform: translateX(3px); }
    30% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    90% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

.shakeDomOnMonsterStep {
    -webkit-animation: shakeOnMonsterStep 0.1s infinite;
            animation: shakeOnMonsterStep 0.1s infinite;
}

.renataPotionDrinkWrapper{
    width:320px;
    height:542px;
    position:fixed;
    z-index: 999;
    bottom: 77px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    transition: 300ms ease-in-out;
    opacity: 0;
    background: no-repeat bottom;
    background-size: 100%;

}

.showRenataDrinkingPotion{
    opacity: 1;
    transition: 300ms ease-in-out;
}

#hideContentShowPostPeekDecisionWrapper{
    display:none;
}

/* =================================================================================== //
888b     d888 8888888888 8888888b. 8888888        d8888                    
8888b   d8888 888        888  "Y88b  888         d88888                    
88888b.d88888 888        888    888  888        d88P888                    
888Y88888P888 8888888    888    888  888       d88P 888                    
888 Y888P 888 888        888    888  888      d88P  888                    
888  Y8P  888 888        888    888  888     d88P   888                    
888   "   888 888        888  .d88P  888    d8888888888                    
888       888 8888888888 8888888P" 8888888 d88P     888                    


 .d88888b.  888     888 8888888888 8888888b.  8888888 8888888888 .d8888b.  
d88P" "Y88b 888     888 888        888   Y88b   888   888       d88P  Y88b 
888     888 888     888 888        888    888   888   888       Y88b.      
888     888 888     888 8888888    888   d88P   888   8888888    "Y888b.   
888     888 888     888 888        8888888P"    888   888           "Y88b. 
888 Y8b 888 888     888 888        888 T88b     888   888             "888 
Y88b.Y8b88P Y88b. .d88P 888        888  T88b    888   888       Y88b  d88P 
 "Y888888"   "Y88888P"  8888888888 888   T88b 8888888 8888888888 "Y8888P"  
       Y8b                                                                 

// ==================================================================================== */

@media (width < 500px) {
    .containerWidth {
        max-width: none;
        width: 100%;
    }

    #QTEtimer{
        font-size:25px;
    }

    #tutorialPopUpWrapper, #leaveFeedbackPopUpWrapper{
        max-width:initial;
        width:95%;
        font-size: 16px;
    }

    #leaveFeedbackPopUpWrapper{
        display:block;
    }

    #feedbackCardInnerBG img:first-child {
        bottom: -19px;
        right: 0;
    }

    #headerWrapperInner {
        padding: 16px 8px 8px 8px;
    }

    .tutorialCardHeroGraphic2{
        width:40%;
        margin-top:6px;
    }

    #heroChapterSubtitle{
        padding-left:2px;
        font-size: 4.5vw;
    }

    #heroGradient {
        height: 30%;
    }

    #heroGradientDark{
        height:120%;
        z-index: 9008;
    }

    #leaveFeedbackPopUpWrapper h1{
        font-size: 1.2rem;
        top: 14%;
    }

    .tutorialPopupInnerWrapperCard2 {
        margin-top: -186px;
    }



    #regularPageTextContentContainer p {
        text-indent: 20px;
    }

    #regularPageTextContentContainer {
        font-size: 1.3rem;
    }

    #mainLogo {
        flex-basis: 40%;
    }

    #textAndAudioHighlightsSection {
        margin-left: 2px;
        font-size: 16px;
    }

    [data-mixed-media-box-continue-button] {
        display: none;
    }

    .settingsBoxLabel {
        font-size: 12px;
    }

    .mixedMediaChapterIntroBoxLeftColumn {
        width: 90%;
        text-align: left;
        left: 2%;
        bottom: 38%;
    }

    .settingsGroup {
        margin-bottom: 22px;
    }

    .mixedMediaChapterIntroBoxRightColumn {
        right: -30%;
    }

    #currentChapter {
        display: none;
    }

    #homepageFeaturedImg{
        width: 100%;
        right: 0px;
        background:url("images/homepage-featured-single2-img.webp") no-repeat top right;
    }

    #chapterIntroMediaBox {
        position: relative;
    }

    #chapterIntroMediaBox #introPageLargeTitle {
        left: 8%;
        top: 44%;
        font-size: 12vw;
    }


    .bookmarkIconFloatingMobile{
        display: block ;
    }

    #bookmarkIconOnTutorialCard{
        top:25%;
        font-size: 140px;
    }

    .bookmarkTutorialCardMoveUp {
        margin-top: -150px;
    }

    #commentsSidebarLeftColumn {
        display: none;
    }

    #chapterBlockFooterWithButtonsAndLikeActions {
        justify-content: center;
        gap: 10;
    }

    .regularPageCenterColumnWrapper {
        padding-top: 60px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #magicJar1{
        z-index: 9001;
        top:220px;
        left: -7%;
        width:90%;
    }

    #locationsFromTheBook,
    #charactersFromTheBook {
        display: initial;
    }

    #locationsFromTheBook div,
    #charactersFromTheBook div {
        margin-bottom: 20px;
    }

    #achievementsBadgeWrapper {
        height: initial;
        /* opacity: 1; */
        width: 70%;
        font-size: 1rem;
        display: initial;
        bottom: -9%;
    }

    #settingsBoxWrapperModal{
        background: linear-gradient(to right, #000 50%, transparent 200%) !important;
    }

    #settingsBoxWrapperModalInterior{
        padding-left:14px;
        overflow-y:scroll;

        height: 438px;
        /* background:red; */
        overflow-y: scroll;
    }

    #settingsBoxWrapperModalInterior a{
        font-size:1.2rem;
        padding: 10px 0px 10px 0px;
        display: block;
    }

    #settingsBoxWrapperModalInterior #mainLogoForMenuWrapper {
        margin-bottom:10%;
    }

    #mainLogoForMenuInnerWrapper {
        flex-basis: 40%;
    }

    #achievementsBadgeWrapper img {
        display: block;
        width: 100%;
        height: auto;
    }

    .homepageLeftColumn{
        top:328px;
    }

    #achievementsBadgeText {
        padding: 6px;
    }

    #mediaAudioInteractionBar {
        font-size: 14px;   
        margin-left:2% !important;
    }

    #heroSectionCharacterLocationPageDuration {
        display: none;
    }

    .downArrowWrapperChapterPages {
        display: none;
    }

    #downArrowWrapper {
        bottom: 100px;
    }

    #downArrowWrapper span {
        font-size: 12px;
    }

    #mediaBarPlayPauseButton {
        margin-left: auto;
    }

    .mixedMediaChapterIntroBoxLeftColumn #mediaAudioInteractionBar {
        max-width: initial;
        min-width: initial;
        width: 99%;

        margin: 50px auto 30px auto !important;

        
    }

    .appChoiceButtonsWrapper {
        padding: 10px 20px 10px 66px;
        background: url("images/button-avatar-img.png") no-repeat #1c1e21;
        /* width: 100%;
    min-width:initial; */
    }

    .appChoiceButtonsWrapper:first-child {
        margin-top: 50px;
    }

    .decisionsToMakeWrapper {
        margin: 0px auto;
        width: 100%;
    }

    #commentsSidebarWrapper {
        width: 86vw;
    }
}

@media (width < 1000px) {
    #affinityIconWrapper {
        left: 50%;
        transform: translateX(-50%);
    }

    .regularTextChapterStylings {
        text-align: left;
        padding: 0px;
        padding-bottom: 25px;
    }

    .interiorPagePaddingForMobile {
        padding-top: 20%;
    }
}

@media (hover: hover) {
    .appChoiceButtonsWrapper:hover, .generalAppChoiceButtonsWrapper:hover, #chapterButtonsWrapper a:hover {
        border: thin var(--SMDorange) dotted;
        color: var(--SMDorange);
    }

    .thumbnailWrapper:hover .thumbnailTitle {
        top: calc(50% - 10px);
    }

    #settingsBoxWrapperModalInterior a:hover{
        color: #f15a25;
    }


}