#elmish-app {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    width: 100%;
    height: calc(100vh - 50px);

    button {
        background-color: white !important;
    }

    background-color: #302f40;

    rpg-screen {
        display: grid;
        grid-template-areas: "profile main";
        width: 100%;
        rpg-inventory {
            width: 100%;
            display: inline-grid;
            grid-area: inventory;
            grid-template-columns: repeat(10, minmax(auto, 100px));
            grid-template-rows: repeat(5, auto);
            --inventoryBorderColor: #888;

            rpg-inventory-slot {
                border-width: 2px;
                border-style: solid;
                aspect-ratio: 1;
                max-width: 500px;
                width: 100%;
                border-color: var(--inventoryBorderColor);
                background-color: var(--inventoryBorderColor);
            }

            rpg-inventory-slot:before {
                content: " ";
                display: block;
                width: 100%;
                box-sizing: border-box;
                height: 100%;
                z-index: 1;
                border-right: 5px solid color-mix(in oklab, var(--inventoryBorderColor), white 30%);
                border-bottom: 5px solid color-mix(in oklab, var(--inventoryBorderColor), white 30%);
                border-top: 5px solid color-mix(in oklab, var(--inventoryBorderColor), black 30%);
                border-left: 5px solid color-mix(in oklab, var(--inventoryBorderColor), black 30%);
            }
        }
    }
}