index.css

#header_title {
  position: absolute;
  margin: 0;
  padding-bottom: 0%;
  font-family: sans-serif;
  text-align: center;
  background-color: #BFD7EA;
  background-image: linear-gradient(to bottom, #BFD7EA, #FEFFFE);
  height: 5%;
  color: #0B3954;
  width: 100%;
  font-size: 4vh;
}

a {
  color: #FF6663;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: linear-gradient(135deg, #edf3f7 25%, transparent 30%) -50px 0, linear-gradient(225deg, #edf3f7 25%, transparent 30%) -50px 0, linear-gradient(315deg, #edf3f7 25%, transparent 30%), linear-gradient(45deg, #edf3f7 25%, transparent 30%);
  background-size: 100px 100px;
  font-size: 1vw;
  background-color: #FEFFFE;
}

#map-holder {
  width: 100vw;
  height: 100vh;
  fill: transparent;
}

#infoPanel {
  position: fixed;
  text-align: center;
  background: transparent;
  border-radius: 6px;
  opacity: 0.9;
  top: 0vh;
  width: 15%;
  height: 17%;
  right: 0vw;
  font-size: 0.8vw;
}

#infoIcon {
  position: absolute;
  margin: auto;
  fill: #2e2b2b;
  margin-left: 0;
  display: block;
}

#infoText {
  font-size: 1.5vh;
  margin: auto;
  visibility: hidden;
  font-weight: bolder;
}

svg rect {
  fill: transparent;
  /* map background colour */
}

.country {
  stroke: white;
  /* country border colour */
  stroke-width: 0.2;
  /* country border width */
}

.country-on {
  fill: #FF6663;
  /* highlight colour for selected country */
}

.country-hover {
  stroke: white;
  fill: #FF6663;
  stroke-width: 2;
}

.countryLabel {
  display: none;
  /* hide all country labels by default */
}

.countryName {
  fill: #FFFAFF;
  /* country label text colour */
}

#footerSlideContainer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.hidden {
  display: none;
}

div.tooltip {
  color: #FF6663;
  background-color: #FEFFFE;
  padding: .5em;
  font-weight: bold;
  border-radius: 3px;
  opacity: 0.9;
  position: absolute;
}

#footerSlideContent {
  width: 100%;
  height: 0vh;
}

#footerSlideHeader {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #BFD7EA, #FEFFFE);
  border-bottom-style: outset;
}

#footerSlideInfo {
  width: 100%;
  height: 100%;
  align-content: center;
  vertical-align: middle;
  background-image: linear-gradient(to top, #BFD7EA, #FEFFFE);
}

#header_flag, #header_country, #header_region, #header_rank, #header_score {
  display: inline-block;
  *display: inline;
  font-size: 1.3vw;
  margin: auto;
  vertical-align: middle;
}

#header_flag {
  width: 5%;
  height: 100%;
  align-self: flex-end;
}

#header_country {
  width: 31%;
  height: 100%;
  height: 100%;
  font-weight: bolder;
  font-size: 3.2vw;
}

#header_region {
  width: 25%;
  height: 100%;
  text-align: center;
}

#header_rank {
  width: 16%;
  height: 100%;
  text-align: center;
}

#header_score {
  width: 21%;
  height: 100%;
  text-align: center;
}

#rank_title, #region_title, #score_title {
  margin: auto;
  vertical-align: middle;
  height: 50%;
  font-weight: bolder;
}

#region_value, #rank_value, #score_value {
  margin: 0;
  height: 50%;
  font-size: 1.8vw;
  vertical-align: top;
  color: #FF6663;
  font-weight: bolder;
}

#footer_graph, #footer_radar {
  height: 100%;
  display: inline-block;
  zoom: 1;
  margin: auto;
  vertical-align: middle;
}

#footer_graph {
  width: 55%;
  padding-top: 20px;
  display: inline-flex;
  vertical-align: middle;
  text-align: center;
  align-content: center;
  font-size: xx-large;
}

#footer_radar {
  width: 44%;
  display: inline-flex;
}