html {
  height: 100%;
  width: 100%;
  overflow:hidden;
  color:white;
  font-family:f;
}
@font-face{
  font-family:f;
  src:url('dogicapixel.ttf');
}
@keyframes rotate{
  0%{
    background-image:url('assets/blank.png');
    background-size:200px;
    background-color:#8fe3ff;
  }
  75%{
    background-image:url('assets/blank.png');
    background-size:200px;
    background-color:#8fe3ff;
  }
  100%{
    background-image:url('assets/stars.png');
    background-size:200px;
    background-color:black;
  }
}
#cycle{
  image-rendering:pixelated;
  position:fixed;
  z-index:-10000;
  width:100%;
  height:100%;
  left:0%;
  top:0%;
  animation-name:rotate;
  animation-duration:50s;
  animation-direction:alternate;
  animation-iteration-count:infinite;
}
#player{
  position:absolute;
  width:30px;
}
#selector{
  position:absolute;
  width:30px;
  z-index:1000000;
}
#block{
  text-align:center;
  background-size:cover;
  background-repeat:no-repeat;
  width:90px;
  vertical-align:center;
  height:90px;
  padding:10px;
  position:fixed;
  top:10px;
  left:47.5%;
  z-index:100000;
  background-image:url('blocks/0.png');
}
#crafter{
  padding:5px;
  overflow-y:scroll;
  width:50%;
  height:50%;
  position:fixed;
  top:25%;
  left:35%;
  z-index:1000000;
  border:white 2px solid;
  background-color:#4d4d4d;
  visibility:hidden;
}
#inventory{
  padding:5px;
  width:25%;
  height:50%;
  position:fixed;
  top:25%;
  left:5%;
  z-index:1000000;
  border:white 2px solid;
  background-color:#4d4d4d;
  visibility:hidden;
  display:flex;
  flex-wrap: wrap;
  overflow-y:scroll;
}
button{
  margin-top:10px;
  margin-bottom:10px;
  font-family:f;
  padding:10px;
  color:white;
  background-color:#212121;
  background-image:url('blocks/basalt.png');
  border:#ffffff solid 1px;
}
.icon{
  width:20px;
}
.cell{
  text-align:center;
  margin:5px;
  width:30px;
  border:white 1px solid;
  padding:3px;
  height:fit-content;
  transition:all 0.5s linear;
}
.cell:hover{
  z-index:1000000;
  transform:scale(1.1,1.1);
}
#control{
  position:fixed;
  bottom:10px;
  right:10px;
  z-index:1000000;
}
#controls{
  line-height:125%;
  visibility:hidden;
  width:25%;
  height:100%;
  position:fixed;
  right:0px;
  top:0px;
  z-index:100000;
  border:white 2px solid;
  background-image:url('blocks/basalt.png');
}
.moveRight{
  transition:all 50s linear;
  filter:opacity(50%);
  z-index:10000;
  position:absolute;
}
#hearts{
  position:fixed;
  bottom:10px;
  left:25%;
  width:250px;
  height:fit-content;
  text-align:center;
  z-index:1000000;
  pointer-events:none;
}
.heart{
  width:20px;
  padding-left:2px;
  padding-right:2px;
}
.particle{
  width:4px;
  height:4px;
  background-size:120px;
  position:absolute;
  transition:0.2s linear all;
}
@keyframes bob{
  from{transform:translateY(0px);}
  to{transform:translateY(5px);}
}
.item{
  width:20px;
  position:absolute;
  transition:all 0.25s linear;
  animation-name:bob;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
#debug{
  position:fixed;
  bottom:10px;
  left:10px;
  z-index:100000000;
  visibility:hidden;
  line-height:30px;
}
.classic{
  background-size:1200px;
  background-position:600px 600px;
  image-rendering:pixelated;
}
input{
  vertical-align:center;
  font-family:f;
  height:25px;
}
#dmg{
  width:100%;
  height:100%;
  z-index:10000000;
  position:fixed;
  top:0px;
  left:0px;
  pointer-events:none;
  transition:all linear 0.25s;
}