svg {
  display: block;
  margin: auto;
}

.water {
  fill: lightblue;
  opacity: .5;
}

.land {
  fill: white;
  stroke: lightgrey;
  stroke-width: 0.7px;
}

.equal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
}

#country-stories {
  display: block;
  font-family: sans-serif;
  text-align: center;
}

/* Adds a slight padding between the globe and related stories, only on smartphones */
@media screen and (max-width: 720px) {
  #country-stories {
    margin-top: 5vh;
  }
}

.affected {
  fill: #935a5b;
}

.focused {
  fill-opacity: 1;
}

select {
  display: block;
  text-align: center;
  width: 100%;
  padding: 1rem;
  margin: 2.5vh 0 !important;
  border: solid #ccc 1px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
}

/* A tooltip that displays country name on hover. Will probably be deleted all together or only shown on desktops. */
.countryTooltip {
  position: absolute;
  display: none;
  pointer-events: none;
  background: #fff;
  padding: 5px;
  text-align: left;
  border: solid #ccc 1px;
  color: #666;
  font-size: 14px;
  font-family: sans-serif;
}