body {
    margin: 0;
}

#player-position {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: sans-serif;
    font-size: 24px;
    color: white;
    margin: 8px;
}

.up,.down,.left,.right {
  --width: 32px;
  position: absolute;
}

.up {
    bottom: var(--width);
    left: var(--width);
}

.down {
    bottom: 0;
    left: var(--width);
}

.left {
    bottom: 0;
    left: 0;
}

.right {
    bottom: 0;
    left: calc(var(--width) * 2);
}

#console {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 50px;
    height: 50px;
    background-color: black;
    color: lightgreen;
    resize: both;
}

#hotbar {
    position: absolute;
    bottom: 50px;
    width: 550px;
    height: 80px;
    left: calc(50vw - 275px);
}

#hotbar-hide {
    position: absolute;
    bottom: 210px;
    width: 550px;
    height: 240px;
    left: calc(50vw - 275px);
}

#hotbar-hide > .active {
    border: 10px solid lightblue;
}

#hotbar > .active{
    border: 10px solid lightblue;
}

#crafting {
    position: absolute;
    bottom: 210px;
    width: 550px;
    height: 200px;
    left: calc(50vw - 275px);
    background-color: darkgrey;
}

#result {
    position: absolute;
    width: 61px;
    height: 61px;
    left: 330px;
    top: 61px;
    border: 5px solid grey;
    background-color: black;
}

.arrow {
    position: absolute;
    left: 198px;
    top: 61px;
}

#crafting-slots {
    width: 198px;
    height: 198px;
}

#crafting-slots > .slot {
    width: 61px;
    height: 61px;
    border: 5px solid grey;
    background-color: black;
    float: left;
}

img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

#open {
    position: absolute;
    right: 0;
    top: 0;
}

#hotbar > *, #hotbar-hide > div {
    position: relative;
    padding: 0;
    width: 61px;
    height: 80px;
    border: 10px solid darkgrey;
    background-color: black;
    float: left;
    cursor: grab;
    user-select: none;
}

#trash {
    position: absolute;
    bottom: 111px;
    width: 550px;
    height: 80px;
    left: calc(50vw - 275px);
    background-color: transparent;
}