:root {
  --menuwidth: 260px;

  --bg-one: #ffffff;
  --bg-two: #ececec;
  --bg-three: #5e5e5e;

  --textcolor-dark: #444444;
  --textcolor-darker: #333;
  --textcolor-solid: #ffffff;

  --line-color: #000;

  --boxshadow-center: 0 0px 15px rgba(0,0,0,0.7);
  --boxshadow-glass: 0 0px 17px rgba(0,0,0,1);
  --boxshadow-btm: 0 5px 10px rgba(0, 0, 0, 0.4);
}

.dark-mode {
  --bg-one: #1d1d1d;
  --bg-two: #333333;
  --big-three: #b3b3b3;

  --textcolor-dark: #ffffff;
  --textcolor-darker: #e2e2e2;
  --textcolor-solid: #frgb(0, 0, 0)

    --line-color: #fff;

  --boxshadow-center: 0 0px 2px rgba(255, 255, 255, 0);
  --boxshadow-glass: 0 0px 2px rgba(255, 255, 255, 0);
  --boxshadow-btm: 0 3px 6px rgba(255, 255, 255, 0);
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-layers {
  background: var(--bg-one) !important;
  color: var(--textcolor-darker) !important;
  border: 0px !important;
}

button {
  border-radius: 4px;
  border: 0px;
  border-radius: 4px;
  border: 0px;
  transition: box-shadow 0.05s, transform 0.05s;
  padding: 6px;
  margin: 0px 30px;
  background: var(--bg-two);
  color: var(--textcolor-dark);
  background: var(--bg-two);
  color: var(--textcolor-dark);
}
button:active {
  transform: translateY(2px);
  background: var(--bg-one);
  color: var(--textcolor-darker);
}
svg {
  overflow: visible;
}

@keyframes spin-once {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
.spin-once {
  animation: spin-once 0.3s linear;
}