:root {
    --bug-animation-duration: 30s;
}



.preload-img{
    visibility: hidden !important;
}


body{
    margin: 0 !important;
    background-color: #ffffff;
}

.prvipravi2-img{
    
     position: absolute !important;

     z-index: 80003;
}


.zaklon{
   
    z-index: 99999999999911999999;
}

.container .m{
    display: none;
    z-index: 80003;
    
}

.blocker{
    background-color: transparent !important;
}




.lok0{
     display: block;
 background-color: #eb4034;      
    border-radius: 100%;
        height: 5%;
        top: 49%;
        left: 12%;
        width: 5%;
    z-index: 79999;
    }


.lok1 {
    display: block;
    background-color: aqua;
    border-radius: 100%;
    height: 7%;
    top: 71%;
    left: 70%;
    width: 7%;
    z-index: 79999;
}
.lok2{
     display: block;
 background-color: #d13e0c;      
    border-radius: 100%;
        height: 7%;
        top: 13%;
        left: 26%;
        width: 7%;
    z-index: 79999;
    }
.lok3{
     display: block;
 background-color: #d13e0c;    
    border-radius: 100%;
        height: 7%;
        top: 58%;
        left: 82%;
        width: 7%;
        z-index: 79999;
    }
.lok4{
     display: block;
 background-color: #d13e0c;    
    border-radius: 100%;
        height: 7%;
        top: 59%;
        left: 44%;
        width: 7%;
        z-index: 79999;
    }

.lok5{
     display: block;
 background-color: #d13e0c;     
    border-radius: 100%;
        height: 7%;
        top: 43%;
        left: 76%;
        width: 10%;
        z-index: 79999;
    }
.lok6{
     display: block;
 background-color: #d13e0c;      
    border-radius: 100%;
        height: 10%;
        top: 0%;
        left: 69%;
        width: 10%;
        z-index: 79999;
    }
.lok7{
     display: block;
 background-color: #d13e0c;      
    border-radius: 110%;
        height: 7%;
        top: 69%;
        left: 87%;
        width: 7px;
        z-index: 79999;
    }




/* New moth location containers - clean movement range determinants */
.moth-lok0{
    display: block;
    background-color: rgba(235, 64, 52, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 49%;
    left: 12%;
    width: 1vw;
    z-index: 79998;
}

.moth-lok1 {
    display: block;
    background-color: rgba(0, 255, 255, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 71%;
    left: 70%;
    width: 1vw;
    z-index: 79998;
}

.moth-lok2{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 13%;
    left: 26%;
    width: 1vw;
    z-index: 79998;
}

.moth-lok3{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 58%;
    left: 82%;
    width: 1vw;
    z-index: 79998;
}

.moth-lok4{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 59%;
    left: 44%;
    width: 1vw;
    z-index: 79998;
}

.moth-lok5{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 43%;
    left: 76%;
    width: 1vw;
    z-index: 79998;
}

.moth-lok6{
    display: block;
    background-color: rgba(209, 62, 12, 0);
    position: absolute;
    border-radius: 0;
    height: 1vw;
    top: 0%;
    left: 69%;
    width: 1vw;
    z-index: 79998;
}



[data-role="bug"]{
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 80004;
}

[data-role="bug"].shown-bug{
    width: 0;
    height: 0;
    border-left: 0.5vw solid transparent;
    border-right: 0.5vw solid transparent;
    border-bottom: 0.8vw solid #49464f;
    position: absolute;
    transform-origin: center center;
}

/* Position each bug at its specific location */
[data-role="bug"].shown-bug.lok0{
    top: 49%;
    left: 12%;
    animation: bugAnimLok0 var(--bug-animation-duration);
     animation-fill-mode: forwards;
}

[data-role="bug"].shown-bug.lok1{
    top: 71%;
    left: 70%;
    animation: bugAnimLok1 var(--bug-animation-duration);
     animation-fill-mode: forwards;
}

[data-role="bug"].shown-bug.lok2{
    top: 13%;
    left: 26%;
    animation: bugAnimLok2 var(--bug-animation-duration);
     animation-fill-mode: forwards;
}

[data-role="bug"].shown-bug.lok3{
    top: 58%;
    left: 82%;
    animation: bugAnimLok3 var(--bug-animation-duration);
    animation-fill-mode: forwards;
}

[data-role="bug"].shown-bug.lok4{
    top: 59%;
    left: 44%;
    animation: bugAnimLok4 var(--bug-animation-duration);
     animation-fill-mode: forwards;
}

[data-role="bug"].shown-bug.lok5{
    top: 43%;
    left: 76%;
    animation: bugAnimLok5 var(--bug-animation-duration);
    animation-fill-mode: forwards;
}

[data-role="bug"].shown-bug.lok6{
    top: 0%;
    left: 69%;
    animation: bugAnimLok6 var(--bug-animation-duration);
     animation-fill-mode: forwards;
}

@keyframes bugAnim {
    0% { opacity: 0; transform: scale(0.8) rotate(0deg); }
    10% { opacity: 1; transform: scale(1) rotate(45deg); }
    50% { opacity: 0.8; transform: scale(1.1) rotate(180deg); }
    90% { opacity: 1; transform: scale(1) rotate(315deg); }
    100% { opacity: 0; transform: scale(0.8) rotate(360deg); }
}

@keyframes bugAnimLok3 {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.3; }
    5% { transform: scale(0.9) rotate(45deg); opacity: 0.6; }
    10% { transform: scale(1) rotate(90deg); opacity: 1; }
    15% { transform: translate(10px, 0px) scale(1) rotate(90deg); opacity: 1; }
    25% { transform: translate(30px, 0px) scale(1.1) rotate(135deg); opacity: 1; }
    35% { transform: translate(45px, -15px) scale(1) rotate(135deg); opacity: 0.9; }
    50% { transform: translate(60px, -30px) scale(1.1) rotate(180deg); opacity: 1; }
    65% { transform: translate(60px, -50px) scale(1) rotate(180deg); opacity: 1; }
    80% { transform: translate(45px, -70px) scale(1.1) rotate(225deg); opacity: 0.9; }
    95% { transform: translate(25px, -85px) scale(1) rotate(225deg); opacity: 0.8; }
    100% { transform: translate(5px, -100px) scale(0.8) rotate(225deg); opacity: 0; }
}

@keyframes bugAnimLok1 {
    0% { transform: scale(0.7) rotate(0deg); opacity: 0.1; }
    8% { transform: scale(0.9) rotate(-60deg); opacity: 0.6; }
    15% { transform: scale(1) rotate(-60deg); opacity: 1; }
    20% { transform: translate(5px, -8px) scale(1) rotate(-60deg); opacity: 1; }
    30% { transform: translate(15px, -25px) scale(1.1) rotate(-30deg); opacity: 1; }
    45% { transform: translate(30px, -35px) scale(1) rotate(0deg); opacity: 0.9; }
    60% { transform: translate(30px, -55px) scale(1.1) rotate(0deg); opacity: 1; }
    75% { transform: translate(45px, -70px) scale(1) rotate(30deg); opacity: 1; }
    90% { transform: translate(65px, -80px) scale(1.1) rotate(60deg); opacity: 0.8; }
    100% { transform: translate(85px, -85px) scale(0.6) rotate(90deg); opacity: 0; }
}

@keyframes bugAnimLok2 {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.7; }
    6% { transform: scale(1) rotate(30deg); opacity: 0.8; }
    12% { transform: scale(1.1) rotate(60deg); opacity: 1; }
    18% { transform: translate(5px, -8px) scale(1) rotate(60deg); opacity: 1; }
    28% { transform: translate(20px, -15px) scale(1.1) rotate(90deg); opacity: 1; }
    40% { transform: translate(40px, -15px) scale(1) rotate(90deg); opacity: 0.9; }
    55% { transform: translate(60px, -15px) scale(1.1) rotate(120deg); opacity: 1; }
    70% { transform: translate(75px, 0px) scale(1) rotate(120deg); opacity: 0.9; }
    85% { transform: translate(85px, 20px) scale(1.1) rotate(150deg); opacity: 0.8; }
    100% { transform: translate(90px, 45px) scale(0.9) rotate(180deg); opacity: 0; }
}

@keyframes bugAnimLok4 {
    0% { transform: scale(0.9) rotate(0deg); opacity: 0.5; }
    7% { transform: scale(1) rotate(-45deg); opacity: 0.8; }
    14% { transform: scale(1.1) rotate(-90deg); opacity: 1; }
    21% { transform: translate(-12px, 0px) scale(1) rotate(-90deg); opacity: 1; }
    35% { transform: translate(-25px, 0px) scale(1.1) rotate(-60deg); opacity: 1; }
    50% { transform: translate(-35px, -18px) scale(1) rotate(-30deg); opacity: 0.9; }
    65% { transform: translate(-40px, -40px) scale(1.1) rotate(0deg); opacity: 1; }
    80% { transform: translate(-40px, -65px) scale(1) rotate(0deg); opacity: 0.8; }
    95% { transform: translate(-25px, -85px) scale(0.9) rotate(30deg); opacity: 0.6; }
    100% { transform: translate(-5px, -100px) scale(0.7) rotate(60deg); opacity: 0; }
}

@keyframes bugAnimLok5 {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.1; }
    10% { transform: scale(1) rotate(120deg); opacity: 0.6; }
    18% { transform: scale(1.1) rotate(120deg); opacity: 1; }
    25% { transform: translate(10px, 6px) scale(1) rotate(120deg); opacity: 1; }
    35% { transform: translate(25px, 18px) scale(1.1) rotate(150deg); opacity: 1; }
    50% { transform: translate(35px, 35px) scale(1) rotate(180deg); opacity: 0.9; }
    65% { transform: translate(35px, 55px) scale(1.1) rotate(180deg); opacity: 1; }
    80% { transform: translate(20px, 75px) scale(1) rotate(210deg); opacity: 0.8; }
    95% { transform: translate(0px, 90px) scale(0.9) rotate(240deg); opacity: 0.6; }
    100% { transform: translate(-25px, 100px) scale(0.6) rotate(270deg); opacity: 0; }
}

@keyframes bugAnimLok6 {
    0% { transform: scale(0.7) rotate(0deg); opacity: 0.4; }
    8% { transform: scale(0.9) rotate(150deg); opacity: 0.7; }
    16% { transform: scale(1) rotate(150deg); opacity: 1; }
    24% { transform: translate(-8px, 15px) scale(1) rotate(150deg); opacity: 1; }
    35% { transform: translate(-20px, 35px) scale(1.1) rotate(180deg); opacity: 1; }
    50% { transform: translate(-20px, 60px) scale(1) rotate(180deg); opacity: 0.9; }
    65% { transform: translate(-20px, 85px) scale(1.1) rotate(210deg); opacity: 1; }
    80% { transform: translate(-35px, 105px) scale(1) rotate(240deg); opacity: 0.8; }
    95% { transform: translate(-55px, 120px) scale(0.9) rotate(270deg); opacity: 0.6; }
    100% { transform: translate(-80px, 120px) scale(0.8) rotate(300deg); opacity: 0; }
}

@keyframes bugAnimLok0 {
    0% { transform: scale(0.6) rotate(0deg); opacity: 0.1; }
    4% { transform: scale(0.7) rotate(45deg); opacity: 0.4; }
    8% { transform: scale(0.8) rotate(45deg); opacity: 0.6; }
    12% { transform: scale(1) rotate(45deg); opacity: 0.8; }
    18% { transform: translate(8px, -8px) scale(1) rotate(45deg); opacity: 1; }
    25% { transform: translate(20px, -20px) scale(1.1) rotate(90deg); opacity: 1; }
    35% { transform: translate(35px, -20px) scale(1.2) rotate(90deg); opacity: 1; }
    45% { transform: translate(55px, -20px) scale(1.1) rotate(135deg); opacity: 1; }
    55% { transform: translate(70px, -5px) scale(1) rotate(135deg); opacity: 0.9; }
    65% { transform: translate(85px, 10px) scale(1.1) rotate(180deg); opacity: 0.9; }
    75% { transform: translate(85px, 35px) scale(1) rotate(180deg); opacity: 0.8; }
    85% { transform: translate(85px, 60px) scale(0.9) rotate(225deg); opacity: 0.7; }
    95% { transform: translate(70px, 75px) scale(0.8) rotate(225deg); opacity: 0.5; }
    100% { transform: translate(50px, 90px) scale(0.7) rotate(270deg); opacity: 0; }
}





.container .m0{
     display: none;
    background-color: rgba(252, 186, 3, .0);
        border-radius: 100%;
        height: 19%;
        top: 28%;
        left: 10%;
        width: 19%;
    z-index: 80006;
    }

.container .m1 {
     display: none;
    background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 60%;
        left: 51%;
        width: 19%;
    z-index: 80006;
    }
.container .m2{
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
        top: 5%;
        left: 24%;
        width: 19%;
    z-index: 80006;
    }
.container .m3{
     display: none;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 46%;
        left: 75%;
        width: 19%;
        z-index: 80006;
    }


.container .m4{
     display: none;
     background-color: rgba(69, 137, 196, .0);
        border-radius: 100%;
        height: 19%;
        top: 45%;
        left: 33%;
        width: 19%;
        z-index: 80006;
    }

.container .m5{
     display: none;
     background-color: rgba(120, 118, 140, .0);
        border-radius: 100%;
        height: 19%;
        top: 38%;
        left: 63%;
        width: 19%;
        z-index: 80006;
    }


.container .m6{
     display: none;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 0%;
        left: 69%;
        width: 19%;
        z-index: 80006;
    }
.container .m7{
     display: none;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 61%;
        left: 68%;
        width: 19%;
        z-index: 80006;
    }



.container .wikiread{
     display: none;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 38%;
        left: 63%;
        width: 15%;
        z-index: 80006;
    }



.uputecursor
{
    position: absolute;
  display: inline-block;
     visibility: visible;
     background-color: rgba(19, 19, 76, .0);
        
        height: 67%;
        top: 55%;
        left: 35%;
        width: 68%;
        z-index: 80003;
 }

.keyholdlinkbutton {
  display: block;
     visibility: visible;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 38%;
        left: 63%;
        width: 15%;
        z-index: 899999990004;
 }
 .keyholdlinkbuttondiv{
  display: none;
     visibility: hidden;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 58%;
        left: 63%;
        width: 15%;
        z-index: 899999990004;
}
.togllebutton{
  display: none;
         visibility: hidden;
     background-color: rgba(19, 19, 76, .0);
        border-radius: 100%;
        height: 15%;
        top: 28%;
        left: 63%;
        width: 15%;
        z-index: 899999990004;
 }



 .container .keyholdlink{
    border-radius: 0;
    color: red;
        z-index: 7999999;
  }



 .container .todolink{
        top: 5%;
        left: 58%;
        border-radius: 0;
        height: 15%;
      
        width: 15%;
        z-index: 7999999;
        display: block;
    visibility: visible;
    }
    


#myDIV{
        top: 0%;
        left: 0%;
     height: 120%;
        width: 100%;
 display: block;
   visibility: hidden;
    z-index: 10000000000000;
    }
   



 .container .todo2{
        top: 4%;
        left: 94%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
     
        height: 5%;
  width: 5%;
        z-index: 7999999;
 }







 .container .t0m0{
        top: 35%;
        left: 23%;
    display: none;
     background-color: rgba(72, 134, 111, 0);
        border-radius: 100%;
        height: 19%;
  width: 25%;
        z-index: 7999999;
 }

.vidljivo{
        top: 22%;
        left: 69%;
    display: block;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 799999999999999;
    visibility: visible;
 }



 .container .t0m3{
        top: 22%;
        left: 65%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container .t0bm0{
        top: 34%;
        left: 13%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }
 .container .t0bm3{
        top: 22%;
        left: 47%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container  .t1m2{
        top: 27%;
        left: 23%;
      
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t1m7{
 top: 68%;
 left: 99%;
  display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2m3{
        top: 15%;
        left: 24%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2m0{
        top: 14%;
        left: 54%;
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2bm3{
        top: 55%;
        left: 24%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t2bm0{
        top: 54%;
        left: 54%;
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t3m1{
        top: 45%;
        left: 7%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }




 .container  .t3m4{
        top: 17%;
        left: 7%;
     display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container .t4m5{
        top: 1%;
        left: 80%;
   display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }

 .container .t4m5b{
        top: 1%;
        left: 99%;
   display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


.container .t4m7{
 top: 19%;
            left: 99%;

 display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container  .t5m0{
        top: 30%;
        left: 26%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }




 .container  .t5m6{
        top: -7%;
        left: 85%;
    display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }



 .container  .t6m0{
        top: 30%;
        left: 83%;
   display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        width: 4%;
        z-index: 7999999;
 }




 .container  .t6m4{
        top: 18%;
        left: 43%;
display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


 .container  .t62m0{
          top: 12%;
        left: 40%;
 display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }




 .container  .t62m4{
         top: 23%;
        left: 18%;
 display: none;
     background-color: rgba(59, 112, 93, .0);
        border-radius: 100%;
        height: 19%;
  width: 19%;
        z-index: 7999999;
 }


.container .d11{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 69%;
        left: 7%;
        width: 19%;
        z-index: 80005;
    }

.container .d12{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 82%;
        top: 69%;
        left: 48%;
        width: 19%;
        z-index: 80004;
    }

.container .d13{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 82%;
        top: -66%;
        left: 1%;
        width: 100%;
        z-index: 80004;
    }

.container .d10{
     display: block;
     background-color: rgba(10, 15, 26, .0);
        border-radius: 100%;
        height: 19%;
        top: 69%;
        left: 82%;
        width: 19%;
        z-index: 80004;
    }

      .container .c{
           display: block !important;
           background-color: rgba(10, 15, 26, .10);
        border-radius: 100%;
        height: 2%;
        top: 83%;
        left:13%;
        width: 2%;
          z-index: 100000;
    }
     .container .c1{
          background-color: rgba(10, 15, 26, .10);
        border-radius: 100%;
        height: 2%;
        top: 83%;
        left: 26%;
        width: 2%;
    }
 .container .c2,
 .container .c3,
 .container .c4,
 .container .c5,
 .container .c6,
 .container .c7,
 .container .c8,
 .container .c9 {
    background-color: rgba(10, 15, 26, .10);
    border-radius: 100%;
    height: 2%;
    top: 83%;
    width: 2%;
}

.container .c10{
      background-color: rgba(10, 15, 26, .10);
        border-radius: 100%;
        height: 2%;
        top: 83%;
        left: 87%;
        width: 2%;
    }

.loader {
    width: 100px;
    height: 100px;
    -webkit-perspective: 100px;
    perspective: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

.picture{
    display: none;
    width: 40px;
    height: 25px;
   
    position: absolute;
    left: 5%;
    top:6%;
}

.moljaccrni-img {
    position: relative;
    display: block;
    width: 3px;
    height: 3px !important;
    position: absolute;
    z-index: 800020;
}



.key-hold-img,
.key-hold-bug{
    z-index: 80007;
    display: none;
}

.bug-buttons{
    z-index: 80008;
    display: none;
    position: absolute;
    bottom: 20%;
    width: 100%;
}

.bug-buttons button {
    background-color: #585858;
    color: white;
    padding: 5px 15px;
    border: none;
    border-radius: 2px;
    margin: 20px;
}




.key-hold-img .govno{
    z-index: 80007;
    display: block !important;
}

.key-hold-img .teleskopImages{
    z-index: 80007;
    display: block !important;
}

.key-hold-img .wall-image-hold{
    z-index: 80007;
    display: block !important;
}

.key-hold-img .zaklon{
    z-index: 99999999999911999999;
    display: block !important;
}

.key-hold-img .blink{
    z-index: 1;
    display: block !important;
}

 .higher-z-index{
       z-index: 99006; 
}


.container a {
    display: block;
    position: absolute;
    background-color: aqua;
    height: 8%;
    top: -1%;
    left: 37%;
    width: 8%;
}

.container a:after {
    content: "m";
    font-size: 0;
    -webkit-animation: colorchange 0s;
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    background-color: skyblue;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    border-radius: 100%;
    z-index: 10;
}

body:not(.auto-link-click-enabled) .container a:not(.first-links){
    display: none;
    pointer-events: none;
    cursor: default;
}

body:not(.auto-link-click-enabled) .container a:after{
    display: none !important;
}


.c{
    visibility: hidden;
}


.bug-text,
.fixed-chat-parent{
    position: fixed;
    bottom: 10px;
    text-align: center;
    width: 100%;
    left: 0;
}

.container a.c:after{
    display: none !important;
}



@-webkit-keyframes blinker {
    
    from {opacity: 0.4;transform: scale(0)}
    to {opacity: 0.8;transform: scale(1)}
}
.blink{
        color: aqua;

z-index: 14;
}

.container a.shown,
.container a.shown:after{
    pointer-events: auto;
    display: block;
}


/*
  .s, .d, .f, .e {  
    -webkit-animation:colorchange 13s;
}

@-webkit-keyframes colorchange {
    0% {
        background-color: #fafdfa;
    }
    
    50% {
        background-color: #fafdfa;
    }


}
*/
p {
    display: block;
    color: black;
    position: relative;
    margin-top: 10px;
    margin-left: 100px;

}

div.container {
    /* Natural image proportions: 690x771 (aspect ratio 1.117) */
    width: min(680px, 95vw);                    /* Desktop: 690px, Mobile: 95% of screen */
    height: min(771px, calc(95vw * 1.117));     /* Maintains exact 690:771 ratio */
    margin: auto;
    margin-top: 120px;
    position: relative;
        background-color: #ffffff;
    overflow: hidden;
}

/* Add the light cone effect */
div.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center 30%,
        rgba(255, 255, 200, 0.15) 0%,
        rgba(255, 255, 200, 0.1) 40%,
        rgba(0, 0, 0, 0.2) 80%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 80008;
}

.load-img{
    position: relative !important;
}

body div.container .wall-image{
    z-index: 9;
    width: 25.7%;
    position: absolute;
    top: 0%;
    left: 0%;
    height: 14.3%;
}



   


div.container img{
    width: 100%;                /* Fill container width */
    height: 100%;               /* Fill container height */
    object-fit: contain;        /* Maintain aspect ratio, no stretching */
    position: absolute;
    top: 0;
    left: 0;
}

.okrugli-link{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: block;
    margin: 0 auto;
    background-color: blue;
   
}
/*
.link1{
    left: 30%;
    top: 15%;
}

.link2{
    left:40%;
    top: 50%;
}

.link3{
    left:83%;
    top: 53%;
}

.link4{
    left:85%;
    top: 13%;
}

.link5{
    left:68%;
    top: 43%;
}
.link6{
    left:70%;
    top: 58%;
} 
.link7{
    left:61%;
    top: 69%;
}
.link8{
    left:21%;
    top: 29%;
}



 */

.kukac{  
   z-index: 10;
}


.teleskop-pokazan .tunos{  
    display: none !important;
}

.slika-pokazana .sunos{  
    display: none !important;
}

.prozorpodloga-pokazan .skok{
    display: none !important;
}


.teleskop-img{
    display: none;
}

.teleskop-pokazan:not(.teleskop-pokazan-uvjek) .teleskop-img{
    z-index: 80;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-name: show;
    animation-name: show;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
 html .teleskop-pokazan.teleskop-pokazan-uvjek .teleskop-img
 {
     display: block !important;
     z-index: 80;
 }

@-webkit-keyframes show {
    0% {
       display: none;
    }
    100% {
        display: block !important;
    }
}


@-webkit-keyframes hide {
    100% {
        display: none !important;
    }
}

.teleskop-pokazan .t{
        display: block !important;
}

a.disabled{
        display: none !important;
}

.slika-pokazana .pipa{
        display: block !important;

}

.t{
    display: none !important;
}

.ot{
    display: block;
}

.zat,
.skok{
    display: none !important;
     z-index: 90;
}

.prozor-otvoren .zat,
.prozor-otvoren .skok{
    display: block !important;
}

.prozor-img{
    display: block !important;
    z-index: 90;
    transition: opacity 0s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 0;
}

body.prozor-otvoren:not(.prozor-otvoren-uvjek) .prozor-img{
    opacity: 1;
    transition: opacity 4s;
}

body.prozor-otvoren.prozor-otvoren-uvjek .prozor-img
{
    display: block !important;
    z-index: 90;
    opacity: 1;
    transition: opacity 4s;

}



body .prozorpodloga-img {
    opacity: 0;
    display: block !important;
    transition:3s all;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
        z-index: 80005;


}

body.prozorpodloga-pokazan:not(.prozorpodloga-pokazan-uvjek) .prozorpodloga-img {
    opacity: 1;
}

body.prozorpodloga-pokazan.prozorpodloga-pokazan-uvjek .prozorpodloga-img {
    display: block !important;
    z-index: 80005;
    opacity: 1;
}

.prozor-otvoren{
    display: block !important;
     z-index: 90;
}



.prozor-otvoren .ot{
    display: none !important;
    
}




#svemir{
    background-color: #1a1a1c;
    z-index: 99999;
    display: none;
    /* Match main container dimensions and positioning */
    width: min(680px, 95vw);
    height: min(771px, calc(95vw * 1.117));
    position: absolute !important;
    top: 0px;
    left: 0%;
   
}

.modal p{
    margin-left: 0 !important;
    font-family: Arial, Helvetica, sans-serif;
}

.modal h4{
    font-family: Arial, Helvetica, sans-serif;
}

.blocker{
    z-index: 9999999999 !important;
}



body:hover{
    cursor: url(../images/cursorlook.png), auto;
}

a:hover,
button:hover{
    cursor: url(../images/cursormove.png), auto;
}

[data-wiki]:hover{
    cursor: url(../images/cursorkomp.png), auto !important;
}

/*body.auto-link-click-disabled-medlodia *{*/
    /*cursor: not-allowed !important;*/
/*}*/

embed{
    position: absolute;
    top: -500px;
    left: -500px;
}

[data-role="chat-parent"]
{
    border:1px solid #888270;
    border-radius: 4px;
    padding: 20px;
    width: 400px;
    display: inline-block;
    background-color: #fbfdfa;
    float: left;
}

[data-role="location"]
{
    height: 20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    line-height: 20px;
    text-align: center;
    /*border-bottom:1px solid #888270;*/
}

[data-role="location"] h3{
    margin: 0 !important;
}

.main-chat-parent{
    display: none;
}

[data-role="chat-parent"] [data-role="message"]{
    height: 300px;
    overflow: auto;
    display: block;
}

[data-role="chat-parent-user"]{
    position: relative !important;
    margin: 0 auto;
    right: auto !important;
    top: auto !important;
}

[data-role="chat-parent"] textarea{
    width: 300px;
    float: left;
    height: 60px;
    border: 1px solid #888270;
}

[data-role="chat-parent-user"] textarea{
    width: 247px;
    float: left;
    height: 30px;
    border: 1px solid #888270;
}


[data-role="chat-parent-user"] button{
    height: 30px;
    float: left;
    border-left: 0;
    border: 1px solid #888270;
    background-color: white;
}

[data-role="chat-parent"] button{
    width: 100px;
    height: 60px;
    float: left;
    border-left: 0;
    border: 1px solid #888270;
    background-color: white;
}

.admin-container{
    padding: 60px;
    text-align: center;
}

.info h3{
    font-weight: bold;
}

.info h3,
.info p{
    display: inline-block;
    color: black;
    font-size: 12px;
    margin: 0;
}

.info{
    margin-left: -20px;
    margin-right: -20px;
    border-bottom: 1px solid #888270;
    padding-bottom: 5px;
}

.user-chat{
    position: fixed;
    width: 300px;
    top: 20px;
    right: 20px;
}

.user-chat[data-role="chat-parent"] textarea{
    width: 200px;
}

.container a[class*="m0"]:after {
    background-color: rgb(252, 186, 3);
}

.container a[class*="m1"]:after {
    background-color: rgb(10, 15, 26);
}

.container a[class*="m2"]:after {
    background-color: rgb(59, 112, 93);
}

.container a[class*="m3"]:after {
    background-color: rgb(10, 15, 26);
}

.container a[class*="m4"]:after {
    background-color: rgb(69, 137, 196);
}

.container a[class*="m5"]:after {
    background-color: rgb(120, 118, 140);
}

.container a[class*="m6"]:after {
    background-color: rgb(10, 15, 26);
}

.container a[class*="m7"]:after {
    background-color: rgb(10, 15, 26);
}