body {
  position: absolute;
  display: flex;

  align-items: center;
  justify-content: center;
  
  margin: 0px;
  
  width: 100vw;
  height: 100vh;
  
  background-color: #000000;

  font-family: monospace;
}


img {
  display: none;

  width: 0px;
  height: 0px;
}

canvas {
  position: absolute;
  background-color: #84cf7f;
  cursor: url("../Assets/cursor.png"), pointer;
}

div {
    position: relative;
    display: flex;

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

    z-index: 1;
  
    width: 0px;
    height: 0px;
  
    background-size: 100%;
}

text {
  top: 10px;
}

.item {
  width: 75%;
  height: 75%;
  margin: 0px;

  color: #ffffff;
}
/*
#item1 {
  background-image: url("../Assets/shadow_1.png");
}

#item2 {
  background-image: url("../Assets/shadow_2.png");
}
*/
.hotbar {
  margin: 10px;
  
  top: 235px;
  
  background-image: url("../Assets/frame.png");
}

.heart {
  margin: 5px;
  
  top: 200px;
  
  background-image: url("../Assets/heart.png");
}

#menu {
  position: absolute;
  z-index: 2;
  background-image: url("../Assets/menu.png");
}

#totur {
  position: absolute;
  z-index: -3;
  background-image: url("../Assets/tutorial.png");
}

#died {
  position: absolute;
  z-index: 4;
  background-image: url("../Assets/deid.png");
}

#did2{
  z-index: 5;
}

.button {
  background-image: url("../Assets/box.png");
}