:root{
    --mapWater-light: rgb(255, 255, 255);
    --mapWater-dark: rgb(65, 65, 65);
    --text-color-light: rgb(0, 0, 0);
     --text-color-dark: rgb(178, 200, 55);
    --path-color-light: rgb(0, 128, 0);
    --text-color-dark2: rgb(100,108,255);
     --country-guess-color: rgb(168, 105, 115);
    --on-path-color-light: rgb(124, 205, 124)
}
#root {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }
  
  /* Media Query para dispositivos con un ancho máximo de 600px (móviles) */
  @media only screen and (max-width: 600px) {
    #root {
      padding: 1rem;
    }
  }
  
  /* Media Query para dispositivos con un ancho máximo de 768px (tabletas) */
  @media only screen and (max-width: 768px) {
    #root {
      padding: 1.5rem;
    }
  }
  
.gameOver{
    color:#000
}
.score{
    color:#000;
    background-color:#fff
}
.score.dark{
    color:var(--text-color-dark);
    background-color:var(--mapWater-dark)
}
.topButton.light{
    color:#000;
    background-color:#fff
}
.topButton.dark{
    color:var(--text-color-dark);
    background-color:var(--mapWater-dark)
}
.title.light{
    color:#000
}
.title.dark{
    color:var(--text-color-dark)
}
.optimal{
    color:#000;
    background-color:orange;
    padding:.5rem
}
h3{
    color:#000
}
h2{
    color:green
}
.custom-checkbox input[type=checkbox]{
    display:none
}
.custom-checkbox label{
    position:relative;
    padding-left:20px;
    cursor:pointer
}
.custom-checkbox label:before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    height:12px;
    width:12px;
    background-color:var(--mapWater-dark)
}
.custom-checkbox input[type=checkbox]:checked+label:before{
    background-color:var(--mapWater-dark)
}
.custom-checkbox input[type=checkbox]:checked+label:after{
    content:"";
    position:absolute;
    left:3px;
    top:45%;
    transform:translateY(-50%) rotate(35deg);
    width:3px;
    height:7px;
    border:solid white;
    border-width:0 2px 2px 0
}
._bounded-input_1qg4p_1._light_1qg4p_1{
    color:#000;
    background-color:#f8f8f8
}
._bounded-input_1qg4p_1._dark_1qg4p_6{
    color:var(--text-color-dark);
    background-color:var(--mapWater-dark)
}
 label._light_1qg4p_1{
    color:#000
}
label._dark_1qg4p_6{
    color:var(--text-color-dark)
}
 ._fuzzy-lookup_1gk1t_1{
    display:inline-block;
    position:relative;
}
 ._fuzzy-lookup-input_1gk1t_6{
    width:100%;
    padding:8px;
    font-size:14px;
   
}
 ._fuzzy-lookup-input_1gk1t_6._light_1gk1t_12{
    background-color:#f8f8f8;
    color:#000;
    width:70%;
}


 ._fuzzy-lookup-input_1gk1t_6._dark_1gk1t_17{
    background-color:var(--mapWater-dark);
    color:var(--text-color-dark);
    width:70%;
    
}
 ._fuzzy-lookup-results_1gk1t_24{
    position:absolute;
    top:auto;
    bottom:calc(100% + 10px);
     left:0;
    z-index:1;
    list-style-type:none;
    margin:0;
    padding:0;
    width:100%;
    max-height:200px;
    overflow-y:auto
}
 ._fuzzy-lookup-results_1gk1t_24._light_1gk1t_12{
    border:1px solid #ccc;
    background-color:#fff
}
 ._fuzzy-lookup-results_1gk1t_24._dark_1gk1t_17{
    border:1px solid var(--text-color-dark);
    background-color:var(--mapWater-dark)
}
 ._fuzzy-lookup-result_1gk1t_24{
    padding:8px;
    cursor:pointer
}
._fuzzy-lookup-result_1gk1t_24._light_1gk1t_12{
    color:#000
}
._fuzzy-lookup-result_1gk1t_24._dark_1gk1t_17{
    color:var(--text-color-dark)
}
._fuzzy-lookup-result_1gk1t_24._light_1gk1t_12._selected_1gk1t_64{
    background-color:#babfc2
}
._fuzzy-lookup-result_1gk1t_24._dark_1gk1t_17._selected_1gk1t_64{
    background-color:#000
}
._config_1y3fs_1{
    color:#000
}
._upload-container_1y3fs_5{
    display:flex;
    flex-direction:column;
    gap:0px
}
._upload-container_1y3fs_5 h3{
    margin-bottom:0
}
._upload-container_1y3fs_5 input[type=file]{
    margin-top:0
}
._align-middle_1y3fs_19{
    display:inline-block;
    vertical-align:middle
}
:root{
    font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;
    line-height:1.5;
    font-weight:400;
    color-scheme:light dark;
    color:#ffffffde;
    background-color:#ffffffde;
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-text-size-adjust:100%
}
a{
    font-weight:500;
    color:#646cff;
    text-decoration:inherit
}
a:hover{
    color:#535bf2
}
body.light{
    margin:0;
 
    min-width:320px;
    min-height:100vh;
    background-color:#dfdfdf
}
body.dark{
    margin:0;
  
    min-width:320px;
    min-height:100vh;
 
}
h1{
    font-size:3.2em;
    line-height:1.1
}
button{
    border-radius:8px;
    border:4px solid transparent;
    padding:.2em 0.8em;
    font-size:0.8em;
    font-weight:500;
    font-family:inherit;
    background-color:#1a1a1a6a;
    cursor:pointer;
    transition:border-color .25s
}
button:hover{
    border-color:var(--text-color-dark2)
}
button:focus,button:focus-visible{
    outline:4px auto -webkit-focus-ring-color
}
@media (prefers-color-scheme: light){
    :root{
        color:#21354769;
        background-color:#1e0d0d
    }
    a:hover{
        color:#747bff
    }
    button{
        background-color:#f9f9f9
    }
}