.inventories {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    height: 100%;

    > hr {
        width: 2px;
        height: 100%;
        background: crimson;
        opacity: 0.448;
    }
}

section.inventory {
    width: 45%;
    display: flex;
    flex-direction: column;

    &:first-of-type {
        h3 {
            text-align: right;
        }
    }
    &:last-of-type {

    }

    h3 {
        text-transform: lowercase;
        font-size: 1.3em;
        margin-bottom: 10px;
        font-weight: 900;
        &::first-letter {
            text-decoration: underline crimson;
        }
    }

    .balance {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        > div {
            width: 28%;
            height: 35px;
            font-weight: 300;
            display: flex;
            gap: 7px;
            align-items: center;
            justify-content: space-between;
        }

        .platinum, .gold, .electrum, .silver, .copper {
            position: relative;
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                width: 15px;
                height: 15px;
                content: "";
                display: block;
                background-position: center center;
                background-size: cover;
            }
        }

        .platinum::before {
            background-image: url("/assets/platinum.webp");
        }
        .gold::before {
            background-image: url("/assets/gold.webp");
        }
        .electrum::before {
            background-image: url("/assets/electrum.webp");
        }
        .silver::before {
            background-image: url("/assets/silver.webp");
        }
        .copper::before {
            background-image: url("/assets/copper.webp");
        }
    }

    input {
        color: white;
        width: 100%;
        text-align: right;
        background-color: #131313;
        padding: 2px 12px 0px 6px;
        font-size: 18px;
        vertical-align: bottom;
        line-height: 20px;
        border-bottom: 2px solid;
        border-bottom-color: hsla(from crimson h s l / 0.5);
        mask: linear-gradient(135deg,#0000 5px,#000 0);

        &:focus, &:hover, &:active {
            cursor: crosshair;
            border-bottom-color: crimson;
            transition: border-bottom-color .2s;
        }
    }

}