:root {
  --blockSize: 64px;
  --sky: #8ebef5;
  --bgBrightness: 50%;
}
body {
  position: relative;
  width: 100%;
}
.block {
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
  width: 6.25%;
  aspect-ratio: 1/1;
  /* background-color: #f0f; */
}
/* .block:hover {
  background-color: #000000ee;
} */
.sky {
  background-color: var(--sky);
}

.grassBlock {
  background-image: url("img/textures/grass-block.png");
}

.dirt {
  background-image: url("img/textures/dirt.png");
}

.rootedDirt {
  background-image: url("img/textures/dirt-rooted.png");
}

/* STONE START */

.stone {
  background-image: url("img/textures/stone.png");
}

.stoneCoal {
  background-image: url("img/textures/coal-stone.png");
}

.stoneIron {
  background-image: url("img/textures/iron-stone.png");
}

.stoneGold {
  background-image: url("img/textures/gold-stone.png");
}

/* STONE END */

/* DEEPSLATE START */

.deepslate {
  background-image: url("img/textures/deepslate.png");
}

.deepslateDiamond {
  background-image: url("img/textures/diamond-deepslate.png");
}

/* DEEPSLATE END */

/* WOOD START */

.oakLog {
  background-image: url("img/textures/oak-log.png");
}

/* WOOD END */

.bedrock {
  background-image: url("img/textures/bedrock.png");
}

.netherrack {
  background-image: url("img/textures/netherrack.png");
}