/* Cambia el estilo del body quitando los margenes por defecto y agrega fuentes mas bonitas */
body {
    background-color: #121212;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

/*Cambia el tamanio del titulo y lo acomoda respecto a lo alto, dandole un verde neon mas llamativo*/
h1 {
    margin-top: 20px;
    font-size: 2.5em;
    color: #00ff99;
}

.container {
    display: grid;
    /*se usa el grid de CSS*/
    grid-template-columns: 1fr 2fr 1fr;
    /*se ponen las tres columnas*/
    /*se centran los componentes y se adapta al 90% de la pantalla, con un margen de centrado
              horizontal y separacion por arriba*/
    align-items: center;
    width: 90%;
    margin: 30px auto;
}

/*se configuran las columnas para estar centradas y estar bien dispuestas (junto a la que tiene
          la imagen y el boton por debado)*/
.column-1,
.column-3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.column-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*personaliza la disposicion de la carta junto con su borde verde neon*/
#carta {
    max-width: 100%;
    height: auto;
    border: 3px solid #00ff99;
    border-radius: 10px;
    margin-bottom: 15px;
}

button {
    padding: 20px;
    background-color: #1f1f1f;
    color: #00ff99;
    border: 2px solid #00ff99;
    border-radius: 8px;
    font-size: 24px;
    /*Cambia el cursor al pasar por encima*/
    cursor: pointer;
}

button:hover {
    background-color: #2a2a2a;
    /*con el transform hace que el boton se escale en 1.05 cuando le pasa el cursor por encima*/
    transform: scale(1.05);
}

.barajar-btn {
    font-size: 16px;
    padding: 10px 20px;
    margin-top: 10px;
}

a:hover img {
    transform: scale(1.05);
    border: 3px solid #00ff99;
    border-radius: 10px;
}
.bandera {
    width: 200px; /* puedes ajustar este valor según lo que te guste */
    height: 130px; /* altura fija para que todas se vean iguales */
    object-fit: cover; /* recorta un poco si es necesario, mantiene proporción sin deformar */
    border: 3px solid #00ff99;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.bandera:hover {
    transform: scale(1.05);
}
.barra-arriba {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    background-color: #1f1f1f;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Enlace con estilo de botón */
.link-arriba {
    background-color: #1f1f1f;
    color: #00ff99;
    text-decoration: none;
    border: 2px solid #00ff99;
    border-radius: 8px;
    font-size: 16px;
    padding: 10px 20px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.link-arriba:hover {
    background-color: #2a2a2a;
    transform: scale(1.05);
}

.izquierda {
    justify-self: flex-start;
}

.derecha {
    justify-self: flex-end;
}