.overlap{
    position: absolute;
    top: 0;
    left: 0;
}


.dioramaCenter{
    position: relative;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    
}

.loadingDots{
    font-size: 60px!important;
}

.loadingDots:after {
    font-size: 60px!important;
    animation: dots 2s linear infinite;
    content: '';
  }

  @keyframes dots {
    0%, 20% {
      content: '.';
    }
    40% {
      content: '..';
    }
    60% {
      content: '...';
    }
    90%, 100% {
      content: '';
    }
}

.pointer{
    cursor: pointer;
}


/*#hideNodes{
    opacity: 0.5;
    transform: scale(0.8) translateX(-530px);
    position: absolute;
    bottom: 77px;

    z-index: 249;

    width: 100px;
    height: 100px;
    background: url('../GUI/btnInspect.png') no-repeat center center;
    transition: 0.2s;

    &:hover{
        transition: 0.2s;
        opacity: 1.0;
    }
}*/

#viewCollection{
    font-weight: normal;
    font-family: 'dirty';
    font-size: 25px;
    position: absolute;
    bottom: 0px;
    right: 3px;
    width: 78px;
    height: 77px;
    background: url('../img/basement/btn-collection.png') no-repeat center center;
    z-index: 249;
    color: #4f4f4f;
    opacity: 0.25;
    transform: scale(0.7);
    &:hover{
        opacity: 0.9;
        transform: scale(0.9);
        rotate: -8deg;
        
    }
}
  

.parallax-vine{
    display: none;
    position: absolute; left: -100px; bottom: 0; z-index: 159;
    transition: 3s;
    filter:  blur(3px);
    cursor: pointer;
    &:hover{
        position: absolute; left: -150px; bottom: 0; z-index: 159;
        transform: scale(1.1);
        filter:  blur(8px);
        transition: 3s;
    }
}

.moveVine{
    position: absolute; left: -450px; bottom: 0; z-index: 159;
    transform: scale(1.1);
    filter: blur(8px);
    transition: 1s;
}

.characterSprite{
    transition: 0.5s;
    filter: brightness(1.0);
}
.highlight{
    transition: 0.5s;
    filter: brightness(1.2);
}

.colorSwap{
    font-weight: normal;
    color: #545454;
}

.clockColor{
    color: #545454;  
}

.closeTab:hover{
    cursor: pointer;
}

#leftGUI{
    position: absolute;
    left: 37px;
    top: 190px;
    z-index: 249;
    width: fit-content;
    height: fit-content;
}

#dioramaTimestamp{
    margin: 0 0 7px;
    font-weight: normal;
    color: #6c6c6c;
    font-family:'dirty';
    font-size: 45px;
    
    text-transform: uppercase;
    &:hover{
        rotate: 3deg;
        cursor: default;
    }
}

.btnRefresh{
    position: absolute;
    top: 75px;
    right: 75px;
    width: 109px;
    height: 92px;
    rotate: 5deg;
    z-index: 200;
    filter: drop-shadow(8px 8px #000000);
    background: url('../img/basement/btn-refresh.png') center center no-repeat;
    &:hover{
        transform: scale(1.1);
        rotate: -5deg;
    }
}


.clickBox{
    cursor: pointer;
}

.backdropEffect{
    filter: drop-shadow(0 0px 2px rgba(3, 3, 3, 1)) drop-shadow(0 15px 1px rgba(3, 3, 3, 0.4));
}


#dioramaBasementWrapper {
    margin: 0 auto;
    position: relative;
    width: 1300px;
    max-width: 1300px;
    height: 848px;
    max-height: 848px;
}

.dioramaBasement, .lampOffBG, .backgroundBasement, .lampONBG, .lampON, .lampOFF, .lampONdark, .nightBG{
    position: absolute;
    width: 1300px;
    max-width: 1300px;
    height: 848px;
    max-height: 848px;
}

.dioramaItem{
    transition: 0.4s;
    &:hover{
        filter: brightness(130%);
    }
}

.lampOffBG{
    background: url("../img/basement/bg-nolight.png") center center no-repeat;
}

.lampOnBG{
    background: url("../img/basement/bg-lit.png") center center no-repeat;
}

.unlockBox{
    position: relative;
    text-align: left;
    display: inline-block;
    background: #010101;
    width: 375px;
    padding: 20px;
    margin: 20px;
    height: 175px;
    border: 1px solid #2d2d2d;
    border-radius: 15px;
    
    &:hover{
        filter: brightness(1.3) drop-shadow(0 0 7px rgba(255, 255, 255, 0.4));
        cursor: help;
        rotate: 2deg;
    }
}

.unlockBox small{
    position: absolute;
    bottom: 20px;
    font-size: 16px;
}



#displayCollection .check{
    position: absolute;
    top: -15px;
    right: -15px;
}

.lampON, .lampOFF, .lampONdark{
position: absolute; top: 0; left: 0;
}

.basement-peadodo{
    position: absolute;
    left: 795px;
    bottom: 175px;
}

.lampONBG{
    position: relative;
    background: url("../img/basement/bg-lit.png") center center no-repeat;
}

.lampON{
    background: url("../img/basement/bg-lamp.png") center center no-repeat;
    animation: light 8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.lampONdark{
    background: url("../img/basement/bg-lamp-dark.png") center center no-repeat;
    animation: flicker 8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite; 
}

.flicker{
animation: flicker 8s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: infinite; 
}

.light{
    animation: light 8s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite; 
}

@keyframes flicker {
    10% { opacity: 1.0; }
    15% { opacity: 0.85; }
    20% { opacity: 1.0; }
    25% { opacity: 1.0; }
    25% { opacity: 0.95; }
    30% { opacity: 1.0; }
    35% { opacity: 0.85; }
    40% { opacity: 0.90; }
    45% { opacity: 0.85; }
    50% { opacity: 0.70; }
    55% { opacity: 1.0; }
    60% { opacity: 0.85; }
    65% { opacity: 1.0; }
    70% { opacity: 0.90; }
    71% { opacity: 0.35; }
    72% { opacity: 0.42; }
    73% { opacity: 0.4; }
    74% { opacity: 1.0; }
    75% { opacity: 0.4; }
    78% { opacity: 1.0; }
    }

@keyframes light {
    10% { opacity: 1.0; }
    15% { opacity: 0.85; }
    20% { opacity: 1.0; }
    25% { opacity: 1.0; }
    25% { opacity: 0.95; }
    30% { opacity: 1.0; }
    35% { opacity: 0.85; }
    40% { opacity: 0.90; }
    45% { opacity: 0.85; }
    50% { opacity: 0.70; }
    55% { opacity: 1.0; }
    60% { opacity: 0.85; }
    65% { opacity: 1.0; }
    70% { opacity: 0.90; }
    74% { opacity: 1.0; }
    90% { opacity: 0.90; }
    100% { opacity: 1.0; }
}