TestF2CSS

@font-face {
font-family: "LunarSans";

src: url("https://pipe.miroware.io/5d82255bb72a043564fd78a6/LunarSans.otf");
color:  rgb(0, 0, 0);
}

#game {
    text-shadow: 0px 0px 0px rgb(0 0 0 / 100%);
	height: 100% !important;
	/*overflow-y: hidden !important;*/

}
.upgrade {
    background-color: rgb(128, 128, 128);
    cursor: pointer;
	width: 100%;

font-size: 18px;

display: inline-block;
}
.box{

}


body, html, div {
font-family: "LunarSans";
}

.thing {
padding: 5px;
    background-color: rgb(128, 128, 128);
color:  rgb(0, 0, 0);
width: 100%;
font-family: "LunarSans";
font-size: 18px;
/*height: 10%;*/
text-align: center !important;
line-height: 1.0 !important;
/*display: inline-block !important;*/

}
.thing:hover {
background-color: rgb(190, 190, 190);

}

.thing-costs{
padding: 0px !important;
}

#thing-0 {

left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-1 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-2 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-3 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-4 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-5 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-6 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-7 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
z-index: 2000 !important;
}
#thing-8 {

left: 0%;
  top: 0%;
  width: 100% !important;
 height: 100% !important;

position: absolute !important;
background-size: contain !important;
background-repeat: no-repeat !important;
z-index: 2000 !important;
}
#thing-9 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
background-repeat: no-repeat !important;
z-index: 2000 !important;
}
#thing-10 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
background-repeat: no-repeat !important;
z-index: 2000 !important;
}
#thing-11 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
background-repeat: no-repeat !important;
z-index: 2000 !important;
}
#thing-12 {
left: 0% !important;
top: 0% !important;
  width: 100% !important;
  height: 100% !important;
position: absolute !important;
background-repeat: no-repeat !important;
z-index: 2000 !important;
}



.thing.bigButton{
left: 0% !important;
top: 0% !important;
margin-left: auto !important;
    margin-top: auto !important;
position: absolute !important;
opacity: 1;
z-index: 900;
}

.thing.bigButton:hover{
	opacity: 1;
}
.bigButton:hover, .thing-icon:hover {
    transform: scale(1.05) !important;
    transition: transform 0.15s ease-out !important;
}


.menu1css {
  right: 25% !important;
  top: 0% !important;
  width: 38% !important;
  height: 42% !important;
overflow-x: hidden;
overflow-y: scroll;
position: absolute !important;
}


.scroll1 {
  height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
.playerhpposition {
  left: 5%;
  top: 45%;
  width: 25%;
  height: 300px;
font-size: 160%;
position: absolute !important;
}
.enemyhpposition {
  right: 0%;
  top: 74%;
  width: 25%;
  height: 20%;
font-size: 160%;
position: absolute !important;


}
.logcss {
  right: 25.1%;
  top: 42.5%;
  width: 37.7%;
  height: 31%;
font-family: "LunarSans";
position: absolute !important;
    background-color: rgb(128, 128, 128);
color: #000000;
font-size: 18px;
padding: 8px !important;
}

#logInner {
    display: table-cell;
    vertical-align: top;
}

.inventoryHeader{
  right: 0px;
  top: 0%;
  width: 25%;
  height: 5% !important;
	position: absolute !important;
overflow-x: hidden;
overflow-y: hidden;

display: inline-block !important;
min-height: 30px !important;
border-style: solid;
border-width: 2px;
border-color: #000;
z-index: 1000 !important;
}

.inventory1css {
  right: 0px;
  top: 5%;
  width: 25%;
  height: 40%;
	position: absolute !important;
overflow-x: hidden;
overflow-y: scroll;
}

.box-header{

}
.sellitemsHeader {
  right: 0px;
  top: 47%;
  width: 25%;
  height: 5% !important;
	position: absolute !important;
overflow-x: hidden;
overflow-y: hidden;


display: inline-block !important;

border-style: solid;
border-width: 2px;
border-color: #000;
}

.sellitemsCss {
  right: 0px;
  top: 52%;
  width: 25%;
  height: 20%;
	position: absolute !important;
overflow-x: hidden;
overflow-y: scroll;


}
.box-header {
background-color: rgb(128, 128, 128) !important;
right: 0% !important;
  top: 0% !important;
width: 100% !important;
height: 100% !important;
position: absolute !important;

padding: 10px;
margin-bottom 0px;
z-index: 1000;
color: #000000;
font-size: 18px;
text-align:center;
display: inline-block;

}
#box-things-Upgrades{
right: 0px;
  //top: 10% !important;
  width: 100%;
  height: 90%;
	position: absolute !important;

}
.ability1css {

  left: 0%;
  top: 80%;
  width: 5%;
	height: 100% !important;

  padding-top: 100%;

position: absolute !important;
}
.ability2css {
  left: 5%;
  top: 80%;
  width: 5%;
  padding-top: 100%;
position: absolute !important;
}
.ability3css {
  left: 10%;
  top: 80%;
  width: 5%;

  padding-top: 100%;
position: absolute !important;

}
.ability8css {
  left: 15%;
  top: 80%;
  width: 5%;
height: 5%;
  padding-top: 100%;
position: absolute !important;
}

#thing-text-4, #thing-text-6, #thing-text-5{
display: none !important;

}

.ability4css {
  left: 30%;
  top: 80%;
  width: 5%;
  padding-top: 100%;

position: absolute !important;
}
.ability5css {
  left: 35%;
  top: 80%;
  width: 5%;
  padding-top: 100%;
position: absolute !important;
}
.acritcss {
	  left: 30.5%;
	  top: 65%;
	  width: 6%;
  padding-top: 100%;
position: absolute !important;
}

.ability6css {
  left: 50%;
  top: 80%;
  width: 5%;
  padding-top: 100%;
position: absolute !important;
}
.ability7css {
  left: 55%;
  top: 80%;
  width: 5%;
  padding-top: 100%;
position: absolute !important;
}


.abilitymeleecss {
    background-color: rgb(128, 128, 128);
  left: 0%;
  top: 74%;
  width: 30%;
  height: 6%;
	position: absolute !important;
color:  rgb(0, 0, 0);
font-size: 18px;

border-style: solid;
border-width: 2px;
border-color: #000000FF;
}
.abilitydefcss {
    background-color: rgb(128, 128, 128);
  left: 30%;
   top: 74%;
  width: 20%;
  height: 6%;
position: absolute !important;
color:  rgb(0, 0, 0);
font-size: 18px;

border-style: solid;
border-width: 2px;
border-color: #000000FF;
}



.abilityregencss {
    background-color: rgb(128, 128, 128);
  left: 50%;
 top: 74%;
  width: 25%;
  height: 6%;
position: absolute !important;
color:  rgb(0, 0, 0);
font-size: 18px;

border-style: solid;
border-width: 2px;
border-color: #000000FF;
}

.box-things{
left: 0% !important;
top: 0% !important;
position: absolute !important;
width: 100% !important;
height: 5% !important;

}
#thing-icon-0, #thing-icon-1, #thing-icon-2, #thing-icon-3, #thing-icon-4, #thing-icon-5, #thing-icon-6, #thing-icon-7, #thing-icon-8, #thing-icon-9, #thing-icon-10, #thing-icon-11, #thing-icon-12 {
background-repeat: no-repeat !important;
 display: inline-block !important;
width: 100% !important;
height: 100% !important;

background-size: 100% auto !important;

z-index: 2000 !important;
}




.statscss {
  left: 5%;
  top: 15%;
  width: 25%;
  height: 300px;
position: absolute !important;
}

.thing-icon{
background-repeat: no-repeat !important;
}