html {
  background-color: #fafafa;
  margin-bottom: 100px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.header {
  text-align: center;
  width: 100%;
}

.navigation {
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  user-select: none;
}

.title {
  margin-bottom: 5px;
}

.subtitle {
  display: block;
  font-size: 12px;
  margin-bottom: 15px;
}

.nav-link {
  border-bottom: 1px solid transparent;
  border-top: 1px solid #126282;
  box-sizing: border-box;
  display: inline-block;
  width: 30%; 
}

.on-page {
  border-bottom: 1px solid #a1e4ff;
}

/* ================== MAP & CHART ================== */

.chart-container {
  border: 1px solid gray;
  margin-bottom: 10px;
  zoom: 0.5;
}

.map-container {
  background-color: #d1d8fe;
  border: 1px solid gray;
  box-sizing: border-box;
  margin-bottom: 10px;
  max-height: 600px;
  max-width: 800px;
  overflow: hidden;
  padding: 25%; /* hack -- 40% means height is 80% of width */
  position: relative;
  width: 100%;
}

.map {
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(1.4) translate(0, 7%);
}

.map svg {
  width: 100%;
}

.chart-title-hack {
  background-color: #fafafa;
  box-sizing: border-box;
  font-size: 16px;
  left: 14px;
  line-height: 18px;
  padding: 10px 10px 5px;
  position: absolute;
  top: 10px;
  width: 90%;
}

.chart-title-hack span {
  display: block;
  margin-bottom: 5px;
}

/* ================== BUTTONS ================== */

button span {
  /* do not alphabetize -- 
    this makes the text inverted -- 
    important when the button turns black */
  background-clip: text;
  background: inherit;
  -webkit-background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1) contrast(100);
}

.button {
  background-color: #fafafa;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  margin: 5px;
  outline: none;
  padding: 0 3px;
  text-align: left;
  user-select: none;
  width: 100%;
}

#buttons {
  column-count: 10;
  margin-left: auto;
  margin-right: auto;
  max-width: 1600px;
}

/* ================== CHART & MAP BREAKPOINTS ================== */

@media all and (min-width: 500px) {
  .chart-container {
    zoom: 0.6;
  }
}

@media all and (min-width: 600px) {
  .chart-container {
    zoom: 0.7;
  }
}

@media all and (min-width: 700px) {
  .chart-container {
    zoom: 0.8;
  }
}

@media all and (min-width: 800px) {
  .chart-container {
    zoom: 0.9;
  }
}

@media all and (min-width: 820px) {
  .map-container {
    height: 420px;
    margin-left: 50%;
    padding: 0;
    transform: translate(-50%, 0);
    width: 800px;
  }

  .chart-container {
    margin-left: 50%;
    max-width: 800px;
    transform: translate(-50%, 0);
    width: 800px;
    zoom: 1;
  }
}

@media all and (min-width: 2000px) {
  .map-container {
    display: inline-block;
    margin-left: calc(50vw - 800px);
    transform: translate(0, 0);
  }
  .chart-container {
    display: inline-block;
    margin-left: 0;
    transform: translate(0, 0);
  }
}

/* ================== BUTTONS BREAKPOINTS ================== */

@media all and (max-width: 1730px) {
  #buttons {
    column-count: 10;
  }
}

@media all and (max-width: 1570px) {
  #buttons {
    column-count: 9;
  }
}

@media all and (max-width: 1410px) {
  #buttons {
    column-count: 8;
  }
}

@media all and (max-width: 1250px) {
  #buttons {
    column-count: 7;
  }
}

@media all and (max-width: 1090px) {
  #buttons {
    column-count: 6;
  }
}

@media all and (max-width: 930px) {
  #buttons {
    column-count: 5;
  }
}

@media all and (max-width: 820px) {
  .chart-title-hack {
    display: none;
  }
}

@media all and (max-width: 770px) {
  #buttons {
    column-count: 4;
  }
}

@media all and (max-width: 610px) {
  #buttons {
    column-count: 3;
  }
}

@media all and (max-width: 450px) {
  #buttons {
    column-count: 2;
  }
}