#equipment-cont {
    xborder:1px solid grey;
    display:flex;
    align-items: start;
    justify-content: center;
}

#equipment {
  
    width:50%;
    aspect-ratio:1/1.5;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #3e3529;
    position:relative;
    box-shadow:5px 5px 5px rgba(0,0,0,0.5);
    border:2px solid black;
}

/* the connector lines of equipment slots */
#equipment > .line {
    position:absolute;
    background-color: #1c1b17;
}

#equipment > .line.vertical {
    width:5px;
}

#equipment > .line.horizontal {
    height:5px;
}

#equipment > .line.vertical.center {
    height:80%;
}

#equipment > .line.vertical.left {
    height:40%;
    margin-right:70%;
    margin-top:50%;
}

#equipment > .line.vertical.right {
    height:40%;
    margin-left:70%;
    margin-top:50%;
}

#equipment > .line.horizontal.top {
    width:40%;
    margin-bottom:60%;
}

#equipment > .line.horizontal.bot {
    width:60%;
    margin-bottom:0%;
}

#equipment > .row {
    xborder:1px solid grey;
    width:100%;
    height:20%;
    display:flex;
    align-items: center;
    justify-content: center;
}

#equipment > .row:nth-child(3),
#equipment > .row:nth-child(5) {
    xborder:1px solid lime;
    justify-content: space-between;
}

#equipment > .row > .slot {
    xborder:1px solid red;
    background-color: #3e3529;
    height:80%;
    aspect-ratio:1/1;
    display:flex;
    align-items: center;
    justify-content: center;
    margin:5px;
    z-index:1;
    position:relative;
}

/* slot background image */
#equipment > .row > .slot > .slot-image-cont {
    width:100%;
    height:100%;
    position:absolute;
    display:flex;
    align-items: center;
    justify-content: center;
}

#equipment > .row > .slot > .slot-image-cont > img.slot-image {
    width:100%;
    aspect-ratio: 1/1;
    image-rendering: pixelated;
}

/* OSRS item image */
#equipment > .row > .slot > .item-image-cont {
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    z-index:1;
}

#equipment > .row > .slot > .item-image-cont > img.item-image {
    xwidth:100%;
    xheight:90%;
    xaspect-ratio: 1/1;
    image-rendering: crisp-edges;
  

    object-fit: cover;
    height: 70%;
}