body {
  text-align: center;
  background-color: #282c34;
}

.App, .scrollBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.scrollBox {
  overflow-x: scroll;
  overflow-y: scroll;
}
.centerBox {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  min-width: 100%;
  min-height: 100%;
  width: max-content;
  height: max-content;
  box-sizing: border-box;
}
.map {
  flex: 1 0 auto;
  box-sizing: border-box;
}

.mapTile {
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}

.swatch {
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}

.swatch.active {
  stroke-width: 4;
}
.swatch.selected {
  stroke: white;
  stroke-width: 5;
  z-index: -1;
}
.hexColorPicker {
  position: absolute;
  bottom: 1vh;
  left: 1vw;
  height: auto;
}
.colorPickerBackground {
  fill: lightslategray;
}
.connectionState {
  position: absolute;
  text-shadow: white 0 0 5px, white 0 1px 5px, white 0 -1px 5px, white 1px 0 5px, white -1px 0 5px;
  color: black;
  top: 0;
  right: 0;
}
@media screen and (min-width: 1000px) {
  .hexColorPicker {
    width: 30vw;
  }
  .centerBox {
    padding-bottom: calc(2vh + (30vw * 126 / 855));
  }
}
@media screen and (min-width: 306px) and (max-width: 1000px) {
  .hexColorPicker {
    width: 300px;
  }
  .centerBox {
    padding-bottom: calc(2vh + (300px * 126 / 855));
  }
}
@media screen and (max-width: 306px) {
  .hexColorPicker {
    width: 98vw;
  }
  .centerBox {
    padding-bottom: calc(2vh + (98vw * 126 / 855));
  }
}