html {
  height: 100%;
  width: 100%;
}
.treeImg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#treeContainer {
  width: 75vmin;
  height: 75vmin;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -25%);
}
.matImg {
  width: 20vmin;
  height: 20vmin;
  border: 1px solid black;
  background-color: #9ba1a0;
  background-size: cover;
}
.matItem {
  display: flex;
  gap: 0.5vmin;
  background: #cbcdd2;
  padding: 2vmin;
  font-size: 4vmin;
  font-family: sans-serif;
}
#materialsBar {
  position: absolute;
  bottom: 0;
  display: flex;
  gap: 5vmin;
  width: 100vw;
  overflow-x: scroll;
}
.Toppers {
  background-size: 500%;
  background-position: 50% 5%;
}
.Under {
  background-size: 300%;
  background-position: 55% 100%;
}
.Canes {
  background-size: 200%;
  background-position: 50% 50%;
}
.Lights {
  background-size: 200%;
  background-position: 50% 60%;
}
#treeBase {
  /* filter: drop-shadow(0 0 10px #6f7880); */
}