body {
  height: 100vh;
  display: flex;
  align-items: center;

  background-image: url("assets/planks.jpg");
  background-size: 100px;
}

.preload-image {
  width: 0;
  height: 0;
  opacity: 0;
}

#game-canvas {
  position: relative;

  width: 1280px;
  height: 720px;
  aspect-ratio: 1280/720;
  margin: 0 auto;

  background-image: url("assets/fond.png");
  background-position: center;
  background-size: cover;

  cursor: url("assets/cursor/customcursor.png"), auto;
}
#game-canvas.feu {
  background-image: url("assets/feu.png");
}
#game-canvas.levier-actif {
  background-image: url("assets/levier-actif.png");
}
#game-canvas.levier-inactif {
  background-image: url("assets/levier-inactif.png");
}
#game-canvas.levier-actif-et-feu {
  background-image: url("assets/levier-actif-et-feu.png");
}
#game-canvas#game-canvas.levier-inactif-et-feu {
  background-image: url("assets/levier-inactif-et-feu.png");
}

#cobblestone {
  margin: 1px 3px;
}

.dropzone.disabled {
  display: none;
}

#gui {
  position: absolute;

  z-index: 10;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  backdrop-filter: brightness(0.5);
}

#gui-chest,
#gui-chest-win {
  background-image: url("assets/gui/chest.png");

  aspect-ratio: 528/501;
}

#gui-craft {
  background-image: url("assets/gui/crafting-table.png");

  aspect-ratio: 528/498;
}

.gui-element {
  position: relative;

  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  width: 500px;
}

#zone-craft {
  position: absolute;
  left: 262px;
  top: 382px;

  width: 173px;
  height: 176px;

  /* DEV */
  /* background-color: blueviolet; */
  opacity: 0.5;
}

#zone-chest {
  position: absolute;
  left: 707px;
  top: 392px;

  width: 117px;
  height: 144px;

  /* DEV */
  /* background-color: blueviolet; */
  opacity: 0.5;
}

#zone-fire {
  position: absolute;
  left: 544px;
  top: 329px;

  width: 88px;
  height: 159px;

  /* DEV */
  /* background-color: blueviolet; */
  opacity: 0.5;
}

#zone-lever {
  position: absolute;
  left: 263px;
  top: 264px;

  width: 144px;
  height: 128px;

  /* DEV */
  /* background-color: blueviolet; */
  opacity: 0.5;
}

#zone-secret-chest {
  position: absolute;
  left: 290px;
  top: 496px;

  width: 130px;
  height: 59px;

  /* DEV */
  /* background-color: blueviolet; */
  opacity: 0.5;
}

.item {
  width: 45px;
}

#gui-chest .items-container,
#gui-chest-win .items-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);

  position: absolute;

  /* overflow: hidden; */

  /* background-color: blue;
  opacity: 0.5; */
}

#gui-chest .inventory-bar,
#gui-chest-win .inventory-bar {
  top: 403px;
  left: 20px;

  width: 460px;
  height: 50px;
}

#gui-chest .inventory,
#gui-chest-win .inventory {
  grid-template-rows: repeat(3, 1fr);

  top: 240px;
  left: 20px;

  width: 460px;
  height: 150px;
}

#gui-chest .chest,
#gui-chest-win .chest {
  grid-template-rows: repeat(3, 1fr);

  top: 50px;
  left: 20px;

  width: 460px;
  height: 150px;
}

#gui-craft .items-container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);

  position: absolute;

  /* overflow: hidden; */

  /* background-color: blue;
  opacity: 0.5; */
}

#gui-craft .inventory-bar {
  top: 400px;
  left: 20px;

  width: 460px;
  height: 50px;
}

#gui-craft .inventory {
  grid-template-rows: repeat(3, 1fr);

  top: 237px;
  left: 20px;

  width: 460px;
  height: 150px;
}

#gui-craft .craft {
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);

  top: 47px;
  left: 83px;

  width: 150px;
  height: 150px;
}

#gui-craft .craft-result {
  position: relative;
}

#gui-craft #craft_result {
  position: absolute;

  top: 97px;
  left: 350px;
}

.item-frame {
  width: 50px;
  height: 50px;

  position: relative;

  /* background-color: red;
  opacity: 0.5; */
}

.item-frame:hover {
  backdrop-filter: brightness(1.5);
}