#title {
    letter-spacing: 4px;
    font-weight: 700;
    font-size: x-large;
  }
  
  text.tiny {
    font-size: 10pt;
  }
  text.light {
    fill: lightgrey
  }
  
  .world {
    stroke: lightgrey;
        stroke-width: 4px;
  }
  
  .cell {
    stroke: white;
    stroke-width: 1px;
  }
  
  .label {
    text-anchor: middle;
    fill: white;
  }
  
  .label>.name {
    dominant-baseline: text-after-edge;
  }
  
  .label>.value {
    dominant-baseline: text-before-edge;
  }
  
  .hoverer {
    fill: transparent;
    stroke: white;
    stroke-width:0px;
  }
  
  .hoverer:hover {
    stroke-width: 3px;
  }
  
  .legend-color {
    stroke-width: 1px;
    stroke:darkgrey;
  }

  #voronoi_map{
    display:none;
  }

/* ENDS SVG VORONOI */

@font-face {
  font-family: GTPlanar-Black;
  src: url(resources/fonts/GT-Planar-Black.otf);
  font-weight:bold;
}

@font-face {
  font-family: GTPlanar-Bold;
  src: url(resources/fonts/GT-Planar-Bold.otf);
  font-weight:bold;
}

@font-face {
  font-family: GTPlanar-Light;
  src: url(resources/fonts/GT-Planar-Light.otf);
  font-weight:lighter;
}

@font-face {
  font-family: SpaceGrotesk-Bold;
  src: url(resources/fonts/SpaceGrotesk-Bold.otf);
  font-weight: normal;
}

@font-face {
  font-family: SpaceGrotesk-Regular;
  src: url(resources/fonts/SpaceGrotesk-Regular.otf);
  font-weight: normal;
}

body{
  margin:0;
}

#loading_screen{
  background-color: #0a0a0a;
  z-index: 1;
  position: fixed;
  width:100%;
  height:100%;
}

#loading_screen img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:20%;
  height:auto;
}

#loading_screen span{
  position: absolute;
  color:white;
  top:70%;
  left:50%;
  transform: translate(-50%,-50%);
  font-family: GTPlanar-Black;
  font-size:1.5vw;
}

#background{
  width:100%;
  height:100%;
  background-color: #C20A41;
}


#foreground {
  background: radial-gradient(500px at center,#575757,#0a0a0a 50%);;
  border-radius: 40px;
  width:90%;
  height:90%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#header{
  color:white;
  display: block;
  width:25%;
  position: absolute;
  top:10%;
  left:10%;
}

#title{
  color:#C20A41;
  letter-spacing: normal;
  font-family: GTPlanar-Black;
  font-size: 2vw;
  margin-left: -0.25vw;
}

#subtitle{
  font-family: GTPlanar-Light;
  font-size: 0.75vw;
}

#modebutton{
  margin-top: 3vh;
  vertical-align: middle;
  color:#464646;
  font-family: SpaceGrotesk-Regular;
}

.selected{
  color:white;
  font-family: SpaceGrotesk-Bold;
  font-size: 1.25vw;
}
#causes{
  font-size: 1.25vw;
  margin-right: 1vw;
}

#consequences{
  
  font-size: 1.25vw;
  margin-left: 1vw;
}

.switch {
  position: relative;
  top:-1.5vh;
  display: inline-block;
  width: 2.1vw;
  height: 2.1vh;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:white;
  border-style: solid;
  border-width: 1px;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 0.75vw;
  width: 0.75vw;
  left: 0.2vw;
  bottom: 0.2vh;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2195f300;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2195f300;
}

input:checked + .slider:before {
  -webkit-transform: translateX(0.75vw);
  -ms-transform: translateX(0.75vw);
  transform: translateX(0.75vw);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


#output{
  width:100%;
  height:100%;
}
 

.up{
    z-index: 1;
}

  #previousc{
    color:white;
    position: absolute;
    font-family: SpaceGrotesk-Bold;
    font-size: 1.5vw;
    top:84.5%;
    height:5%;
    left:20%;
  }

  #previousc:hover{
    text-decoration: underline;
    cursor:pointer;
  }

  #nextc:hover{
    text-decoration: underline;
    cursor:pointer;
  }

  #nextc{
    color:white;
    font-family: SpaceGrotesk-Bold;
    font-size: 1.5vw;
    position: absolute;
    top:84.5%;
    height:5%;
    right:20%;
  }


  #country::-webkit-scrollbar{
display: none;
  }

  #country{
    display: inline;
    position: absolute;
    font-family: SpaceGrotesk, sans-serif;
    font-size: 1.25vw;
    top:85%;
    left:50%;
    color:rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
    width:50%;
    height:5%;
    text-align: center;
    overflow-x: auto;
    overflow-y:hidden;
    
    
  }


  .countryselected{
    font-family: SpaceGrotesk-Bold, sans-serif;
    font-size: 1.25vw;
    color:rgba(255, 255, 255, 1);
  }


  #countryinner{
    width:1000%;
    scroll-behavior: smooth;
    
    }
.countryspan:hover{
  text-decoration: underline;
  cursor: pointer;
}

.countryspan{
  margin:0.5vw;
}
  #year{
    font-family: SpaceGrotesk-Bold, sans-serif;
    font-size: 2vw;
    position: absolute;
    top:10%;
    left:50%;
    color:white;
    transform: translateX(-50%);
  }

  #nexty:hover{
    text-decoration: underline;
    cursor:pointer;
  }

  #previousy:hover{
    text-decoration: underline;
    cursor:pointer;
  }


#legend_consequences{
  font-family: GTPlanar-Bold;
  font-size:0.8vw;
  position: absolute;
  border-radius: 10px;
  background-color: #f7f7f7;
  top:40%;
  right:20%;
  width:14%;
  height:42.5%;
}

#legend_causes{
  font-family: GTPlanar-Bold;
  font-size:0.8vw;
  position: absolute;
  border-radius: 10px;
  background-color: #f7f7f7;
  top:40%;
  right:20%;
  width:14%;
  height:42.5%;
}

.legend_labels{
  width: 90%;
  margin:auto;
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);

}

.legend_labels p{
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

.value{
  font-size: 0.8vw;
  margin-left: 1vw;
  font-family: GTPlanar-Light;
}

.square {
  position: relative;
  top:0.5vh;
  margin-right:0.25vw;
  display: inline-block;
  height: 0.75vw;
  width: 0.75vw;
}

.arrowup {
  border: solid green;
  border-width: 0 3px 3px 0;
  margin-left:0.5vw;
  margin-top:1vh;
  display: inline-block;
  padding: 3px;
}

.arrownone {
  border: solid green;
  border-width: 0 3px 3px 0;
  margin-left:0.5vw;
  margin-top:1vh;
  display: inline-block;
  padding: 3px;
  visibility: hidden;
}

.arrowdown{
  border: solid red;
  border-width: 0 3px 3px 0;
  margin-left:0.5vw;
  margin-top:1vh;
  display: inline-block;
  padding: 3px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

  #co2_emissions{
    color: #1B1F3B;
    
  }

  #co2_emissions:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #co2_emissions .square{
    background-color: #1B1F3B;
  }

  #fertilizer_quantity{
    color: #865B3B;
  }

  #fertilizer_quantity:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #fertilizer_quantity .square{
    background-color: #865B3B;
  }

  #forest_area{
    color: #0F7806;
  }

  #forest_area:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #forest_area .square{
    background-color: #0F7806;
  }

  #fossil_fuels{
    color: #464646;
  }

  #fossil_fuels:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #fossil_fuels .square{
    background-color:#464646;
  }

  #livestock_production{
    color: #C20A41;
  }

  #livestock_production:hover{
    text-decoration: underline;
    cursor:pointer;    
  }
  
  #livestock_production .square{
    background-color: #C20A41;
  }

  #population{
    color: #246BD4;
  }

  #population:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #population .square{
    background-color: #246BD4;
  }

  #renewables_production{
    color: #E2CF21;
  }

  #renewables_production:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #renewables_production .square{
    background-color: #E2CF21;
  }


  #agricultural_land{
    color: #713D0D;
    
  }

  #agricultural_land:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #agricultural_land .square{
    background-color: #713D0D;
  }

  #surface_temp{
    color: #B21313;
  }

  #surface_temp:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #surface_temp .square{
    background-color: #B21313;
  }

  #gdp{
    color: #49A133;
  }

  #gdp:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #gdp .square{
    background-color: #49A133;
  }

  #air_pollution{
    color: #303030;
  }

  #air_pollution:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #air_pollution .square{
    background-color:#303030;
  }

  #precipitation{
    color: #202C9C;
  }

  #precipitation:hover{
    text-decoration: underline;
    cursor:pointer;    
  }
  
  #precipitation .square{
    background-color: #202C9C;
  }

  #redlist_index{
    color: #EC7F1A;
  }

  #redlist_index:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #redlist_index .square{
    background-color: #EC7F1A;
  }

  #poverty{
    color: #DCB186;
  }

  #poverty:hover{
    text-decoration: underline;
    cursor:pointer;    
  }

  #poverty .square{
    background-color: #DCB186;
  }


/* The side navigation menu */

.head_title a{
  position: absolute;
  top:0;
  right:0;
  padding: 1vw;
  color:#0a0a0a;
  font-family: GTPlanar-Black;
  font-size:0.75vw;
}

.head_title a:hover{
  text-decoration: underline;
  cursor: pointer;
}

#co2_info {
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: hidden; 
  transition: 0.5s; 
}

#co2_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/co2_emissions.jpeg");
  background-size: 100% auto;
}

#co2_info .head_title span{
  position: absolute;
  top:12.5vh;
  color: #1B1F3B;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#fertilizer_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: hidden; 
  transition: 0.5s; 
}


#fertilizer_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/fertilizer.jpeg");
  background-size: 100% auto;
}

#fertilizer_info .head_title span{
  position: absolute;
  top:5vh;
  color: #865B3B;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#forest_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: hidden; 
  transition: 0.5s; 
}


#forest_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/forest_area.jpeg");
  background-size: 100% auto;
}

#forest_info .head_title span{
  position: absolute;
  top:12.5vh;
  color: #0F7806;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#fossil_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: hidden; 
  transition: 0.5s; 
}


#fossil_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/fossil_fuels.jpeg");
  background-size: 100% auto;
}

#fossil_info .head_title span{
  position: absolute;
  top:5vh;
  color: #464646;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#Meat_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: hidden; 
  transition: 0.5s; 
}


#Meat_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/meat_production.jpeg");
  background-size: auto 100%;
}

#Meat_info .head_title span{
  position: absolute;
  top:12.5vh;
  color: #C20A41;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#Population_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Population_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/population.jpg");
  background-size: auto 100%;
}

#Population_info .head_title span{
  position: absolute;
  top:12.5vh;
  color: #246BD4;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#Renewables_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Renewables_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/renewables.jpeg");
  background-size: 100% auto;
}

#Renewables_info .head_title span{
  position: absolute;
  top:5vh;
  color: #E2CF21;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#Agricultural_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Agricultural_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/agricultural_land.jpeg");
  background-size: 100% auto;
}

#Agricultural_info .head_title span{
  position: absolute;
  top:5vh;
  color: #713D0D;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#Surface_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Surface_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/surface_temp.jpeg");
  background-size: 100% auto;
}

#Surface_info .head_title span{
  position: absolute;
  top:5vh;
  color: #B21313;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}


#GDP_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#GDP_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/GDP.jpeg");
  background-size: 100% auto;
}

#GDP_info .head_title span{
  position: absolute;
  top:5vh;
  color: #49A133;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}


#Air_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Air_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/air_pollution.webp");
  background-size: 100% auto;
}

#Air_info .head_title span{
  position: absolute;
  top:5vh;
  color: #303030;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}


#Precipitation_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Precipitation_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/precipitation.jpeg");
  background-size: 100% auto;
}

#Precipitation_info .head_title span{
  position: absolute;
  top:12.5vh;
  color: #202C9C;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}


#Redlist_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Redlist_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/redlist_index.jpeg");
  background-size: 100% auto;
}

#Redlist_info .head_title span{
  position: absolute;
  top:12.5vh;
  color: #EC7F1A;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

#Poverty_info{
  height: 100%; 
  border-radius: 10px;
  width: 25%;
  position: fixed; 
  z-index: 10;
  top: 0; 
  right: -25%;
  background-color: rgb(241, 241, 241);
  overflow-x: scroll; 
  transition: 0.5s; 
}


#Poverty_info .head_title{
  width:100%;
  height:20%;
  background-image: url("resources/navbg/poverty.jpeg");
  background-position: center;
  background-size: 120% auto;
}

#Poverty_info .head_title span{
  position: absolute;
  top:5vh;
  color: #DCB186;
  margin-left: 1vw;
  font-size: 2.5vw;
  font-family: GTPlanar-Black;
}

.info{
  padding:2em;
  text-align: justify;
  font-family: GTPlanar-Light;
  font-size:0.8vw;
  color:#0a0a0a;
}

.info h2{
  text-align: left;
  font-family: GTPlanar-Bold;
  font-size: 1.2vw;
}

#source{
  padding:2em;
  text-align: justify;
  font-family: GTPlanar-Light;
  font-size:0.3vw;
  color:#0a0a0a;
}

#overlay{
  position: absolute;
  z-index: 1;
  width:100%;
  height:100%;
  background-color: #0a0a0a;
  opacity: 0;
  transition: 0.5s;
  visibility: hidden;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #f7f7f7;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
  height:50%;
  overflow-y: scroll;
  border-radius: 10px;
  font-family: GTPlanar-Light, sans-serif;
}
.modal-content span{
  font-family: GTPlanar-Bold, sans-serif;
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#myBtn{
  position: absolute;
  bottom:1vh;
  left:1vw;
  width:2em;
  cursor:pointer;
}

#download{
  position: absolute;
  left:50%;
  bottom:8%;
  transform: translateX(-50%);
  width:2em;
  cursor: pointer;
}

#logotype{
  width:50%;
}