:root {
    --minWidth: clamp(1900px, 100%, 100%);
    --sceneMaxHeight: 900px;
    --sceneMaxWidth: 1620px;
    --minHeight: 100%;
    --debugBorder: none;
    --boundingBorder: none;
    --globalFontSize: 1.3rem;
    --navFontSize: 20px;
    --h3FontSize: 25px;
    --h2FontSize: 20px;
    --footerColor: #777777;
    --footerLinkColor: #FFFFFFB3;
    --footerLinkColorHover: #FFFFFF;
    --mainColor: #0e120d;
    --headerColor: #362a4e;
    --mainLinkColor: #211f49;
    --navBtnColor: #438043;
    --secondLinkColor: #424070;
    --backdropColor: #0d301b;
    --pageColor: #7d8c7b;
    --shadow: #000000B3;
    --paperShadow: drop-shadow(3px 5px 0.5px #00000035) drop-shadow(0px 0px 15px #0000003c);
    --thinShadow: drop-shadow(1px 1px 1px #000000B3);
    --mainBox: 1300px;
    --mainBoxMinHeight: 1617px;
    --debugBoxWidth: 1700px;
    --defaultTransition: 0.4s;
    --fastTransition: 0.2s;
    --bounceTransition: 0.5s linear(0, 0.94 17%, 1.15 24% 30%, 0.98 51%, 1);

    --motionBGcolor: #0b1b04;
    --motionBGcolor1: #0b2723;
    --motionBGcolor2: #1b2f0b;
    --motionBGcolor3: #0d2517;

    --stickerHover: scale(0.8) translateY(-2px) rotateX(12deg);
    --stickerShadow: drop-shadow(0px 0px 3px #00000083) drop-shadow(2px 2px 2px #00000030);
    --stickerShadowHover: drop-shadow(0px 0px 3px #00000083) drop-shadow(1px 9px 2px #00000030) brightness(110%);

    --cardFade: linear-gradient(to bottom, #87b08340 0%, rgba(0, 0, 0, 0) 100%);
    --cardEffects: saturate(100%) brightness(100%) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6));
    --cardEffectsHover: saturate(120%) brightness(120%) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6));
    --cardTilt: translateY(-15px) rotateX(12deg) rotateY(15deg) rotateZ(-2deg) !important;
    --cardTransition: 0.5s linear(0, 0.94 17%, 1.15 24% 30%, 0.98 51%, 1);

    --cardWidth: 250px;
    --cardHeight: 341px;

    --cardDarkHeadingColor: #438043;

    --cardBottomMargin: 20px;
    --cardLeftMargin: 20px;

    --cardHealthFoldMargin: 35px;
    --cardHealthFoldYMargin: 225px;

    --cardMenuFoldMargin: -150px;
    --cardMenuUnfoldMargin: 15px;
  }

@media only screen and (max-width: 1300px) {
    #siteHeader {
        grid-template-columns: 0px 1fr 0px!important;
        }
}

/* 
  header, main, nav, section, #curtainLeft, #curtainRight, #viewport, #siteContents, #siteEnd, footer {
    border: 2px solid red;
  } */

/* @media only screen and (max-width: 1350px) {
        :root {
            --minWidth: clamp(1350px, 100%, 100%);
            --sceneMaxHeight: 900px;
            --sceneMaxWidth: 1350px;
        }
}

@media only screen and (orientation: landscape) {
    :root {
    --minWidth: clamp(1900px, 100%, 100%);
    --sceneMaxHeight: 900px;
    --sceneMaxWidth: 1620px;
    }
} */

.centering{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

#debug {
    position: fixed;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
    width: var(--debugBoxWidth);
    min-height: 100%;
    height: 100vh;
    pointer-events: none;
    opacity: 0.5;
    border: var(--boundingBorder);
}

#site{
    width: inherit;
    position: relative;
    z-index: 10;
}

#warnings{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

#devblock{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 350px;
    background: #101010;

    padding: 25px;
    opacity: 0.7;
}

@font-face {
    font-family: "distorted";
    src: url("../fonts/A_Font_with_Serifs.ttf");
}

@font-face {
    font-family: "mom";
    src: url("../fonts/mom.ttf");
}

@font-face {
    font-family: "urania";
    src: url("../fonts/urania.ttf");
}

@font-face {
font-family: "albert";
src: url("../fonts/albert.ttf");
}

@font-face {
    font-family: "crooked";
    src: url("../fonts/Crooked.ttf");
}

@font-face {
    font-family: "dirty";
    src: url("../fonts/Dirty_Classic_Machine.ttf");
}

#sceneBackdrop{
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--defaultTransition);
    z-index: 1;
}

#fishContent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

html{
    width: 100%;
    height: 100%;
}

body{
    width: 100%;
    min-height: 100vh;
    margin: 0px auto;
    color: var(--footerColor);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--globalFontSize);
    background-size: cover;
    background:
        linear-gradient(to top, rgba(7, 101, 7, 0.3) 1%, rgba(0, 0, 0, 0) 60%) fixed,
        radial-gradient(rgba(0,0,0,0), rgba(3, 3, 3, 0.6)) fixed,
        url("../img/patpeacock.png") -32px top fixed,
        url("../img/greenfairy2.jpg") left -200px scroll,
        var(--backdropColor);
}


* {
    box-sizing: border-box;
}

body, html{ margin: 0; padding: 0; text-size-adjust: none;}



[data-display]{
display:none;
}

[data-arrow-down]::before{
    content: "";
    opacity: 0.2;
    transition: opacity 0.6s ease;
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 50%;
    filter: drop-shadow(0px 0px 15px #000000);
    transform: translateX(-50%) translateY(-75px) scale(50%);
    background: url("../img/arrow-node.png") center center no-repeat;
    animation: arrowHover 10s linear infinite;
}

@keyframes arrowHover {
    0% { top: 0px; opacity: 0; }
    50% { top: 25px; opacity: 0.2; }
    100% { top: 0px; opacity: 0; }
    
}

[data-tab-content] {
    display:none;
}

.active[data-tab-content] {
    display: block;
    animation-name: test;
    animation-duration: 0.3s;
}

@keyframes test {
0%   { opacity: 0; margin-top: -4px;}
75%  { margin-top: 2px;}
100% { opacity: 1.0; margin-top: 0px;}
}


    #patronLogin{
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        color: #000;
        border: 4px double #57684d;
        padding: 25px;
        text-align: center;
        position: fixed;
        z-index: 9999;
        bottom: -215px;
        left: 120px;
        background: #778671;
        width: 540px;
        height: 300px;
        transition: var(--defaultTransition);
        cursor: pointer;
    }

    #patronLogin h1{
        font-family: "dirty", Courier, monospace;
        font-weight: normal;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0;
    }

    .patronUnfold{
        bottom: 0px!important;
    }

#siteHeader {
    display: grid;
    grid-template-columns: 160px 1fr 160px;
    grid-template-rows: 100px var(--sceneMaxHeight) 1fr;
    position: relative;
}


#topNavLeftContents, #topNavRightContents{
    position: relative;
    z-index: 15;
}

#playerData{
    position: relative;
    z-index: 15;
}

#topNavLeft, #topNavCenter, #topNavRight{
    grid-row-start: 1;
    height: 100px;
    position: relative;
    background: url("../img/menubackdrop.png") center top repeat-x;
}

#topNavLeft{
    color: #fff;
}

#topNavCenter{
    margin: 0 -15px;
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
}

#topNavRight{
    color: #fff;
}

#hideNodes {
    transform: translateY(10px);
    transition: var(--defaultTransition);
    opacity: 0.6;
    &:hover{
        opacity: 1.0;
    }
}

#curtainLeft, #curtainRight, #viewport {
    grid-row-start: 2;
    position: relative;
}

#curtainLeft, #curtainRight {
    pointer-events: none;
    height: 992px;
    z-index: 13;
    margin: -100px 0 0;
}

#curtainLeft {
    background: 
    url("../img/curtainleft.png") top right no-repeat;
}

#curtainRight {
    background:
    url("../img/curtainright.png") top left no-repeat;
}

#viewport {
    margin: -65px -15px 0 -15px;
    position: relative;
    z-index: 1;
    background: #000000;
}
.backdropBlur{
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
}

[data-display="true"]{
    transition: opacity 1s;
    opacity: 1;
    display: block;
}
[data-display="false"]{
    transition: opacity 1s;
    opacity: 0;
    display: none;
}

.headerBottom{
    pointer-events: none;
    grid-row-start: 3;
    grid-column: span 3 / span 3;
    pointer-events: none;
    transform: translateY(-120px);
    z-index: 12;
    height: 600px;
    background: url('../img/bottomlatch.png') top center repeat-x;
}


#siteContents {
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1300px 1fr;
    grid-template-rows: 130px 1fr 430px;

    transition: var(--bounceTransition);
    z-index: 66;
    position: relative;
}

#siteContents[data-site-shift="true"]{
    margin: -1400px auto 0;
}

#siteContents[data-site-shift="false"]{
    margin-top: -700px!important;
}

.navItems {
    pointer-events: none;
    grid-row-start: 1;
    grid-column: span 3 / span 3;

    margin: 0 auto;
    width: var(--mainBox);
    position: relative;
    top: 25px;
    user-select: none;
    text-align: left;
    padding: 0 75px;
    background: url("../img/navbg.png") bottom center no-repeat;
}

.navItems a{
    pointer-events: all;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 20px 0 0;
    height: 127px;
    width: 250px;
    cursor: pointer;

    color: #152214;
    background:
        url("../img/nav-main.png") center bottom no-repeat;
    filter: var(--thinShadow);
    text-decoration: none;
    font-family: "mom";
    letter-spacing: 2px;
    font-size: var(--navFontSize);
    transition: var(--bounceTransition);
    transform: translateY(10px);
        &:hover{
            transform: translateY(0px);
        }
}

.navItems .active[data-tab-target] {
    transform: translateY(5px);
    pointer-events: none;
}

.navItems #shiftButton{
    display: block;
    position: absolute;
    right: 75px;
    bottom: 30px;
    background:
        url("../img/nav-shift.png");
    width: 93px;
    height: 158px;
    &:hover{
        transform: rotateX(25deg) rotateY(5deg) rotateZ(1deg) translateY(-5px)!important;
    }
}

#playerNav{
    grid-row-start: 2;
    pointer-events: all;

}

#sidebar{
    grid-row-start: 2;
    pointer-events: all;
}

.pin{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 115px;
    height: 115px;
    transform: translateX(55px) translateY(-55px);
    background:
        url("../img/pin-01.png") center center no-repeat;
}

#mainContent::before{
    border: var(--debugBorder);
    content: "";
    width: var(--mainBox);
    height: 548px;
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    transform: translateY(-45px);
    pointer-events: none;
    background:
        url("../img/mainbg_top.png") top center no-repeat;
}

#mainContent:after{
        border: var(--debugBorder);
        content: "";
        position: absolute;
        z-index: 1;
        bottom: 0;
        width: var(--mainBox);
        height: 397px;
        display: block;
        transform: translateY(100px);
        pointer-events: none;

        background:
            url("../img/mainbg_bottom.png") bottom center no-repeat;
}

#mainContent {
    pointer-events: all;
    grid-row-start: 2;
    margin: 0 auto;
    width: var(--mainBox);

    position: relative;
    z-index: 11;
    min-height: 850px;
    color: var(--mainColor);
    font-size: var(--globalFontSize);
    background:
        url("../img/mainbg.png") top center repeat-y;
    filter: var(--paperShadow);
}

#mainContent a{
    font-weight: bold;
    color: var(--mainLinkColor);
    cursor: pointer;
    text-decoration: none;
    transition: var(--defaultTransition);

    &:hover {
        color: #FFFFFF;
        transition: var(--defaultTransition);
    }
}

#mainContent h2{
    font-size: var(--h2FontSize);
    font-size: 25px;
    font-family: "albert";
    color: #000;
}

.popout{
    padding: 25px;
    width: 1300px;
    height: 373px;
    color: #515161;
    transform: translateX(-75px);
    filter: drop-shadow(10px 10px 1px #00000060);
    background:
        url("../img/inlaybox.png") center center no-repeat;
}

#mainContent h3{
    text-transform: uppercase;
    font-size: 30px;
    padding: 8px 15px;
    font-family: "mom", "Courier", Courier, monospace;
    margin: 0 0 15px;
    display: block;
    width: 100%;
    height: 50px;
    background:
        url("../img/line-header.png") center center no-repeat;
    text-align: center;
    border-radius: 5px;
    color: var(--pageColor);
}

#secretDate{
    text-align: center;
    position: absolute;
    top: 10px;
    left: 85px;
    rotate: -0.5deg;
    z-index: 300;
    font-family: "dirty", "Courier New", Courier, monospace;
    color: #353e41;
    pointer-events: none;
    user-select: none;
}

.noselect{
    pointer-events: none;
    user-select: none;
}

.headerTag{
    text-align: center;
    position: absolute;
    top: 10px;
    right: 85px;
    rotate: -0.5deg;
    letter-spacing: 2px;
    opacity: 0.4;
    z-index: 300;
    font-family: "dirty", "Courier New", Courier, monospace;
    color: #353e41;
}

.headerTag::first-letter{
    display: inline-block;
    padding: 1px;
    background-color: #353e41;
    color: #7d8c7b;
}

#mainContent .wrapper{
    font-size: var(--globalFontSize);
    opacity: 1.0;
    padding: 38px 75px;
    position: relative;
    z-index: 3;
    opacity: 1;
}

#FAQContents section{
    font-size: var(--globalFontSize);
    border-left: 8px solid #353e4176;
    background-color: #353e4120;
    display: block;
    border-radius: 1px;
    padding: 15px 30px;
    margin: 0 auto 35px;
    width: 97%;
}

.contactTag{
    background-color: var(--mainColor);
    color: var(--pageColor);
    display: inline-block;
    padding: 5px;
    margin: 0 1px;
    transform: scale(80%);
}


#FAQContents h1{
    position: relative;
    font-family: "urania";
    font-size: var(--h3FontSize);
    margin: 0;
    padding: 0 15px;
}

#siteEnd {
    grid-row-start: 3;
    grid-column: span 3 / span 3;
    pointer-events: all;
    margin: 0 auto;
    width: var(--mainBox);

    position: relative;
    top: 75px;
    text-align: right;
    background: url("../img/endbg.png") top center no-repeat;
    padding: 0 90px 0 0;
}

#siteEnd a{
    transition: var(--bounceTransition);
    display: inline-block;
    transform: translateY(-30px);
    &:hover{
        transform: translateY(-25px);
    }
}

#siteEnd .faq{
    background: url("../img/nav-faq.png") top center no-repeat;
    width: 93px;
    height: 200px;
}

#siteEnd .settings{
    background: url("../img/nav-settings.png") top center no-repeat;
    width: 85px;
    height: 200px;
}

#siteEnd .export{
    background: url("../img/nav-export.png") top center no-repeat;
    width: 83px;
    height: 200px;
}

#siteFooter {
    /* width: var(--minWidth); */
    position: relative;
    user-select: none;
    text-align: center;
    padding: 0 0 25px;

    background:
        url("../img/focus-arrow-t.png") bottom left no-repeat,
        url("../img/focus-arrow-t.png") bottom right no-repeat,
        url("../img/footerbackdrop.png") center 700px repeat-x;
        color: var(--footerColor);
}

#siteFooter a{
    cursor: pointer;
    transition: var(--defaultTransition);
    text-decoration: none;
    color: var(--footerLinkColor);
        &:hover{
        color: var(--footerLinkColorHover);
        }
}

#siteFooter .icon{
    transition: var(--defaultTransition);
    transform: scale(50%);

    &:hover{
        filter: brightness(300%);
        transform: scale(55%);
    }
}

/* END NEW STYLE */

.small{
    filter: drop-shadow(0px 0px 5px #000000);
}

.tooth{
    filter: drop-shadow(0px 0px 12px #000000);
    width: 350px; height: 350px;
    display: inline-block;
    margin: auto;
    margin: 10px 40px;
    background:
    url("../img/diamond_l.png") no-repeat center center,
    url("../img/cardback_wormwood.png") center center no-repeat;
}

.noselect {
    user-select: none;
}

#main {
    width: 100%;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

#updateSection{
    position: relative;
    display: grid;
    grid-template-columns: 700px 700px;
    justify-content: center;
    gap: 5px;
    margin: 15px 20px;
    z-index: 15;
}

.updateLeft, .updateRight{
    padding: 25px;
}

.updateLeft{
    background:
    url("../img/main-sidebox.png") center center no-repeat;
    height: 787px;
    filter: var(--paperShadow);
    }

.beatingHeart {
    cursor: pointer;
    display: block;
    margin: 150px auto 0px;

    &:hover {
        filter: brightness(2);
    }
}

.peadodo,
.dart1,
.dart2,
.dart3,
.dart4,
.dart5,
.dart6,
.dart7,
.dart8 {
    cursor: pointer;
    width: 400px; height: 403px;
    z-index: 50;
    margin: 0;
    padding: 0;
}

.dart1,
.dart2,
.dart3,
.dart4,
.dart5,
.dart6,
.dart7,
.dart8 {
position: absolute;
top: 0;
left: 0;
}

#peadodoShuffle:not(:active) {
    transition: 0.5s;
}

#peadodoShuffle:active {
    animation-iteration-count: 1;
    animation: bounce;
}

@keyframes bounce {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
  }

.peadodo {
    position: absolute;
    bottom: 0px;
    right: 50px;
    background: url("../img/art/peadodo.png") no-repeat center center;
    transition: 0.7s;
    filter: drop-shadow(0 0 2px #030303);
    &:hover{
        transition: 0.7s;
        filter: drop-shadow(0 0 2px #030303);
    }
}

.dart1 {
    background: url("../img/art/dart01.png") no-repeat center center;
}

.dart2 {
    background: url("../img/art/dart02.png") no-repeat center center;
}

.dart3 {
    background: url("../img/art/dart03.png") no-repeat center center;
}

.dart4 {
    background: url("../img/art/dart04.png") no-repeat center center;
}

.dart5 {
    background: url("../img/art/dart05.png") no-repeat center center;
}

.dart6 {
    background: url("../img/art/dart06.png") no-repeat center center;
}

.dart7 {
    background: url("../img/art/dart07.png") no-repeat center center;
}

.dart8 {
    background: url("../img/art/dart08.png") no-repeat center center;
}


.loveletter{
    color: #100000;
    text-align: center;
    padding: 25px;
    font-weight: bold;
    font-family:'Courier New', Courier, monospace;
    font-size: 23px;
    position: relative;
    filter: drop-shadow(10px 10px 0 #030303);
    text-shadow: 0 0 4px rgba(89, 3, 3, 0.5), 0 0 15px #e8d3a8;
    width: 450px;
    height: 452px;
    margin: auto;
    background: url("../img/art/loveletter01.png") no-repeat center center;
}

.username,
.password,
.playerName {
    display: inline-block;
    margin: 5px; padding: 20px;
    height: 35px; width: 300px;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--globalFontSize);
    background: rgba(3, 3, 3, 0.3);
    border: 2px solid #2d2d2d;
    filter: drop-shadow(0px 0px 5px #030303);
    color: #FFFFFF;
    font-weight: bold;
}

.loginbutton, .renamebutton, .itembutton{
    background: #4f964f;
    border-radius: 15px;
    color: #101010;
    border: 7px double #101010;
    filter: drop-shadow(3px 3px 0px #030303);
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 5px 18px;
    margin: 10px auto 0 0;
    display: inline;
    font-weight: bold;
    font-size: var(--globalFontSize);
}
/** HEADERS **/

h6 {
    margin: 0;
    position: relative;
    z-index: 70;
    text-transform: uppercase;
    vertical-align: baseline;
    width: inherit;
    height: 37px;
    padding: 0px 0px 0px 70px;
    color: #FFFFFF;
    font-family: "distorted", garamond, serif;
    font-size: 35px;
    letter-spacing: -1px;
    background: url("../img/arrow.png") no-repeat 15px center;
}

.halfbox h2{
    text-align: left !important;
}

hr {
    margin: 3px 0 3px 0;
    border: none;
    display: block;
    height: 15px;
    width: 100%;
    background: url("../img/line.png") no-repeat center center;
}

.curioWrap hr, .post hr:first-of-type {
    margin: 3px 0 3px 0;
    border: none;
    display: block;
    height: 15px;
    width: 100%;
    background: url("../img/line-inlay.png") no-repeat center center;
}

h2 {
    text-transform: uppercase;
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: #FFFFFF;
    font-family: "distorted", garamond, serif;
    font-weight: bold;
    font-size: var(--h2FontSize);
}

h5{
    font-size: var(--h3FontSize);
    margin: 0;
    font-weight: normal;
    font-family: 'dirty';
}

.left h2,
.right h2 {
    text-align: left;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.centertext {
    position: relative;
    padding: 0 60px;
    display: block;
    text-align: center!important;
}

#FAQcontents {
    margin: 10px 0 0 0;
}


.buildVersion {
    rotate: 5deg;
    transition: var(--bounceTransition);
    background: url("../img/goetialabel.png") center center no-repeat;
    text-align: center;
    font-size: 14px;
    width: 260px; height: 240px;

    padding: 152px 25px 0;
    color: #4e4e4e;
    position: absolute;
    z-index: 999;

    top: 90px;
    right: 35px;
    filter: drop-shadow(0 10px 0px rgba(0, 0, 0, 1));
}

.buildVersion b {
    color: #456345;
}

.buildVersion .build {
    display: block;
    margin: 0 auto -23px;
    padding: 0;
    font-family: "distorted";
    font-size: 18pt;
    color: rgb(101, 144, 101) !important;
}

.buildVersionShift{
    top: -800px!important;
}

.timerWrapper{
    width: 300px;
    height: 50px;
    background:#211b37;
    padding: 0;
    text-align: left;
}

[data-item-unlock-fish] {
    color: var(--cardDarkHeadingColor);
    position: relative;
    display: inline-block;
    width: 250px;
    height: 341px;
    background: url("../img/upd_card_dark.png") center center no-repeat;
}

[data-item-unlock-fish] h2 {
    color: var(--cardDarkHeadingColor)!important;
}

[data-fish-card] {
    text-align: center;
    user-select: none;
    position: absolute;
    top: 90px;
    right: 150px;
    rotate: 2deg;
    z-index: 999;
    border-radius: 20px;
    background:rgba(0, 0, 0, 0.795);
    padding: 25px;
    width: 350px;
    height: 441px;
}

#fishCardClose{
    position: absolute;
    top: 14px;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#playerHealthContainer{
    position: relative;
    user-select: none;
    text-align: center;
    width: var(--cardWidth);
    height: var(--cardHeight);
    cursor: pointer;
}

#playerHealthCardCover{
    position: absolute;
    top: 0;
    z-index: 1;
    width: var(--cardWidth);
    height: var(--cardHeight);
    background:
    url("../img/healthCardCover.png") center center no-repeat;
}

#playerHealthWrapper{
    position: relative;
    top: 116px;
    width: 150px;
    height: 115px;
    margin: auto;
    background: #2a2739;
}

#playerHealthPercentage{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* background: #3a2d70; */
    background: url("../img/playerhealthcardpercentbg.png") top left repeat-x;
}

#turnSum{
    display: block;
    position: relative;
    top: 150px;
    z-index: 2;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    margin: auto;
    rotate: 15deg;
    color: #64976e;
    text-shadow: -2px 0 #261f3e, 0 1px #261f3e, 2px 0 #261f3e, 0 -2px #261f3e;
    font-size: 40px;

    animation: turnNumberSlide 0.4s 1;
}

@keyframes turnNumberSlide {
    0% { top: 0px; }
    100% { top: 150px; }
  }

  #unShiftCards{
    margin: 0 0 0 0!important;
  }

  #updateCards{
    position: fixed;
    z-index: 105;
    top: 80px;
    right: 45px;
    rotate: 1deg;
    font-size: 18px;
  }

  #hardCards{
    position: fixed;
    z-index: 105;
    bottom: 390px;
    right: 45px;
    rotate: 1deg;
    font-size: 18px;
  }

  #updateCards .snip{
    cursor: pointer;
    position: absolute;
    width: 65px;
    height: 76px;
    bottom: 0px;
    left: 92px;
    border: none;
    transition: var(--bounceTransition);
    background: url("../img/card-snip.png") no-repeat center center;
    transform: scale(1) translateY(20px);
    filter: var(--stickerShadow);
    &:hover{
        transform: scale(1.1) translateY(21px) rotateX(25deg);
        filter: var(--stickerShadowHover);
    }
  }

  .byebye{
    transition: var(--bounceTransition);
    rotate: 3deg;
    pointer-events: none!important;
    translate: 350px;
  }


  #updateCards h2{
    font-size: 28px;
    margin: -7px auto;
  }

  @keyframes cardShuffle {
    0% { transform: translateY(-330px); }
    50% { transform: translateY(25px); }
    100% { transform: translateY(0px); }
  }

[data-card="error"] {
    background: url("../img/upd_card.png") no-repeat center center;
    color: #4b4d3c;
}

[data-card="update"] {
    background: url("../img/upd_card_dark.png") no-repeat center center;
    color: #3d6c46;
}

[data-card="update"] h2 {
    color: #3d6c46;
  }

[data-card="error"] h2 {
    color: #4b4d3c;
}

  .card-time{
    background: url("../img/upd_card_timecard.png") no-repeat center center;
    color: #3d6c46;
  }

  .card-time h2{
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    color: #3d6c46;
  }

  .updateCard{
    user-select: none;
    cursor: pointer;
    transition: var(--bounceTransition);
    position: relative;
    margin: 0 0 -330px 0;

    width: 250px;
    height: 341px;
    filter: drop-shadow(0px 0px 2px #00000090) drop-shadow(3px 3px 1px #000000B3);
    animation: cardShuffle 0.2s 1;

    &:hover{
        transform: translateY(12px)!important;
    }
}

.updateCard .center{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    padding: 0 30px;
}

.tilt{
    cursor: pointer;
    transition: 0.5s;
    user-select: none;
    filter: saturate(100%) brightness(1.2) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6))!important;
    &:hover{
        transition: 0.5s;
        transform: translateX(-3px) translateY(-15px) rotateX(12deg) rotateY(5deg) rotateZ(-2deg) !important;
        filter: saturate(100%) brightness(1.2) drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.6))!important;
    }
}

#playerInventory{
    text-align: center;
}

.itemBox{
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin: 12px 12px;
    width: 155px;
    height: 155px;
    background: url("../img/itemart_backdrop.png") center center no-repeat;
    transition: 0.4s;
    display: inline-block;
    text-align: center;
    transition: var(--bounceTransition);
    &:hover{
        transform: translateY(-5px) scale(1.05);
    }
}

.itemBox .amount{
    font-size: 25px;
    rotate: 3deg;
    position: absolute;
    bottom: 28px;
    right: 7px;
}

/* NEW CURIOS */
.curioWrap {
    display: block;
    position: relative;
    margin: 10px 0px;

    animation-name: fadeInCurioWrap;
    animation-duration:1s;
    opacity: 1.0;

    padding: 25px;
    width: 1200px;
    height: 345px;
    color: var(--pageColor);
    transform: translateX(35px);
    filter: var(--paperShadow);
    background:
        url("../img/inlaybox.png") center center no-repeat;
}

@keyframes fadeInCurioWrap {
    0%   { opacity: 0;}
    100% { opacity: 1.0;}
  }

.curioWrap a{
    color: #9595a9!important;
}
.curioWrap h1 {
    margin: 0 0 -2px;
    font-size: 35px;
    font-family: "albert";
}

.curioArt {
    z-index: 100;
    position: absolute;
    left: -200px;
    top: 50%;
    transform: translateY(-50%);
    width: 350px;
    height: inherit;
    filter: drop-shadow(8px 8px 1px #00000040);
    rotate: -8deg;
    background:
        url("../img/cardback_wormwood.png") no-repeat center center;

        animation-name: fadeInCurioArt;
        animation-duration:1s;
        opacity: 1.0;
}

@keyframes fadeInCurioArt {
    0%   {top: 0%; opacity: 0;}
    50%   {top: 52%;}
    100% {top: 50%; opacity: 1.0;}
  }

.curioArt img {
    transition: var(--bounceTransition);
    width: 350px;
    height: 350px;
    margin: 0px;
    background: url("../img/diamond_l.png") no-repeat center center;

    &:hover{
        transform: scale(102%) rotate(-2deg);
    }

}

.curioText {
    position: relative;
    margin: auto;
    width: 1100px;
    padding: 0px 0px 0px 150px;
    top: 50%;
    transform: translateY(-50%);
}

.curioText article{
position: relative;
left: 0;
animation-name: fadeInCurioText;
animation-duration:0.5s;
}

@keyframes fadeInCurioText {
    0%   { left: -1600px; }
    50%   { left: 25px; }
    100% { left: 0; }
  }

.hrSmall{
width: 100%;
height: 12px;
background: url("../img/hr_vn.png") no-repeat center center;
}

.curioTagsWrap{
    position: absolute;
    bottom: -30px;
    text-align: right;
    width: 100%;
    margin: 0 0;
    padding: 0 55px;
    z-index: 100;
}

.narrator {
    position: absolute;
    right: -20px;
    top: -150px;
    z-index: 100;
}

.curioTag {
    transition: var(--bounceTransition);
    margin: 0 0px;
    transform: scale(0.8);
    width: 85px;
    height: 85px;
    display: inline-block;
    filter: var(--stickerShadow);
    &:hover{
        transform: scale(0.8) translateY(-2px) rotateX(12deg);
        filter: var(--stickerShadowHover);
    }
}

.grey {
    filter: grayscale(1);
}

.stamp {
    display: inline-block;
    margin: 10px;
}

.stamp:hover {
    rotate: 2deg;
}

.star {
    background: url("../img/star-horizontal.png") no-repeat top center;
    width: 100%;
    height: 28px;
    margin: 10px 0px;
}

.glossaryContainer {
    display: grid;
    grid-template-columns: auto auto auto;
    margin: 0px 25px;
    padding: 0;
}

.glossaryContainer h2 {
    font-family: Georgia, 'Times New Roman', Times, serif!important;
    font-size: 33px;
    text-align: center;
    padding: 27px 0 0 0;
    margin: auto;
        max-width: 90px; width: 90px;
        max-height: 90px; height: 90px;
        text-align: center!important;
        color: #101010;
        font-weight: bold;
        filter: drop-shadow(-5px 5px 0px #030303);
        background: url("../img/alphabetbg.png") no-repeat center center;

}

.glossaryContainer a {
    font-family: Arial, Helvetica, sans-serif;
}

.glossaryContainer ul{
    padding: 0;
    width: 100%;
    margin: auto;
}

.glossaryContainer li{
    padding: 4px;
    background-color: rgba(7, 101, 7, 0.1);
    list-style: none;
    text-align: left;

    &:before {
        color: #666666;
        content: "";
    }
}

.glossaryContainer li:nth-of-type(odd){
    background-color: rgba(3, 3, 3, 0.2);
}

.grid {
    min-height: 350px;
    min-width: 350px;
}

/*EGGGAME*/
.egggame {
    margin: auto;
    background: url('../img/art/egggame_background.png') no-repeat center center;
    width: 600px;
    height: 588px;
}

.clicky {
    cursor: grab;
}

.eggCollected {
    cursor: grab;
    display: block;
    border-bottom: 1px solid #FFFFFF;
}

.eggBoxInfo {
    z-index: 67;
    padding: 25px 15px;
    display: none;
    position: absolute;
    top: 0px;
    left: 900px;
    width: 250px;
    height: 700px;
    color: #1bae69;
    background: #022e19;
}

.eventPopup {
    z-index: 999;
    display: none;
    position: absolute;
    padding: 20px;
    background: rgba(3, 3, 3, 0.5);
    filter: drop-shadow(2px 2px 2px rgba(3, 3, 3, 0.8));
    border-radius: 15px;
    color: #FFFFFF;
    font-weight: bold;
  }

  .titleLogo{
    width: 300px;
  }

  .topBtn{
    z-index: 99;
    position: relative;
    margin-bottom: -50px;
    transform: scale(0.9);
  }

  .boxBtn{
    width: 77px;
    height: 77px;
    &:hover{
        filter: brightness(1.5);
        transform: scale(1.2);
    }
  }

  .topScroll{
    background: url("../img/newarrowbottom.png") no-repeat center center;
  }


#playerDoll{
    transition: var(--bounceTransition);
    position: absolute;
    z-index: 125;
    top: -20px;
    left: 3.5%;
    width: 266px;
    height: 736px;
    background: url("../img/playerdoll/base_doll.png") center center no-repeat;

    &:hover{
        top: -15px;
    }
}

.entry{
    margin: 60px auto 30px auto;
    position: relative;
    width: 1131px;
    height: fit-content;
    background: url("../img/entry-loop.png") center center repeat-y;
    filter: var(--paperShadow);
}

.tag{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-115px);
}


.tag .patreon{
    width: 100px;
    height: 100px;
    background: url("../img/tag-patreon.png") center center no-repeat;
    filter: var(--stickerShadow);
    transition: var(--bounceTransition);
    &:hover{
        transform: translateY(-2px) rotateX(12deg);
        filter: var(--stickerShadowHover);
    }
}

.entry .post{
    color: var(--pageColor);
    padding: 30px 60px 50px 60px;
    z-index: 3;
    position: relative;
    min-height: 240px;
}

.post h1{
position: relative;
margin: 0 0 -7px 0;
font-family: "urania";
text-transform: uppercase;
font-size: 33px;
letter-spacing: -1px;
color: #919d8f;
}

.post hr{
    width: 100%;
    height: 15px;
    margin: 10px auto;
    background: url("../img/post-stars.png") no-repeat center center;
}

.post .date{
position: absolute;
top: 25px;
right: 65px;
rotate: 2deg;
font-family: "urania";
font-size: 28px;
}

.post a{
    color: #919d8f!important;
    text-decoration: underline!important;
    &:hover{
        filter: brightness(1.5);
    }
}

.entry::before{
    pointer-events: none;
    content: "";
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 1131px;
    height: 144px;
    transform: translateY(-10px);
    background: url("../img/entry-top.png") center center no-repeat;
}

.entry::after{
    pointer-events: none;
    content: "";
    display: block;
    z-index: 2;
    position: absolute;
    bottom: 0;
    width: 1131px;
    height: 123px;
    transform: translateY(10px);
    background: url("../img/entry-bottom.png") center center no-repeat;
}

.blackbox{
    padding: 25px;
    background: #0000003d;
    filter: drop-shadow(0px 0px 5px #000000);
}

/*** VN STUFF ***/
.event:not(.current), .disabled{
    display: none;
    }

#rightScrollBtn, #leftScrollBtn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 100px;
    height: 100px;
    display: none;
}

#rightScrollBtn{
    right: 25px;
}

#leftScrollBtn{
    left: 25px;
}

      #initDialog{
        display: none;
        position: absolute;
        z-index: 999;
        width: 100%;
        height: 100%;
        padding: 250px;
        backdrop-filter: blur(3px);
      }

      #dialogChoices{
        position: absolute;
        z-index: 999;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);

        .btn {
            padding: 5px 10px;
            border: none;
            margin: 0 5px;
            background: #000000;
            color: #FFFFFF;
            font-size: 25px;
          }
          
          .btn-disabled {
            opacity: 0.3;
            padding: 5px 10px;
            border: none;
            margin: 0 5px;
            background: #000000;
            color: #FFFFFF;
            font-size: 25px;
          }
      }

      #actorBox{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0px;

        filter: drop-shadow(0 0 2px #000000);
        pointer-events: none;
    }

      .locationTag:first-line{
        font-size: 21px;
        text-transform: uppercase;
        font-weight: bold;
      }
    
      .locationTag{
        position: absolute;
        padding: 10px 20px 10px 35px;
        top: 70px;
        left: -700px;
        z-index: 100;
        background: linear-gradient(to right, rgba(3, 3, 3, 0.6) 15%, rgba(0, 0, 0, 0) 100%);
        animation-name: locationTagVanish;
        animation-duration: 4s;
      }
    
      @keyframes locationTagVanish {
            0%   { left: -700px; }
            10%   { left: 200px; }
            90%   { left: 200px; }
            100% { left: -700px; }
      }

    .slideLeft{
        animation: slideLeft 0.6s;
        animation-iteration-count: 1
      }

    .FGplane, .MIDplane, .BGparticles{
        background-repeat: no-repeat;
        position: absolute; left: 0; top: 0;
        height: var(--sceneMaxHeight);
        animation: blur1 1s;
        animation-iteration-count: 1;
    }
    
    .FGplane{
        pointer-events: none;
    }
    
    .FGlastplane{
        background-repeat: no-repeat;
        position: absolute; left: 0; top: 0;
        height: var(--sceneMaxHeight);
        transition: 1s;
        filter: brightness(0.8) blur(3px);
        &:hover{
            transition: 1s;
            left: 5px; top: 2px;
            filter: brightness(1) blur(0px);
        }
    }
    
    .text-vn, .text-vn-main, .text-fade, #buttonBar{
    user-select: none; /* Non-prefixed version, currently */
    }
    
    .text-vn hr, .text-fade hr, .text-vn-main hr{
    display: block;
    border: none;
    width: 100%; height: 13px;
    margin: -3px 0 7px 0;
    text-align: center;
    background: url("../img/hr_vn.png") no-repeat center center;
    }
    
    
    .text-vn, .text-vn-main {
        color: #cccccc;
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translate(-50%);
    opacity: 0.95;
    display: block;
    text-align: center;
    
    width: 1008px; height: 172px; max-height: 172px;
    padding: 30px 138px 0px 138px;
    z-index: 4;
    font-size: 24px;
    text-shadow: 1px 1px 1px #000000;
    filter: drop-shadow(0px 1px 0px #000000) drop-shadow(1px 1px 2px #000000);
    }
    
    .text-vn {
    background: url("../img/vn-back-green.png") center center no-repeat;
    }

    /*ACTORS*/
    .actorRight {
        position: absolute;
        right: 100px;
        bottom: 0px;
        z-index: 3;
        filter: drop-shadow(0 0 2px #000000);
        }
    
    .actorCenter {
        position: absolute;
        left: 350px;
        bottom: 0px;
        z-index: 3;
        filter: drop-shadow(0 0 2px #000000);
        pointer-events: none;
        }

    #viewportContents{
        margin: auto;
        overflow: hidden;
        position: relative;
        z-index: 10;
        max-height: fit-content;
    }

    .exploreBoundaries{
        width: 100%;
        max-height: var(--sceneMaxHeight);
        margin: 0 auto;
        position: relative;
    }

    .exploreBoundaries:after, .exploreBoundaries:before{
        content: "";
        display: block;
        position: absolute;
        bottom: 0px;
        z-index: 15;
        pointer-events: none;
    }

    .interior{
        position: relative;
        background-attachment: local!important;
        height: 900px;
        margin: auto;
        padding: 0;
        animation: interior 2s 1;
        overflow-x: auto;
        scrollbar-width: none;
    }

    @keyframes interior{
        0%   { opacity: 0; filter: blur(1px);}
        100% { opacity: 1; filter: blur(0px);}
    }

    .explorePlane{
        position: absolute;
    }

    .parallax{
        z-index: 10;
        pointer-events: none;
    }

    .swaying{

        z-index: 10;

        pointer-events: none;
        animation: parallaxSway 45s infinite;
        filter: blur(2px);
    }

    @keyframes parallaxSway {
        0% { transform: translateX(0px); }
        50% { transform: translateX(-30px); filter: blur(15px);  }
        100% { transform: translateX(0px); }
    }

    .midplane{
        z-index: 9;
        pointer-events: none;
    }

    .bgparticles{
        z-index: 8;
        pointer-events: none;
    }
    
    .interior::-webkit-scrollbar {
        display: none;
    }

    
    /****************************/
    /***** EXPLORE ARROWS *******/
    /****************************/

    
    .node, .arrow-up, .arrow-right, .arrow-down, .arrow-left{
        background: url("../img/node.png") no-repeat center center;
        position: absolute;
        cursor: grab;
        border: none;
        width: 67px;
        height: 67px;
        padding: 0px;
        opacity: 0.1;
        z-index: 99;
        transition: 0.3s;
        animation: fadeNode 10s infinite;

        &:hover{
            opacity: 1.0!important;
            filter: brightness(1.1) drop-shadow(0px 0px 6px #FFFFFF);
        }
    }

    @keyframes fadeNode {
        0% { transform: translateY(0px); opacity: 0.1; }
        50% { transform: translateY(10px); opacity: 0.6;}
        100% { transform: translateY(0px); opacity: 0.1; }
        
    }

    @keyframes node {
        10% { transform: translate(-1px, -1px) scale(1.01, 1.01); }
        20% { transform: translate(1px, 0px) scale(.99, .99); }  
        30% { transform: translate(-2px, -2px) scale(1.01, 1.01); }
        40% { transform: translate(1px, 1px) scale(1, 1); }   
        50% { transform: translate(-1px, -1px) scale(.98, .98); }
        60% { transform: translate(0px, 1px) scale(1.02, 1.02); }
        70% { transform: translate(0px, -1px) scale(1, 1); }
        80% { transform: translate(2px, 3px) scale(.99, .99); }
        90% { transform: translate(-3px, -1px) scale(1.1, 1.1); }
        100% { transform: translate(1px, 1px) scale(.95, .95); }
        }
    
    /* typing effects by Geoff Graham
    https://codepen.io/geoffgraham/pen/jrWwWM */
    .text-vn p, .typing{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: typing 2s steps(30, end);
    }
    
    /* The typing effect */
    @keyframes typing {
    from { width: 0 }
    to { width: 100% }
    }
    
    .itemCover [class*="sceneActor"]{
            position: absolute; right: 100px; bottom: 0px; z-index: 3;
            filter: drop-shadow(0px 0px 2px #000000);
            animation: slideActor 0.5s;
            animation-iteration-count: 1
        }
        @keyframes slideActor{
        0% { right: 0px; }
        100% { right: 100px; }
        }
    
        .text-vn{
            animation: slideTextVN 0.2s;
            animation-iteration-count: 1
        }
    
        @keyframes slideTextVN{
            0% { left: 50.50%; }
            50% { left: 49.50%; }
            100% { left: 50%; }
            }
    
    .bounce{
        animation: bounce 0.3s;
        animation-iteration-count: 1
      }
      @keyframes bounce {
        from, to { transform: scale(1, 1); }
        25% { transform: scale(0.9, 1.1); }
        50% { transform: scale(1.1, 0.9); }
        75% { transform: scale(0.95, 1.05); }
      }
    
    .bounce2{
        animation: bounce2 0.2s;
        animation-iteration-count: 1
      }
      @keyframes bounce2 {
        from, to { transform: scale(1, 1); }
        25% { transform: scale(1.0, 1.1); }
      }