:root {
    --slot-size: 5.15vw;
    --inventory-width: 50vw;
}

#inventory-container {
    margin: auto;
    margin-top: calc((100vh - (var(--inventory-width) / 1.06))/2);
    display: flex;
    flex-direction: column;
    width: var(--inventory-width);
    height: calc(var(--inventory-width) / 1.06); /*Ensures correct aspect ratio for background image*/
    background-image: url(/assets//minecraft-inventory-images/minecraft-inventory-base.png);
    background-size: 100%;
}

#player-box, .inventory-slot, #build-slider, #build-image {
    border-image-width: 0.25vw;
    border-image-source: url(/assets//minecraft-inventory-images/minecraft-border.png);
    border-image-slice: calc(100%/3);
    border-image-repeat: stretch;

    background-position: center;
    background-repeat: no-repeat;
}

.inventory-slot {
    background-color: #8b8b8b;
    width: var(--slot-size);
    height: var(--slot-size);
    background-size: 90%;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inventory-slot:hover {
    background-color: #c4c4c4;
}

#top-box-inv {
    margin: calc((var(--inventory-width) - (var(--slot-size) * 9))/2);
    margin-bottom: calc((var(--inventory-width) - (var(--slot-size) * 9))/4);
    width: calc(var(--slot-size) * 9);
    height: calc(var(--slot-size) * 4);
    display: flex;
    flex-direction: row;
    align-content: start;
}

#main-box-inv {
    display: flex;
    flex-direction: column;
    margin: 0 calc((var(--inventory-width) - (var(--slot-size) * 9))/2);
}

#hotbar {
    margin: calc((var(--inventory-width) - (var(--slot-size) * 9))/2);
    margin-top: auto;
    display: flex;
    flex-direction: row;
}

.inv-row {
    display: flex;
    flex-direction: row;
}

#armor-container {
    display: flex;
    flex-direction: column;
}

#player-box {
    background-color: black;
    background-image: url(/assets/minecraft-inventory-images/parrot-girl.png);
    background-size: 55%;
    width: calc(var(--slot-size) * 3);
    height: 100%;
}

#crafting-container {
    display: flex;
    flex-direction: column;
    align-content: center;
    margin-left: calc(var(--slot-size)/8);
}

#crafting-text {
    font-family: Minecraft;
    font-size: calc(var(--slot-size)/3);
    margin: 0 auto calc(var(--slot-size)/8) 0;
}

#crafting-widget {
    display: flex;
    flex-direction: row;
    align-content: center;
}

#crafting-grid {
    display: flex;
    flex-direction: column;
}

#crafting-arrow {
    display: block;
    width: var(--slot-size);
    height: calc(var(--slot-size) * 0.81);
    margin: auto calc(var(--slot-size)/8);
}

#recipe-book {
    display: block;
    margin: auto auto 0 calc(var(--slot-size)/4);
    width: calc(var(--slot-size) * 1.25);
}

.inventory-item {
    width: calc(var(--slot-size) * 0.85);
    height: auto;
    image-rendering: pixelated;
    display: block;
    margin: auto;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    background-color: #211321;
    font-family: 'Minecraft';
    font-size: calc(var(--slot-size)/3);
    color: #fff;
    text-align: center;
    padding: calc(var(--slot-size)/4);
    border-image-width: calc(var(--slot-size)/8);
    border-image-source: url(/assets/minecraft-inventory-images/tooltip-border.png);
    border-image-slice: 40%;
    border-image-repeat: stretch;
    opacity: 0.98;
    
    
    z-index: 1;
    position: absolute;
    bottom: calc(100% + var(--slot-size)/16);
    left: 50%;
    transform: translate(-50%);
    


  }

.tooltip:hover .tooltip-text {
    visibility: visible;
  }


#builds-container {
    height: calc(var(--slot-size) * 8);
    overflow: hidden;
    margin: calc((var(--inventory-width) - (var(--slot-size) * 9))/2);
    background-color: #8b8b8b;
    border-image-width: 0.25vw;
    border-image-source: url(/assets//minecraft-inventory-images/minecraft-border.png);
    border-image-slice: calc(100%/3);
    border-image-repeat: stretch;
}

#builds-scroll-container {
    height: calc((var(--slot-size) * 7));
    margin-bottom: calc((var(--slot-size) * 0.5));
    overflow: scroll;
}

.build {
    width: 90%;
    margin: 1vw 5%;
}

.build > h1 {
    text-align: center;
    font-family: Minecraft;
}

.build > p {
    margin: 0 10%;
    font-family: Minecraft;
}

.build-image {
    display: inline-block;
    width: 80%;
    margin: 0.1vw 10%;
}