html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

svg {
  shape-rendering: crispEdges;
}

.world_border {
  stroke: #0a4b75;
  fill: none;
}

.meridian, .parallel {
  fill: none;
  stroke: #1f78b4;
  opacity: 0.1;
}
.meridian.world, .parallel.world {
  opacity: 1;
}
.meridian.plane, .parallel.plane {
  opacity: 0.3;
}

.digit {
  font-family: sans-serif;
  fill: #1f78b4;
}
.digit.codepoint {
  text-anchor: middle;
}

.block {
  fill: #e8e8e8;
  stroke: none;
}

.block_borders {
  stroke: #999999;
  fill: none;
}

.character {
  fill: black;
  text-anchor: middle;
}

.block:hover {
  fill: #f2f2f2;
}

.character, .meridian, .parallel, .digit {
  pointer-events: none;
}

@font-face {
  font-family: "Unidings";
  src: url(Unidings.ttf);
}

.block_symbol {
  fill: #999999;
  text-anchor: middle;
  pointer-events: none;
  font-family: "Unidings";
}