@import "./minecraft-items-spritesheet.css";

.inventory {
    display: flex;
    flex-wrap: wrap;
    width: 420px;
    padding: 1%;
}

.item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
}
.inventory-slot > div{
    --n:0.75;
}
.inventory-slot {
    background: #ccc;
    background-color: #8B8B8B;
    background-size: 32px;
    border: 2px solid;
    border-color: #373737 #FFF #FFF #373737;
    /* line-height: 1; */
    text-align: left;
    vertical-align: bottom;
}
.inventory-slot img{
    width: 42px; 
    height: 42px;
}
.item-desc{
    position: absolute;
    z-index: 5;
    display: none;
    text-shadow: 2px 2px 0 #3F3F3F;
    width: 160px;
    border:3px solid rgb(13, 9, 43);
    outline: 3px solid black;
    background: black;
    top: -50%;
    left: 0%;
    transform: translate(2.5vw, 1vw);
}
.item-desc p{
    font-family: "Minecraft";
    font-size: 16px;
}
.item-count {
    position: absolute;
    white-space:nowrap;
    float:left;
    right: 0;
    bottom: 0;
    font-family: "Minecraft";
    font-size: 22px;
    font-weight: lighter !important;
    color: #FFF !important;
    text-shadow: 2px 2px 0 #3F3F3F;
}
.item:hover .item-desc{
    display: inline-block;
}
.kit-text {
    font-size: calc(1vw + 0.5em);
    padding: 1%;
}
@media screen and (max-width: 1000px){
    .inventory-slot > div{
        --n:1;
    }
    .item-count{
        font-size: 16px;
    }
    .item-desc{
        width: 100px;
    }
    .item-desc p{
        font-size: 10px;
    }
    .inventory-slot img{
        width:32px; 
        height:32px; 
    } 
    .inventory {
        display: flex;
        flex-wrap: wrap;
        width: 350px;
        padding: 1%;
    }
}