body {
  margin:0 ;
  background-color:#222222 ;
  width:100vw ;
  height:100vh ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  overflow:hidden ;
  color:white ;
  font-family:"MedievalSharp", algerian ;
  user-select:none ;
}

#game {
  width:1000px ;
  height:600px ;
  border: 1px solid black ;
  background-color:skyblue ;
  overflow:hidden ;
  transition:10s ;
  position:absolute ;
}

.entity {
  position:absolute ;
  background-size: 100% 100% ;
}

.inventory {
  width:600px ;
  height:50px ;
  margin-left:200px ;
  margin-top:545px ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  font-size:1.5rem ;
}

.inventorySlot {
  width:10% ;
  height:100% ;
  background-image:radial-gradient(rgba(255, 255, 255, .5), transparent) ;
  background-size: 100% 100% ;
  border: 5px outset lightgrey ;
  cursor:pointer ;
}

.healthBar {
  margin-left:250px ;
  margin-top:10px ;
  width:500px ;
  height:50px ;
  border: 1px solid black ;
}

.health {
  height:100% ;
  background-image:linear-gradient(90deg, pink, maroon) ;
}

.air {
  height:100% ;
  background-image:linear-gradient(90deg, lightblue, darkblue) ;
}

.moreBtn {
  background-image:radial-gradient(lightgreen, green) ;
  padding:0 ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
}

.moreMenu {
  width:750px ;
  height:450px ;
  margin-left:125px ;
  margin-top:75px ;
  background-color:lightgrey ;
  border: 5px outset darkgrey ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  color:black ;
}

.moreMenuSide {
  width:50% ;
  height:100% ;
  padding:10px ;
  text-align:center ;
}

.handcrafter {
  margin-left:calc(50% - 50px) ;
  margin-top:10px ;
  width:100px ;
  height:100px ;
  display:grid ;
  grid-template-columns: auto auto ;
}

.handcrafterSlot {
  width:50px ;
  height:50px ;
  background-image:radial-gradient(rgba(255, 255, 255, .5), transparent) ;
  background-size: 100% 100% ;
  border: 5px outset lightgrey ;
  cursor:pointer ;
  color:white ;
  font-size:1.5rem ;
}

.handcrafterOutputSlot {
  width:50px ;
  height:50px ;
  background-image:radial-gradient(rgba(255, 255, 255, .5), transparent) ;
  background-size: 100% 100% ;
  border: 5px outset lightgrey ;
  cursor:pointer ;
  margin-left:calc(50% - 20px) ;
  margin-top:-10px ;
  color:white ;
  font-size:1.5rem ;
}

.closeBtn {
  width:50px ;
  height:50px ;
  background-color:red ;
  color:white ;
  border:none ;
  cursor:pointer ;
  font-size:2rem ;
  padding:0 ;
  margin:0 ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
}

.craftMenu, .chestMenu {
  width:750px ;
  height:450px ;
  margin-left:125px ;
  margin-top:75px ;
  background-color:lightgrey ;
  border: 5px outset darkgrey ;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, .5) ;
  color:black ;
  text-align:center ;
}

.crafter {
  width:150px ;
  height:150px ;
  margin-left:calc(50% - 75px) ;
  margin-top:10px ;
  display:grid ;
  grid-template-columns: auto auto auto ;
}

.chestContent {
  width:250px ;
  height:250px ;
  margin-left:calc(50% - 125px) ;
  margin-top:10px ;
  display:grid ;
  grid-template-columns: auto auto auto auto auto ;
}

#fallingBlock {
  display:none ;
  position:absolute ;
  width:250px ;
  height:250px ;
  background-image:url("images/woodenPlanks.png") ;
  opacity:0% ;
  text-align:center ;
  padding:10px ;
  color:red ;
  background-size: 100% 100% ;
}

.coolBtn {
  background-color:lightgrey ;
  color:black ;
  padding: 10px 50px ;
  margin:10px ;
  cursor:pointer ;
  border: 5px outset darkgrey ;
  font-size:1.5rem ;
}

.armorPlayer {
  width:100px ;
  height:200px ;
  margin-left:calc(50% - 50px) ;
  margin-top:10px ;
  background-color:red ;
  cursor:pointer ;
}

.actionButton {
  background-color:rgba(128, 128, 128, .7) ;
  color:white ;
  border: 2px outset rgba(100, 100, 100, .7) ;
  cursor:pointer ;
  width:75px ;
  margin-left:472px ;
  margin-top:490px ;
  padding:5px ;
  font-size:1.2rem ;
}

button {
  font-family:"MedievalSharp" ;
}