index.css

html {
  margin: none;
  width: 100%;
  height: 100%;
  text-align: center;
}

.slider_container {
  width: 90%;
  height: 20%;
}

input#slider {
  width: 1000px;
  height: 50%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
}

body h1 {
  display: block;
  width: 100%;
  background-color: black;
  color: white;
  margin: 0 auto;
  text-align: center;
}

.page_full {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  margin: 0;
}

.label_map_container {
  width: 100%;
  height: 20%;
  /* background-color: whitesmoke; */
  /* border: 1px solid black; */
}

#svg_map {
  width: 100%;
  /* height: 100%; */
  margin: auto;
  background-color: lightblue;
}

.country {
  /* fill: whitesmoke; */
}

.country_label_container {
  height: 50%;
}

#country_label {
  width: 100%;
  margin: auto;
  /* height: 100%; */
}

#country_label text {
  font-size: 30px;
}

.filled {
  fill: red;
}

.clicked {
  fill: yellow;
}

.outline {
  fill: none;
  stroke: grey;
  stroke-width: 1px;
}

.graticule {
  fill: none;
  stroke: grey;
  stroke-width: 1px;
  padding: 1%;
}