html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background:#d1d1d1;
}
grid-system {
  background:#d1d1d1;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  background:#ffffff;
  border:1px solid #eee;
}
cell:has(#canvasContainer) {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 1rem;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  background-color: rgb(160 160 160);
}
#canvasContainer {
  position: relative;
  width: 100%;
  height: 100%;
  margin-inline: auto;
}
button.active {
  background: yellow;
  color: white;
  font-weight: bold;
}

#currentGlyphPreviewImage {
  object-fit: contain;
  height: 100%;
}

.charactermap {
  height: 100%;
  width: 100%;
  ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(25, 1fr);
    grid-template-rows: repeat(4, 1fr);
    padding: 5px;
    margin: 0;
    height: 100%;
    li {
      overflow:hidden;
      margin:0;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      &:hover {
        outline:1px solid red;
      }
    }
  }

}