body{
    margin: 0px;
    background: url("./bg.png");
    background-size: 64px;
    image-rendering: pixelated;
    box-shadow: inset 0px 0px 128px 4px black;

}

@font-face{
    font-family: mcfont;
    src: url("./mcfont.otf");
}
body,html{
    overflow: hidden;
    width: 100%;
    height: 100%;
}
*{
    font-family: mcfont;
    user-select: none;
}
.container{
    width: 80%;
    height: auto;
    background: rgb(199,199,199);
    position: fixed;
    left: 50%;
    top: 128px;
    transform: translate(-50%,0px);
    padding: 16px;
}
.slot ,.invslot{
    width: 64px;
    height: 64px;
    background: rgb(144,144,144);
    display: inline-block;
    margin: 2px 2px 2px 2px;
    border: 1px solid #fff;
    box-shadow: inset 1px 1px 1px 1px black,inset -1px -1px 1px 1px white;
    /* overflow: hidden; */
}

.slot{
    position: relative;
    left: 16px;
}
.buy ,.inv,.auto-miner{
    /* padding: 16px 32px; */
    background: rgb(106,106,106);
    outline: 2px solid black;
    background-size: cover;
    image-rendering: pixelated;
    border: 1px solid white;
    /* border-radius: 4px; */
    color: white;
    /* font-weight: bold; */
    font-size: 32px;
    /* outline: none; */
    /* transform: translate(-50%,-50%); */
    /* position: absolute; */
    /* left: 50%; */
    /* bottom: 64px; */
    cursor: pointer;
    z-index: 13;
    flex: 1;
    /* border: none/; */
    margin: 4px 0px;
    text-shadow: 4px 4px 1px 1px black;
    
}
.auto-miner h6{
    padding: 0px;
    margin: 0px;
}
.buy:hover, .inv:hover{
    outline: 1px solid white;
}
.buy:active, .inv:active{
    background: rgb(100,100,100);
}
.btns{
    width: 45%;
    height: 116px;
    /* border: 1px solid white; */
    display: flex;
    justify-content:  space-between;
    flex-direction: column;
    transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    bottom: 8px;
}

.block ,.item{
    margin: 0px 0px;
    padding: 0px;
    width: 64px;
    height: 64px;
    display: block;
    image-rendering: pixelated;
    cursor: pointer;
    z-index: 12;
    background-size: cover !important;
}

.balance ,.price{
    color: white;
    font-size: 20px;
    z-index: 32;
    position: fixed;
}
.price{
    top: 32px;
}
.inventory{
    width: 72%;
    height: 70%;
    background: rgb(199,199,199);
    position: fixed;
    z-index: 20; 
    border: 1px solid #aaa;
    overflow: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 4px;
    animation: drop .2s linear forwards;
}
@keyframes drop{
    from{
        top: -200px;
    }
    to{
        top: 50%;
    }
}
.inventory .topbar{
    width: 100%;
    height: 64px;
    overflow: hidden;
    background: #444;
    margin: 0px;
    position: sticky;
    left: 0px;
    top: 0px;
}
.inventory .exit{
    float: right;
    font-size: 32px;
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
    width: 64px;
    height: 64px;

}
.inventory .exit:hover{
    background: rgba(255,255,255,0.4);
}
.inventory .title{
    color: white;
    font-size: 26px;
    margin: 0px 8px;
}
.invslot  .count{
    color: white;
    float: right;
    display: none;
}

.overlay{
    width: 100%;
    height: 100%;
    margin: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    /* filter: blur(4px); */
}
.breakimg{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.7;
    
    
}
.loading{
    width: 100%;
    height: 100%;
    margin: 0px;
    background: #222;
    z-index: 99;
    position: fixed;
    left: 0px;
    top: 0px;
}
.loading .loop{
    width: 128px;
    height: 128px;
    image-rendering: pixelated;

}
.pickaxe{
    /* transform: translate(50%,50%); */
    transform: rotate(-45deg);
    position: fixed;
    left: 40%;
    top: 25%;
    animation: loading .4s infinite linear alternate;
}
@keyframes loading{
    form{
        transform: rotate(-90deg);
    }
    to{
        transform: rotate(45deg);
    }
}
.lblock{
    position: fixed;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.sell-btn{
    position: relative;
    color: white;
    background: black;
    width: 100%;
    transform: translate(0px,-100%);
    /* top: 100%; */
    text-align: center;
    display: none;
}
.item:hover .sell-btn{
    display: table;
}
@media(max-width:480px){
    body{
        box-shadow: inset 0px 0px 48px 4px black;
    }
    .container{
        transform: none;
        position: fixed;
        /* padding: 32px; */
        width: 100%;
        height: 60%;
        top: 64px;
        left: 0px;
        /* text-align: center; */
    }
    /* .buy ,.inv{
        left: 45%;
    } */
    /* .slot{
        
    } */
    .pickaxe{
        left: 20% !important;
        top: 30% !important;
    }
    .btns{
        bottom: 48px;
        width: 70%;
    }

}
#loader{
    position: fixed;
    left: 50%;
    top: 10%;
    transform: translate(-50%,-50%);
    z-index: 9999999;
    color: white;
}
.copyright{
    position: fixed;
    bottom: 8px;
    right: 8px;
    color: white;
    
}