.trade-item{
  background-image: url('https://mcicons.ccleaf.com/assets/60.%20Interface/5.%20UI/Blank_Template_Gui_1Row.png');
  background-size: cover; /* Changed from 'fill' */
  background-repeat: no-repeat;
  padding: 5px;
  margin: 10px;
  display: flex;
  position: relative; /* Added for proper positioning context */
  width: 50%;
  height: 50px;
}

.trade-item #trade-arrow{
  height: 98%;
  width: 20%;
  left: 45%;
  position: relative; /* Fixed spelling */
}

.trade-item #in-items{
  height: 98%;
  width: 40%;
  left: 5%; /* Added missing semicolon */
  display: inline-block;
  position: relative; /* Fixed spelling */
}

.trade-item #in-items .item{
  height: 98%; /* Fixed: % instead of $ */
}

.trade-item #out-items .item{
  height: 98%; /* Fixed: % instead of $ */
}

.trade-item #out-items{
  height: 98%;
  width: 40%;
  right: 5%;
  display: inline-block;
  position: relative; /* Fixed spelling */
}

.item{
  display: block;
}

/* Consolidated the duplicate .item p rules */
.item p{
  position: relative; /* Fixed spelling */
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1; /* Changed from -1 to make text visible */
  margin: 0; /* Added for better spacing */
  display: flex;
  align-items: center;
  justify-content: center;
}

.item img{
  height: 100%;
  width:100%;
}