/* Without this, Chrome won't let you click on the hexagon URLs */
path {
  pointer-events: visibleFill;
}

@media only screen and (min-width: 1301px) {
  #hexmap {
    height: 1000px;
    width: 1000px;
    animation-duration: 0.3s;
  }
}

@media only screen and (max-width: 1300px) {
  #hexmap {
    height: 80vh;
    width: 80vw;
    animation-duration: 0.3s;
  }
}

#hexmap .hex path {
  stroke: white;
  stroke-width: 2;
  transition: fill 0.3s ease-in, stroke 0.3s ease-in, stroke-width 0.3s ease-in;
}

/* Make the hexagon larger when hovered */
#hexmap .hover path {
  stroke-width: 4px;
  stroke: black;
  transform: scale(2.5);
}

#hexmap .hex-label {
  font-size: 1.75rem;
  line-height:1.1em;
}

/* Set the on and off styles for the text labels */
#hexmap .hex-label tspan.on {
  display: none;
}

#hexmap .hex-label tspan.off {
  display: block;
}

#hexmap .hex-label tspan.big {
  font-weight: bold;
  font-size: 1.2em;
}

#hexmap .hover .hex-label tspan.on {
  display: block;
}

#hexmap .hover .hex-label tspan.off {
  display: none;
}

.hexagon {
  height: 32px;
  width: 35px;
  min-width: auto;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
}