html {
  height: 100%;
}

body {
  font-family: helvetica, arial, sans-serif;
  margin: 0;
  height: 100%;
}

h1 {
  margin-top: 0;
}

#map {
  height: 100%;
}

.debug #map {
  height: 33vh;
}

.mask-canvas {
  width: 100%;
  height: 33vh;
}

.mask-canvas,
.clipped-canvas,
.modify-canvas,
.dest-canvas {
  display: none;
}

.debug .mask-canvas,
.debug .clipped-canvas,
.debug .modify-canvas,
.debug .dest-canvas {
  display: block;
}


.interface {
  background: white;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 1rem;
  left: 1rem;
  border-radius: 5px;
  padding: 0.75rem;
  z-index: 1000;
  max-width: 200px;
}

.interface button {
  appearance: none;
  --webkit-appearance: none;
  background: white;
  border: 1px solid black;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.input {
  display: flex;
  flex-direction: column;
}

.interface > * {
  width: 100%;
}

.explanation {
  margin-bottom: 1rem;
}

.explanation ol {
  margin: 0;
  padding-left: 1rem;
}

.credits {
  font-size: 0.8em;
  margin-top: 2em;
}