*{
    font-family:Arial, Helvetica, sans-serif;
}

.content {
    display: flex;
    justify-content: center;
    position: relative;
    width: 45%;
    margin-top: 10rem;
  }

  svg {
    width: 100%;
    filter: drop-shadow(10px 5px 3px #9a856d); 
  }

  .aguia_branca{fill: #ffb9a5;}
  .agua_doce_norte { fill: #ffb9a5;}
  .anchieta {fill: #f3c444;}
  .afonso_claudio {fill: #f0a86b;}
  .apiaca {fill: #a3b0cb;}
  .aracruz {fill: #ffe3b2;}
  .alegre {fill: #ffc770;}
  .alfredo_chaves {fill: #f3c444;}
  .alto_novo {fill: #e2f672;}
  .atilio_vivacqua {fill: #a3b0cb;}
  .barra_francisco {fill: #ffb9a5;}
  .boa_esperança {fill: #b8c160;}
  .brejetuba {fill: #f0a86b;}
  .baixo_guandu {fill: #e2f672;}
  .bom_jesus_norte {fill: #ffc770;}
  .colatina {fill: #e2f672;}
  .castelo {fill: #a3b0cb;}
  .cariacica {fill: #ff9c4e;}
  .cachoeiro_itapemirim {fill: #a3b0cb;}
  .conceicao_castelo {fill: #f0a86b;}
  .dores_preto{fill: #ffc770;}
  .domingo_martins {fill: #f0a86b;}
  .domingos_norte {fill: #e2f672;}
  .conceicao_barra {fill: #b8c160;}
  .divino_lourenco {fill: #ffc770;}
  .ecoporanga {fill: #ffb9a5;}
  .fundao{fill: #ff9c4e;}
  .guarapari {fill: #ff9c4e;}
  .gabriel_palha {fill: #e2f672;}
  .governador_lindenberg {fill: #e2f672;}
  .guacui {fill: #ffc770;}
  .iconha {fill: #f3c444;}
  .ibatiba {fill: #ffc770;}
  .iuna {fill: #ffc770;}
  .irupi {fill: #ffc770;}
  .itarana {fill: #ffa2d9;}
  .ibiracu {fill: #ffe3b2;}
  .itaguacu {fill: #ffa2d9;}
  .itapemirim {fill: #f3c444;}
  .ibitirama {fill: #ffc770;}
  .jeronimo_monteiro {fill: #ffc770;}
  .joao_neiva {fill: #ffe3b2;}
  .jose_calcado {fill: #ffc770;}
  .jaguare {fill: #b8c160;}
  .laranja_terra {fill: #f0a86b;}
  .linhares {fill: #ffe3b2;}
  .muqui {fill: #a3b0cb;}
  .marataizes {fill: #f3c444;}
  .mimoso_sul {fill: #a3b0cb;}
  .muniz_freire {fill: #ffc770;}
  .mantenopolis {fill: #ffb9a5;}
  .marechal_floriano {fill: #f0a86b;}
  .mucurici {fill: #b8c160;}
  .montanha {fill: #b8c160;}
  .marilandia {fill: #e2f672;}
  .nova_venecia {fill: #ffb9a5;}
  .presidente_kennedy {fill: #f3c444;}
  .pedro_canario {fill: #b8c160;}
  .piuma {fill: #f3c444;}
  .pancas {fill: #e2f672;}
  .pinheiros {fill: #b8c160;}
  .ponto_belo {fill: #b8c160;}
  .roque_canaa {fill: #e2f672;}
  .rio_bananal {fill: #ffe3b2;}
  .rio_novo_sul {fill: #f3c444;}
  .santa_leopoldina {fill: #ffa2d9;}
  .sooretama {fill: #ffe3b2;}
  .santa_maria_jetiba {fill: #ffa2d9;}
  .santa_teresa {fill: #ffa2d9;}
  .sao_mateus {fill: #b8c160;}
  .serra {fill: #ff9c4e;}
  .vila_valerio {fill: #e2f672;}
  .vila_pavao {fill: #ffb9a5;}
  .viana {fill: #ff9c4e; }
  .vargem_alta {fill: #a3b0cb;}
  .venda_imigrante {fill: #f0a86b;}
  .vila_velha {fill: #ff9c4e;}
  .vitoria {fill: #ff9c4e;}
  
  .aguia_branca:hover, .agua_doce_norte:hover, .ecoporanga:hover, .mantenopolis:hover, .nova_venecia:hover,
  .vila_pavao:hover .barra_francisco:hover { fill: #ff9c89; }
  .anchieta:hover, .alfredo_chaves:hover, .itapemirim:hover, .iconha:hover, 
  .marataizes:hover, .piuma:hover, .rio_novo_sul:hover,.presidente_kennedy:hover{ fill: #e3b440; }
  .afonso_claudio:hover, .brejetuba:hover, .conceicao_castelo:hover, 
  .domingo_martins:hover, .laranja_terra:hover, .marechal_floriano:hover, 
  .venda_imigrante:hover { fill: #d6925e; }
  .apiaca:hover, .atilio_vivacqua:hover, .castelo:hover, .cachoeiro_itapemirim:hover, 
  .mimoso_sul:hover, .muqui:hover, .vargem_alta:hover { fill: #8f9bb6; }
  .aracruz:hover, .ibiracu:hover, .joao_neiva:hover, .linhares:hover, 
  .sooretama:hover, .rio_bananal:hover { fill: #ffcf9c; }
  .alegre:hover, .bom_jesus_norte:hover, .divino_lourenco:hover, .guacui:hover, 
  .ibatiba:hover, .iuna:hover, .irupi:hover, .jeronimo_monteiro:hover, 
  .jose_calcado:hover, .muniz_freire:hover, .ibitirama:hover, .dores_preto:hover { fill: #ffb455; }
  .alto_novo:hover, .baixo_guandu:hover, .colatina:hover, .domingos_norte:hover, 
  .gabriel_palha:hover, .governador_lindenberg:hover, .marilandia:hover, 
  .pancas:hover, .roque_canaa:hover, .vila_valerio:hover { fill: #c9e161; }
  .boa_esperança:hover, .conceicao_barra:hover, .jaguare:hover, .mucurici:hover, 
  .montanha:hover, .pedro_canario:hover, .pinheiros:hover, .ponto_belo:hover, 
  .sao_mateus:hover { fill: #a2b153; }
  .cariacica:hover, .fundao:hover, .guarapari:hover, .serra:hover, .viana:hover, 
  .vila_velha:hover, .vitoria:hover { fill: #e58834; }
  .itarana:hover, .itaguacu:hover, .santa_leopoldina:hover, 
  .santa_maria_jetiba:hover, .santa_teresa:hover { fill: #e891bf; }
  
  
  path {
    fill: white;
    stroke: rgb(0, 0, 0);
    stroke-width: 1px
  }
  
  .tooltip {
    pointer-events: none;
    position: absolute;
    font-size: 18px;
    text-align: center;
    background: white;
    padding: 10px 15px;
    z-index: 5;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    color: #366CA3;
    border-radius: 5px;
    transform: translateX(-50%);
    display: none;
  }
  .tooltip.active {
    display: block;
  }
  .tooltip:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
  }

  @media((min-width:300px) and (max-width: 600px)) {
    .content { 
      width:100% !important;
    }
  }

  @media((min-width:601px) and (max-width: 700px)) {
    .content { 
      width:80% !important;
      align-self: center !important;
    }
  }

  @media((min-width:701px) and (max-width: 900px)) {
    .content { 
      width:70% !important;
      align-self: center !important;
    }
  }

  @media((min-width:901px) and (max-width: 1100px)) {
    .content { 
      width:60% !important;
      align-self: center !important;
    }
  }

  @media((min-width:1001px) and (max-width: 1100px)) {

    body {
      gap: 2rem !important;
    }
    .content { 
      width:50% !important;
      align-self: center !important;
    }
  }

  @media((min-width:1101px) and (max-width: 1400px)) {

    body {
      gap: 2rem !important;
    }
    .content { 
      width: 50% !important;
      justify-content: center !important;
      align-self: center !important;
    }

    svg {
      width: 70% !important;
    }
  }