@font-face{
	font-family: "Expressway-rg";
	src: url("Data/Font/expresswayrg.ttf") format("truetype");
}
@font-face{
	font-family: "CarbonBl";
	src: url("Data/Font/carbonbl.ttf") format("truetype");
}
.standardButton{
    width: 11vw;
    height: auto;
    image-rendering: auto;
    z-index: 50;
    margin-bottom: 1vw;
	z-index: 50;
}
.standardText{
	position: relative;
	font-size: 5vw;
	top: -5vw;
	text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
	z-index: 0;
	color: #ff8145;
}
.standardTextHeader{
	font-size: 6vw;
	top: -3vh;
	color: #bc83bf;
	text-shadow: #000 0px 0px 1vw, #000 0px 0px 1vw, -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
}
.standardTextHeader2{
	font-size: 6vw;
	color: rgb(255,231,0);
	text-shadow: #000 0px 0px 1vw, #000 0px 0px 1vw, -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
}
.standardTextSmall{
	position: relative;
	font-size: 8vw;
	text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
}
.standardIcon{
	width: 9vw;
}
.standardFadeIcon{
	width: 10vw;
}
.blackBorder{
	color: #b9a90f;
	text-shadow: #000 0px 0px 1vw, #000 0px 0px 1vw, -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
}
.imageBorder{
	padding: 15px;
	border-image: url("Data/Sprites/border1.png") 10 round;
	border-image-slice: 10 10 10 10 fill; border-image-width: 20px 20px 20px 20px; border-image-repeat: repeat repeat;
	image-rendering: pixelated;
}

.tooltip{
	display:inline-block;
	width: 3vw;
}

.tooltip .tooltipText{
	visibility: hidden;
	position: absolute;
	width:50vw;
	height:12vw;
	left: 13vw;
	z-index: 10;
	line-height: 3vw;
	font-size: 2vw;
	color: #ffefb1;
}

.tooltip:hover .tooltipText {
		visibility: visible;

}

.tooltip2{
	display:inline-block;
	width: 3vw;
	z-index: 102;
}

.tooltip2 .tooltipText2{
	visibility: hidden;
	position: absolute;
	width:50vw;
	height:12vw;
	right: 3vw;
	z-index: 102;
	line-height: 3vw;
	font-size: 2vw;
	text-align: left;
	color: #ffefb1;
}

.tooltip2:hover .tooltipText2 {
		visibility: visible;

}

#loading {
    background: url('Data/Gem Hoarder.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

#cashTextHolder{
	position: absolute;
	top: 76vw;
	left: 35vw;
	z-index: 5;
}
#cashText{
	position: relative;
	top: -2vh;
	color: rgb(25,129,35);
}
#cashFadeIcon{
	position: absolute;
	top: 76vw;
	left: 34vw;
	z-index: 0;
}
#textCentered{
	position: absolute;
	width:60vw;
	top: 60vh;
	left: 20vw;
}
#textCentered2{
	position: absolute;
	width:54vw;
	top: 52vw;
	left: 24vw;
}
#upgradeHolder{
	position: absolute;
	top: 6vw;
	width: 25vw;
	left: 0.5vw;
	line-height: 0vw;
}
#upgradeHolder2{
	text-align: right;
	position: absolute;
	top: 6vw;
	width: 25vw;
	right: 8vw;
	line-height: 0vw;
	margin-right: 0vw;
	z-index: 50;
}
#upgradeCountHolder{
	text-align: center;
	position: absolute;
	top: 3vw;
	color: #5b0833;
	width: 3vw;
	left: 4.5vw;
	line-height: 1.75vw;
	pointer-events: none;
}
#upgradeCountHolder2{
	text-align: center;
	position: absolute;
	top: 3vw;
	color: #5b0833;
	width: 3vw;
	right: 4vw;
	z-index: 120;
	line-height: 1.75vw;
	pointer-events: none;
}
#gem1 {
    position: absolute;
    
    width: 50vw;
    height: auto;
    image-rendering: crisp-edges;
    z-index: 1;
}
#gem1fade {
    position: absolute;
    top: 7vh;
	left: 24.5vw;
    width: 52vw;
    height: auto;
    image-rendering: auto;
    z-index: 0;
}
#gemcrack1 {
    position: absolute;
    left: 24vw;
    top: 40vh;
    width: 50vw;
    height: auto;
    image-rendering: crisp-edges;
    z-index: 2;
}
#buttonLeft {
    position: absolute;
    left: 24vw;
    top: 77.5vh;
    width: 21vw;
    height: auto;
    image-rendering: auto;
}
#buttonRight {
    position: absolute;
    left: 55vw;
    top: 77.5vh;
    width: 21vw;
    height: auto;
    image-rendering: auto;
	z-index: 100;
}
#healthbar1 {
    position: absolute;
    left: 20vw;
    top: 63vh;
    width: 60vw;
    height: 4vw;
    background-color: black;
    z-index: 1;
    box-shadow: #000 0px 0px 1vw;
}
#healthbar2 {
    position: absolute;
    left: 20.25vw;
    top: 63.25vh;
    width: 59.5vw;
    height: 3.5vw;
    background-color: rgb(50,205,50);
    z-index: 2;
}
#displayGemHealth{
	position: relative;
	margin-bottom: 0vw;
	text-align: center;
	font-size: 3.2vw;
	z-index: 3;

}
#displayGemName{
	font-family: "CarbonBl";
	position: relative;
	margin-top: 0vw;
	margin-bottom: 0vw;
	text-align: center;
	font-size: 5vw;
	z-index: 3;
	text-shadow: #000 0px 0px 1vw, #000 0px 0px 1vw, #000 0px 0px 1vw, #000 0px 0px 1vw,  -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;

}
#displayGemValue{
	position: relative;
	margin-top: -0.5vw;
	text-align: center;
	font-size: 3.2vw;
	z-index: 3;
}
#buttonUpgrades{
	position: absolute;
    left: 1vw;
    top: 22.5vw;
    width: 5vw;
    height: 5vw;
    image-rendering: crisp-edges;
}
#displayDPS{
	text-align: center;
	font-size: 3vw;
	color: #bcbcbc;
}


body{
	color:FFFFFF;
	font-family: "Expressway-rg";
	touch-action: manipulation;
	height: 100%;
    overflow: hidden;
	max-width: 320px; 
	max-height: 320px;
	margin: 0 auto !important; 
	float: none !important; 
}
.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#header{
	text-align: right;
	font-size: 1.5vw;
	
}

#header>a{
	color: rgb(28, 72, 218);
}

#header>a:hover{
	color: rgb(28, 158, 218);
}