/* Responsive scaling (virtual stage 1920×1380) */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* prevent mobile scroll/zoom fighting the game */
}

#VirsText{
    position: absolute;
    width: 100%;
    margin-top: 4%;
    font-size: 200px;
    margin-left: 15%;
    color: rgba(46, 27, 129, 0.527);
    text-shadow:
    3px 4px rgb(0, 0, 0),              
    0 0 20px rgb(128, 0, 255),     
    0 0 20px rgb(0, 0, 0),     
     0 0 90px rgb(180, 106, 255); 
    

}
#canvasWrapper {
  position: relative;
  transform-origin: top left; /* zoom pivot point */
}

#SakumEkrandCanvas{
    /*
    width: 1920px;
    height: 1380px;
    */
    background-image: url("Sakums ekran.gif");
    background-size: cover;         
    background-position: center;    
    background-repeat: no-repeat;
    z-index: -4;
}
body{
    position: relative;
    width: 1920px;
    height: 1380px;
    max-width: none;
    max-height: none;
    margin: 0;
    background-image: url("concrete3.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    transform-origin: 0 0; /* scale/translate from top-left (set in java.js) */
}

/* Help mobile browsers: prevent gesture scrolling on interactive elements */
canvas, button, a{
    touch-action: none;
}

/* Fullscreen background video */
#Video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -10;
}

#SakAtpakalEkranPog{
    position: absolute;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 32%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}

#SakPog{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 22%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}

#NotPog{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 49%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}


#PaypalSite{
    position: absolute;
    margin-top: 28%;
    font-size: 80px;
    margin-left: 14%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;

}

#Donate{
    position: absolute;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 52%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);;
    
    
}

#NotTeksts{
    position: absolute;
    margin-top: 0%;
    font-size: 70px;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 20px;
    text-align: center;
    font-style: oblique;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-shadow: 3px 2px rgba(1, 69, 255, 0.226);
    border-color: rgb(1, 47, 173);;
}


#SpeletModel{
    position: absolute;
    margin-top: 51.9%;
    height: 385px;
    width: 300px;
    color: orange;
}

#Goblins{
    position: absolute;
    z-index: 1;
   
}

#PunktuDisplaysk{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 49%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);;
    text-align: center;
}



#superlode{
    position: absolute;
}

#SpelLaikBackground{
    position: absolute;
    z-index: -3;
}

#DonateNaudasSimbols{
    position: absolute;
    margin-top: 7%;
    margin-left: 30%;
}

#MatUzd{
    position: absolute;
    margin-top: 10%;
    font-size: 100px;
    margin-left: 49%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);;
}

#Uzlabojumi{
    position: absolute;
    margin-top: 4%;
    font-size: 200px;
    margin-left: 24%;
    color: rgba(46, 27, 129, 0.527);
    text-shadow:
    3px 4px rgb(0, 0, 0),              
    0 0 20px rgb(128, 0, 255),     
    0 0 20px rgb(0, 0, 0),     
     0 0 90px rgb(180, 106, 255); 
}

#Uzdevums{
    position: absolute;
    width: 78.5%;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 10.6%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#Ievade{
    position: absolute;
    margin-top: 45%;
    font-size: 100px;
    margin-left: 19%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#Atbilde{
    position: absolute;
    margin-top: 36%;
    font-size: 100px;
    margin-left: 21.2%;
    width: 58.5%;
    height: 20%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#IrNav{
    position: absolute;
    margin-top: 23%;
    font-size: 150px;
    margin-left: 39.5%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#ViegUzd{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 44%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#VidUzd{
    position: absolute;
    margin-top: 30%;
    font-size: 100px;
    margin-left: 44%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#GrutUzd{
    position: absolute;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 44%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#HpRad{
    position: absolute;
    margin-top: 52%;
    font-size: 100px;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 20px;
    text-align: center;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-color: rgb(1, 47, 173);;



}


#TurpSpel{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 2%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#PrimaisUzlab{
    position: absolute;
    font-style: italic;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 30.5%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}
#OtraisUzlab{
    position: absolute;
    font-style: italic;
    margin-top: 30%;
    font-size: 100px;
    margin-left: 26%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}
#TresaisUzlab{
    position: absolute;
    font-style: italic;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 17%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}

#Piederosie{
    position: absolute;
    text-align: center;
    font-style: italic;
    margin-top: 52.5%;
    font-size: 100px;
    margin-left: 65%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}
#AtpakalUzd{
    position: absolute;
    margin-top: 54%;
    font-size: 100px;
    margin-left: 41%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#Video{
    position: absolute;
    top: 0%;
    left: 0;
    width: 1921px;
    height: 1381px;
    object-fit: cover;
    z-index: -3;
}


#BeigtSpeliSpelesLaik{
    position: absolute;
    margin-top: 66.9%;
    font-size: 50px;
    margin-left: 0.5%;
    text-shadow: 2px 1px rgb(32, 32, 32);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(54, 54, 54);
}

#SuperLodesInventory{
    position: absolute;
    margin-top: 66.5%;
    font-size: 55px;
    margin-left: 77%;
    text-shadow: 1px 1px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
    width: 22%;
}

#HpBar{
    position: absolute;
    margin-top: 63%;
    margin-left: 62.3%;
    border: solid 20px white;
    position: absolute;
    border-radius: 25%;
    background: linear-gradient(to right,
    rgb(0, 71, 4) 0%,      /* Red starts at the beginning */
    rgb(0, 71, 4) 30%,     /* Red continues until 30% */
    rgb(0, 71, 4) 30%,  /* Yellow starts at 30% */
    rgb(0, 71, 4) 70%,  /* Yellow continues until 70% */
    rgb(0, 71, 4) 70%,   /* Green starts at 70% */
    rgb(0, 71, 4) 100%    /* Green ends at the end */
);
    border-width: 5px;
    width: 37%;
    height: 2.5%;
    border-style: outset;
    border-color: rgba(0, 0, 0, 0.507);
    box-shadow: 2px 7px 5px 0px rgb(113, 0, 179);
    
}
#Raundi{
     position: absolute;
    margin-top: 0.1%;
    font-size: 55px;
    margin-left: 0.1%;
    text-shadow: 1px 1px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    width: 99%;
    height: 82px;
    border-color: rgb(27, 27, 27);
    line-height: 82px;
    box-shadow: 0px 4px 10px 1px rgb(113, 0, 179);

}

#PromNoNoteik{
    position: absolute;
    margin-top: 64.5%;
    font-size: 100px;
    margin-left: 32%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}


#MobEPog{
    position: absolute;
     font-size: 1500%;
      margin-left: 60.5%;
       width: 18%;
      height: 24%;
      margin-top: 98.5%;
       text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}
#MobDPog{
    position: absolute;
     font-size: 1500%;
      margin-left: 60.5%;
      width: 18%;
      height: 24%;
      margin-top: 118.5%;
       text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}
#MobAPog{
    position: absolute;
     font-size: 1500%;
     width: 18%;
      height: 24%;
      margin-top: 118.5%;
       text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}
#MobQPog{
    position: absolute;
    margin-top: 98.5%;
     font-size: 1500%;
     width: 18%;
      height: 24%;
       text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
     
}