html,
body {
  padding: 0;
  margin: 0;
}

/* specviz.css default styles */
.annotation rect {
  width: 100%;
  height: 100%;
}

.annotation text {
  alignment-baseline: hanging;
  font-family: monospace;
  text-anchor: start;
}

.axis-tick line {
  stroke: rgba(33, 33, 33, 1);
  stroke-width: 1px;
}

.axis-tick text {
  alignment-baseline: hanging;
  fill: rgba(33, 33, 33, 1);
  font-family: monospace;
  font-size: 8pt;
  text-anchor: start;
}

.axis-x,
.axis-y {
  overflow: hidden;
}

.cursor-text {
  fill: white;
  font-size: 12pt;
  font-family: monospace;
  mix-blend-mode: difference;
}

.cursor-x,
.cursor-y {
  stroke: white;
  stroke-width: 2px;
  mix-blend-mode: difference;
}

.encoder {
  stroke: black;
  stroke-width: 0.05;
  fill: none;
}

.encoder-marker {
  fill: black;
}

.encoder-text {
  font-size: 0.3pt;
  text-align: center;
}

.mask {
  fill: rgba(0, 0, 0, 0.5);
}

.playhead {
  stroke: white;
  stroke-width: 0.2%;
  mix-blend-mode: difference;
}

.selection {
  fill: rgba(255, 255, 255, 1);
  mix-blend-mode: difference;
}