*,
*::after,
*::before {
    box-sizing: border-box;
}

.menu-body {
    --box-shadow-border: inset 4px 4px 0px hsla(0, 0%, 22%, 0.7),
    inset -4px -4px 0px hsl(0, 0%, 100%);
    --slot-size: 64px;
    display: grid;
    place-items: center;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background-color: #1f1813;
}

.menu {
    position: relative;
    padding: 16px;
    background-color: hsl(0, 0%, 78%);
    border-block-start: 8px solid hsl(0, 0%, 100%);
    border-inline-end: 5.5px solid hsla(0, 0%, 22%, 0.7);
    border-block-end: 8px solid hsla(0, 0%, 22%, 0.7);
    border-inline-start: 5.5px solid hsl(0, 0%, 100%);
}

.menu::after {
    content: "";
    position: absolute;
    inset: -11px -8.5px;
    z-index: -1;
    border: 3px solid hsl(0, 0%, 0%);
}

.steve-wrapper {
    --extremities-width: 32px;
    --extremities-height: 96px;
    --divided-side-width: calc(var(--extremities-width) / 2);
    margin-block-end: 16px;
    padding-block: 25px 22px;
    padding-inline: calc(var(--extremities-width) + 38px);
    background-color: hsl(0, 0%, 0%);
    box-shadow: var(--box-shadow-border);
}

.steve,
.steve__face,
.steve__torso,
.steve__arm,
.steve__leg {
    transform-style: preserve-3d;
}

.face__side,
.torso__side,
.arm__side,
.leg__side {
    position: absolute;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.steve {
    --extremities-width: 32px;
    --extremities-height: 96px;
    --divided-side-width: calc(var(--extremities-width) / 2);
}

.steve__face {
    --size: 64px;
    width: var(--size);
    height: var(--size);
}

.face__side {
    --translateZ: calc(var(--size) / 2);
}

.face__side-front {
    transform: translateZ(var(--translateZ));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAIFQTFRFLyANKx4NLx8PKBwLJBgIJhoKKh0NMyQRQioSPyoVLB4OtolsvY5yxpaAvYtyvY50rHZaNCUSqn1mtIRtrYBtnHJcu4lynGlM////Uj2JtXtnnGNGs3tit4JyakAwvohsompHgFM0kF5Dll9Ad0I1j14+gVM5b0UsbUMqek4zg1U797uUNgAAAIxJREFUeJztzccOwkAMRdEJhJLQS0IntBT4/w9kc99mJMTe8tmNZd8JAQl66CPFANobInjARCD5YYQxMuTQBx6wFZhgihnmWGCJFTxgI7DGBnpvUaDELuIBGwEd7nHAETrUXHv6yAM2AiecccE1UuGGOzxgI/DAE68/ajTwgI1Aiw5N5I1PRHMPmAh8AX18U1A6IJ39AAAAAElFTkSuQmCC);
}

.face__side-left {
    transform: rotateY(90deg) translateZ(var(--translateZ));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGlQTFRFLSAQMiMQKRwMJxsLJhoKKBsKMyQRKx4NLB4OJBgKKBsLKx4OJhgLLyIRLR0OKBoNOigUnGNFh1g6IxcJJhoMiFo5ll9BhFIxLB4RdUcvhlM0mmNEnWpPYkMvdEgvilk7n2hJnGdImmRKGZG1sAAAAJRJREFUeJzt1UkSglAMRVEQVFAB6WwRxf0v0sl9DLIDUzkzoHL/5FdIEiPFBhlybA07H4H/DOywhwYL5EYEfAY0UOKAI/RdgRN0QAR8BCrohRaILore12iwXqQIuAic0aJDjwF2kUTAV2DEBVfcoAViL1AEfAXueOCJCS9ooWhw/bFEwEVgxhsfLPhCzzpAB0bAReAHKRDPgVKr2+sAAAAASUVORK5CYII=);
}

.face__side-back {
    transform: rotateY(180deg) translateZ(var(--translateZ));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABhQTFRFKh0NJBgIHxALLx8PJhoKKRwMhlM0dUcvhGiNHwAAAFtJREFUeJxjYIACQSBAZoOAEhAwjCAFII4xFCArgGsaIQpgki5AMFIVwAIJPdHAxEaKAmSOCxQgJ56RpACb5EhUAJMIBQIQG1SAjjQFaUBQDgQuaAAkBpIbIQoA3cIasGRLXfwAAAAASUVORK5CYII=);
}

.face__side-right {
    transform: rotateY(-90deg) translateZ(var(--translateZ));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGNQTFRFKBsKJhoKJxsLKRwMMiMQLSAQLB4OKx4NMyQRJhgLKx4OKBsLJBgKKBoNLR0OLyIRJhoMIxcJh1g6nGNFOigULB4RhFIxll9BiFo5YkMvnWpPmmNEhlM0dUcvnGdIilk7dEgvEKInJwAAAIhJREFUeJzt1EEWgjAMRdEioiCICigKFdn/Kp28P8kScnKHbfNGPUnJKHBAiSMqw85HwFdATlDojBoR8BHQgwYa1MAFLTroPgI+AnJFD4V1rwWj8xsi4Ctg3fHAgBETIuAzoA+lBfPECzPeiICPgF0cWigfLFiR8UUEfASyYR9u0Af6YUcEXAT+8ey5QRb6asAAAAAASUVORK5CYII=);
}

.face__side-top {
    transform: rotateX(90deg) translateZ(var(--translateZ));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABJQTFRFKh0NJBgIHxALLx8PJhoKKRwMxFgAOQAAAFZJREFUeJxjYIACQSBAZoOAEhAwjCAFII4xFCArgGsaIQpgki5AMFIVwAIJPdHAxEaKAmSOCxQgJ56RpACb5EhUAJMIBQIQG1SAjkQFMAlkgBKKw18BAEQ47gFoJ9KeAAAAAElFTkSuQmCC);
}

.face__side-bottom {
    transform: rotateX(-90deg) translateZ(var(--translateZ));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAA9QTFRFdUcvakAwhlM0IyMjUigmcQ2gUQAAADFJREFUeJxjYBgFcCAIBEpAAKNBYKQqMEYDILFRBaMKRhWgAhcgGIkKsIGRpmAUMAAA+4CbIQg6YF4AAAAASUVORK5CYII=);
}

.steve__torso {
    --width: 64px;
    --height: 96px;
    --side-width: 32px;
    --divided-side-width: calc(var(--side-width) / 2);
    width: var(--width);
    height: var(--height);
}

.torso__side-left,
.torso__side-right {
    width: var(--side-width);
}

.torso__side-top,
.torso__side-bottom {
    height: var(--side-width);
}

.torso__side-front {
    transform: translateZ(var(--divided-side-width));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABgBAMAAABf62nbAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABhQTFRFAJmZAJ6egVM5ompHAKioAK+vRjqlOjGJhNOnIwAAAGlJREFUeJzt01ENwCAMhOFawAIWZmEWsDALs8816WXHgoPjf+rge2pYBGqoowv1qlVhAu6KiJejcgEciHJxObuCjEDPXADTg+XCEORD+c9OQJfEn+YATzAkBfx2AZouyQ08m150wIeMwASoIox/WmO3CwAAAABJRU5ErkJggg==);
}

.torso__side-left {
    transform: rotateY(90deg) translateZ(calc(var(--width) - var(--divided-side-width)));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgBAMAAACODG2rAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAA9QTFRFAH9/AGhoAFtbJiFbMChyma0bvQAAAEdJREFUeJxjYBhEQBAJDJSAIBoYKAElIIBxQOyBFEAGAyUAcxDMgQMtgBJzAyAwWPILsgBGRh6hAsZQ4AIEAyUAImCcARQAANRUiAFzO5DrAAAAAElFTkSuQmCC);
}

.torso__side-back {
    transform: rotateY(180deg) translateZ(var(--divided-side-width));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABgBAMAAABf62nbAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAABJQTFRFAJ6eAKioAK+vAJmZRjqlOjGJ4XrdFQAAAGhJREFUeJztlEENwDAMxEJhFEahFEZh/KmsN+WkU7Ui8PxKHffZVk2O4Gx8LkiQMqEFX8uMaMGYWOZMClbpWZCC0WTgB0UKVpkXSIHlH+yhBCOQyPn9SCHBNbkbPyChs3akwEhqmQ4SPLSq0XD2VuBKAAAAAElFTkSuQmCC);
}

.torso__side-right {
    transform: rotateY(-90deg) translateZ(var(--divided-side-width));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgBAMAAACODG2rAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAA9QTFRFAH9/AFtbAGhoMChyJiFbt1Z7bgAAAE5JREFUeJzN01ENACAIRVEqWIEKVrB/JoGJew0u90c9/jg2zaQVGQj++jcAuERCDqWhBgRBbzoK9FBDgkAfRsKU/zINTANgRyfqdQJkEFyWHZTBaWLYNgAAAABJRU5ErkJggg==);
}

.torso__side-top {
    transform: rotateX(-90deg) translateZ(calc(var(--divided-side-width) * -1));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgAgMAAADf85YXAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAlQTFRFAMzMdUcvakAwf1rYWwAAABpJREFUeJxjYGAIRQIMIDBAAquQwKjAIIkXAEIFv0GsPklSAAAAAElFTkSuQmCC);
}

.torso__side-bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--height) - var(--divided-side-width)));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgAQMAAACYU+zHAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFAGBgjzU3JQAAAA1JREFUeJxjYBgF+AAAASAAASybUWcAAAAASUVORK5CYII=);
}

.steve__arm,
.steve__leg {
    width: var(--extremities-width);
    height: var(--extremities-height);
}

.steve__arm {
    position: absolute;
    top: 64px;
    animation: 3s ease-in-out infinite alternate;
}

.arm-left {
    inset-inline-start: -32px;
    animation-name: idle-left-arm;
}

.arm-right {
    right: -32px;
    animation-name: idle-right-arm;
}

.arm__side-top,
.arm__side-bottom,
.leg__side-top,
.leg__side-bottom {
    width: var(--extremities-width);
    height: var(--extremities-width);
}

.arm__side-front,
.leg__side-front {
    transform: translateZ(var(--divided-side-width));
}

.arm__side-internal,
.leg__side-internal {
    transform: rotateY(90deg) translateZ(calc(var(--extremities-width) - var(--divided-side-width)));
}

.arm__side-back,
.leg__side-back {
    transform: rotateY(180deg) translateZ(var(--divided-side-width));
}

.arm__side-external,
.leg__side-external {
    transform: rotateY(-90deg) translateZ(var(--divided-side-width));
}

.arm__side-top,
.leg__side-top {
    transform: rotateX(-90deg) translateZ(calc(var(--divided-side-width) * -1));
}

.arm__side-bottom,
.leg__side-bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--extremities-height) - var(--divided-side-width)));
}

.arm__side-front {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgBAMAAACODG2rAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAA9QTFRFAJ6eAKioAK+vqn1mlm9b/KosDgAAAE5JREFUeJxjYAACQSBQAgIQzTBAAjAGiAbLDpAAjAMDAyUAcxycM0ACxmhgIAVcgGAwCYDogRSAgVEBVAEQGGgBWGQNlAByYgEH0MAIAABTjgmw43D63wAAAABJRU5ErkJggg==);
}

.arm__side-internal {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAH9/AGhoh1U7ll9B9SwZngAAADRJREFUeJxjYKAaCAWC4cdYteo/GFDK+P8fwhxcjFWrKGeAALUYYIdRxIA4izoMQnFKBAMA7APuIMZIcLQAAAAASUVORK5CYII=);
}

.arm__side-back {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAlQTFRFAK+vqn1mlm9bASc6GAAAACBJREFUeJxjYBgFeEEoFAwexiogoAZjkHgHyV8gPMwYABJz1IGO6mR+AAAAAElFTkSuQmCC);
}

.arm__side-external {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAH9/AGholl9Bh1U7JE8pFgAAADJJREFUeJxjYKASCAUDyhkQ5uBhrAKD//8HC+P/f2oyVq2iBgOEKWVAnDW4GGAPUsYAAAFAqRAkQBWsAAAAAElFTkSuQmCC);
}

.arm__side-top {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAKioAMzMmHJKqwAAABpJREFUeJxjYPj/n4GBCOI/EBBJMBBDEGkvABIYV6lAKLF/AAAAAElFTkSuQmCC);
}

.arm__side-bottom {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFakAwUTElRPeiaQAAABFJREFUeJxjYPgPhFQkqGwcAO29P8G3IW3UAAAAAElFTkSuQmCC);
}

.leg__side-front {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAK6wAACusBgosNWgAAAAlQTFRFRjqlOjGJa2trnm9CAAAAABtJREFUeJxjYBgFdAKhQEANxijAB1ZBwSBhAABaZV+hkhRQ7AAAAABJRU5ErkJggg==);
}

.leg__side-internal {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAK6wAACusBgosNWgAAAAlQTFRFMChyJiFbPz8/DOFcYwAAACtJREFUeJxjYGAIDWWAgFEGVga1TAoNpRaDfn4nLnyoBVYBAaWMVVAwSBgAKyCaEXF5XUYAAAAASUVORK5CYII=);
}

.leg__side-back {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAK6wAACusBgosNWgAAAAlQTFRFRjqlOjGJa2trnm9CAAAAAB9JREFUeJxjYACD0FAGqjCGHwiFgsHCGK5gFRQMMwYAoTavUUeF0ocAAAAASUVORK5CYII=);
}

.leg__side-external {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABgAgMAAAABTJgLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAK6wAACusBgosNWgAAAAlQTFRFMChyJiFbPz8/DOFcYwAAAChJREFUeJxjYACC0FAGCKCIERpKLQY1XDPKIMQYXGAVEFCLAeYMDgYAu4GUwetaRGMAAAAASUVORK5CYII=);
}

.leg__side-top {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAK6wAACusBgosNWgAAAANQTFRFVknMfCIVDwAAAAxJREFUeJxjYBjcAAAAoAABsAZiGAAAAABJRU5ErkJggg==);
}

.leg__side-bottom {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAK6wAACusBgosNWgAAAANQTFRFKCgo+cws0gAAAAxJREFUeJxjYBjcAAAAoAABsAZiGAAAAABJRU5ErkJggg==);
}

.leg-right {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
}

.menu__top-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crafting-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crafting-table {
    display: grid;
    grid-template-columns: repeat(2, var(--slot-size));
    grid-template-rows: repeat(2, var(--slot-size));
}

.slot {
    --size: var(--slot-size);
    width: var(--size);
    height: var(--size);
    background-color: hsl(0, 0%, 62%);
    box-shadow: var(--box-shadow-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slot:hover {
    filter: brightness(1.07);
}

.inventory {
    display: grid;
    grid-template-columns: repeat(9, var(--slot-size));
    grid-template-rows: repeat(3, var(--slot-size));
}

.hot-bar {
    margin-block-start: 16px;
    display: flex;
}

@keyframes idle-right-arm {
    0%,
    100% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(-10deg);
    }
}

@keyframes idle-left-arm {
    0%,
    100% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(10deg);
    }
}