minecraft-inventory-menu

index.html

  <div class="menu">
      <div class="menu__top-area">
    <div class="armor-slots">
      <div class="slot armor-slot"></div> <!-- Helmet -->
      <div class="slot armor-slot"></div> <!-- Chestplate -->
      <div class="slot armor-slot"></div> <!-- Leggings -->
      <div class="slot armor-slot"></div> <!-- Boots -->
    </div>
        <div class="steve-wrapper">
          <div class="steve">
            <div class="steve__face face">
              <div class="face__side face__side-front"></div>
              <div class="face__side face__side-left"></div>
              <div class="face__side face__side-back"></div>
              <div class="face__side face__side-right"></div>
              <div class="face__side face__side-top"></div>
              <div class="face__side face__side-bottom"></div>
            </div>
            <div class="steve__torso torso">
              <div class="torso__side torso__side-front"></div>
              <div class="torso__side torso__side-left"></div>
              <div class="torso__side torso__side-back"></div>
              <div class="torso__side torso__side-right"></div>
              <div class="torso__side torso__side-top"></div>
              <div class="torso__side torso__side-bottom"></div>
            </div>
            <div class="steve__arm arm-left arm">
              <div class="arm__side arm__side-front"></div>
              <div class="arm__side arm__side-internal"></div>
              <div class="arm__side arm__side-back"></div>
              <div class="arm__side arm__side-external"></div>
              <div class="arm__side arm__side-top"></div>
              <div class="arm__side arm__side-bottom"></div>
            </div>
            <div class="steve__arm arm-right arm">
              <div class="arm__side arm__side-front"></div>
              <div class="arm__side arm__side-internal"></div>
              <div class="arm__side arm__side-back"></div>
              <div class="arm__side arm__side-external"></div>
              <div class="arm__side arm__side-top"></div>
              <div class="arm__side arm__side-bottom"></div>
            </div>

            <div class="steve__leg leg-left leg">
              <div class="leg__side leg__side-front"></div>
              <div class="leg__side leg__side-internal"></div>
              <div class="leg__side leg__side-back"></div>
              <div class="leg__side leg__side-external"></div>
              <div class="leg__side leg__side-top"></div>
              <div class="leg__side leg__side-bottom"></div>
            </div>
            <div class="steve__leg leg-right leg">
              <div class="leg__side leg__side-front"></div>
              <div class="leg__side leg__side-internal"></div>
              <div class="leg__side leg__side-back"></div>
              <div class="leg__side leg__side-external"></div>
              <div class="leg__side leg__side-top"></div>
              <div class="leg__side leg__side-bottom"></div>
            </div>
          </div>
        </div>

    <div class="crafting-area">
      <div class="crafting-table">
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
      </div>
      <svg
        width="64"
        height="52"
        viewBox="0 0 64 52"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M0 32V20H36V0H40V4H44V8H48V12H52V16H56V20H60V24H64V28H60V32H56V36H52V40H48V44H44V48H40V52H36V32H0Z"
          fill="#8B8B8B"
        />
      </svg>
      <div class="slot output-slot"></div>
    </div>
      </div>

      <div class="inventory">
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>

        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>

        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
      </div>

      <div class="hot-bar">
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
        <div class="slot"></div>
      </div>
    </div>

minecraft-inventory-menu.markdown

minecraft-inventory-menu

A Pen by Noooooooob on CodePen.

License.

script.js

const steve = document.querySelector('.steve');

const updateRotation = (event) => {
  const boundingBox = steve.getBoundingClientRect();
  const centerX = boundingBox.left + boundingBox.width / 2;
  const centerY = boundingBox.top + boundingBox.height / 2;
  const deltaX = event.clientX - centerX;
  const deltaY = event.clientY - centerY;

  const maxAngleX = 30;
  const minAngleX = -30;
  const maxAngleY = 30;
  const minAngleY = -30;

  let angleX = -(deltaY / 10);
  let angleY = deltaX / 10;

  angleX = Math.max(minAngleX, Math.min(maxAngleX, angleX));
  angleY = Math.max(minAngleY, Math.min(maxAngleY, angleY));

  steve.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;
}

document.addEventListener('mousemove', updateRotation);

style.css

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

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);
}

.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);
  }
}

originally made by https://codepen.io/dresandev (i think)