.content {
  position: relative;
  background-color: red;
  width: 500;
  height: 350;
}

.form {
  display: inline-block;
  width: 50%;
  height: 30%;
  margin-top: 30;
}

.form > div > uicreature {
  --creature-size: 64;
  background-color: blue;
  border: 1px red;
}

.footer {
  position: absolute;
  left: 5;
  right: 10;
  bottom: 10;
}

.equalizerEffect {
  position: absolute;
  bottom: 5;
  left: 0;
  right: 0;
  text-align: center;
  height: 100px;
}

.equalizerEffect > .line {
  position: relative;
  width: 15;
  top: 80;
  margin-left: 30;
  background-color: yellow;
  bottom: 0;
  display: inline-block;
}

.equalizerEffect > .line:nth-child(odd) {
  background-color: rgb(202, 75, 202);
}

#players {
  background-color: black;
  overflow: scroll;
}

#players thead tr {
  background-color: rgb(151, 151, 165);
}

#players tbody tr:nth-child(odd) {
  background-color: rgb(134, 127, 134);
}

#players tbody tr:hover {
  background-color: rgb(104, 106, 241);
}

#players uicreature {
  --creature-size: 32;
}

img.shield {
  width: 64;
  height: 64;
  position: absolute;
  right: 0;
  --shader: Map - Party;
}