body{
    color: #fff;
    /*padding: 20px;*/
    font-family: arial;
    background: #000;
}

*{
    padding: 0;
    margin: 0;
}

.result{
    padding:30px;
    text-align: center;
}

#map{
    width: 100%;
    /*height: calc(100vh - 100px);*/
    height: 100vh !important;
    margin: 0 !important;
}

#cityForm {
    position: absolute;
    top: 10px;
    left: 10px;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 1000; /* Ensures the form is above the map */
}
.cityField {
    margin-bottom: 10px;
}
.removeCity {
    margin-left: 10px;
}


.btn.active {
    background-color: #007bff; /* Azul, por exemplo */
    color: #fff; /* Texto branco */
}



.leaflet-div-icon {
    border: none !important;
    background-color: transparent !important;
}



.animated-div {
    background-color: green;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 1000;
    position: relative;
    animation: grow-shrink 1s infinite;
}


.caixa-moedas img {
  width: 10rem !important;
  height: 10rem !important;
}
.flip-card {
  width: 10rem !important;
  height: 10rem !important;
}

.cityImages img, .Images img {
    height: 50vh;
    margin-top:1rem;
    object-fit: contain;
}



.finalmentes{
    color:black;
    background-image: url('https://viewder.com.br/v2/games/volta-mundo/imagem/bgEstrategias/BackgroundTelaEstrategias.jpg');
  
  }
  .containerFinalmentes{
    display:flex;
    justify-content:center;
    align-items:center;
  }


  .shadowDiv{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width: 100%;
    height: 100%;
    z-index: 20000;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
  }
  .containerShadowDiv{
    width: 70%;
    height:80%;
    display: flex;
    flex-direction:column;
    position:relative;
    border-radius:3rem;
    gap:.5rem;
  }
  .headerShadowDiv{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    height:20%;
  }
  .introducaoShadowDiv{
    width: 60%;
    max-width:100%;
    height:50%;
    max-height:100%;
    padding:3rem;
    border-radius:0 3rem 0 3rem;
    background-color:rgba(36, 36, 36, 0.8);
    display:flex;
    justify-content:center;
    align-items:center;

  }

  #introducaoRespondeu{
    flex-direction:column;
    max-height:100%;
    padding:3rem
  }

  #introducaoRespondeu h6{
    margin-bottom:0;
    color:white
  }

  .introducaoShadowDiv h1{
    font-family:'Bangers';
    font-weight:'bold';
    color:white;
    font-size:3rem;
    margin-bottom:0;

  }


  #perguntaSpace{
    width:100%;
    min-height:20%;
    max-height:40%;
    overflow-y:auto;
    display: flex;
    justify-content:center;
  }
  #containerTexto{
    width: 80%;
    height:100%
  }

  #containerTexto h4{
    font-weight:bold;
    color:white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }

  .containerShadowDiv img{
    width: 100%;
    height: 100%; 
    position: absolute; 
    border-radius:3rem;
    z-index: 1;
  }
  .conteudoModalPerguntas{
    z-index: 2;
  }

 
  

  #botoesRespondeu{
    z-index: 2;
    width: 100%;
    display:flex;
    justify-content:center
  }

  

  #containerTextoRespondeu{
    width: 50%;
    z-index: 2;
  }

  #mainRespondeu{
    height:50%;
    padding:2rem;
    gap:2rem;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  

  #mainRespondeu h2{
    text-align:justify;
    font-weight:bold;
    font-size:2.5rem;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
  



#boasVindasModal{
    width: 100vw;
    height:100vh;
    justify-content:center;
    align-items:center
  }
  
  #boasVindasModal .modal-content{
    width:70%;
  }
  
  #boasVindasLabel{
    width: 100%;
    height: 10%;
  }
  
  #body-boasVindas{
    width: 100%;
    height:90%;
    display:flex;
    justify-content:center;
  }
  
  #modalContent{
    justify-content:center;
    width:90%;
    height:90%;
  }
  
  #cityDescription{
    width: 100%;
    height: 20%;
    overflow-y:auto;
  }
  
  #cityImages{
    width: 100%;
    height:80%;
  
  }
  #boasVindasFooter{
    width: 100%;
    height:10%;
  }
  
  #boasVindasContainer{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 80%;
  }
  
  
#redirecionamentoNy{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.3);
    backdrop-filter: blur(2px);
    z-index: 100000;
}


#containerRedirecionamento{
    width: 60%;
    height: 60%;
    border-radius: 3rem;
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

#tituloContainerRedirecionamento{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

#conteudoRedirecionamento{
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}