body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  /* height: 100vh; */
  /* background-color: rgb(120, 120, 120); */
  background: rgb(15,144,13);
  background: linear-gradient(180deg,
    rgba(165,144,250,1) 0%,
    rgba(15,144,13,1) 30%,
    rgba(90,94,96,1) 40%,
    rgba(90,94,96,1) 80%,
    rgba(64,57,33,1) 100%);
}

div {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  white-space: nowrap;
}

p {
  color: rgb(240, 240, 255);
  font-size: 32px;
  margin: 0px;
  margin-top: 20px;
  padding: 0px;
  text-align: center;
  /* overflow: hidden; */
}

.subtitle {
  font-size: 20px;
}

.left {float: left;}
.right {float: right;}

.slate {
  /* display: inline-block; */
  overflow: hidden;
  float: left;
  /* background-color: 'black'; */
  background-color: rgb(80, 80, 80);
  /* border-style: solid; */
  border-radius: 4px;
  /* border-width: 1px; */
  height: 80px;
  width: calc(5% - 2px);
  margin: 1px;
  padding: 0px;
}

.sky:hover {background-image: url("img/sky.jpg");}
.moss:hover {background-image: url("img/moss.jpg");}
.stone:hover {background-image: url("img/stone.jpg");}
.earth:hover {background-image: url("img/earth.jpg");}
.fire:hover {background-image: url("img/fire.jpg");}
.mask:hover {
  background-image: url("img/things/mask.jpg");
}

.hidden {display: none;}
.slate:hover .hidden {
  display: block;
  color: rgb(230, 230, 255);
}

/* .leg {width: 66%; height: 70px;}
.arm {width: 49%; height: 60px;}
.hand {width: 33%; height: 50px;}
.thumb {width: 24%; height: 40px;}
.finger {width: 16%; height: 30px;}
.toe {width: 8%; height: 20px;} */
.leg {width: calc(66.66% - 2px);}
.arm {width: calc(33.33% - 2px);}
.thigh {width: calc(16.66% - 2px);}

.fist {width: calc(40% - 2px);}
.hand {width: calc(25% - 2px);}
.thumb {width: calc(15% - 2px);}
.finger {width: calc(10% - 2px);}
.toe {width: calc(5% - 2px);}