:root {
    --cosmic-latte: #FFF8E7;
    --teal-blue: #264653;
    --retro-coral: #E76F51;
    --golden-sand: #E9C46A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.contenedor {
    font-family: sans-serif;
    color: var(--teal-blue);
}

/* PAGINA DE INICIO */

.inicio {
    background-color: var(--cosmic-latte);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 4rem;
}

.titular {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 4rem;
}

.gr-nombre {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.3rem;
    margin: 2rem;
    gap: 1rem;
}

#in_user {
    padding: .2rem .5rem;
    font-size: 1.2rem;
    width: 80%;
    text-align: center;
    border-radius: .2rem;
    border: 1px solid;
}

#aviso {
    margin-bottom: 1rem;
    margin-top: -1rem;
    color: var(--golden-sand);
    font-size: 1.1rem;
}

#btn_inicio {
    font-size: 1.2rem;
    padding: .2rem .5rem;
    background-color: var(--retro-coral);
    border: 1px solid var(--teal-blue);
    border-radius: .5rem;
}

/* PAGINA INTRODUCE FRASE */
.inicio-frase {
    background-color: var(--cosmic-latte);
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 4rem;
}

.gr-frase {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gr-frase label {
    font-size: 3rem;
}

#in_frase {
    width: 400px;
    margin: 2rem;
    font-size: 1.5rem;
    padding: .5rem 1rem;
    text-align: center;
    border-radius: .2rem;
    border: 1px solid;
}

#aviso2 {
    margin-bottom: 1rem;
    margin-top: -1rem;
    color: var(--golden-sand);
    font-size: 1.1rem;

}

#btn_ocultar {
    font-size: 1.2rem;
    padding: .2rem .5rem;
    background-color: var(--retro-coral);
    border: 1px solid var(--teal-blue);
    border-radius: .5rem;
}

/* PAGINA PRINCIPAL */

.principal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--cosmic-latte);
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
}

.dibujo-ahorcado {
    width: 15%;
    margin: 2rem 0 2rem 12rem;
}

.dibujo {
    margin: 2rem auto;
    width: 90%;
    height: auto;
}

.main-ahorcado {
    width: 68%;
    margin: 2rem 4rem 0 0;
}

#casillero {
    padding: 1rem;
    border: 1px solid;
    margin: 2rem auto;
    min-height: 50px;
    text-align: center;
    width: fit-content;
    min-width: 800px;
}

.caracter {
    margin: .2rem;
    font-size: 2rem;
}

.espacio {
    margin: 1rem;
    font-size: 1rem;
}

.gr-letra {
    margin: 2rem auto;
    width: fit-content;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.gr-letra label {
    font-size: 1.5rem;
}

#in_letra {
    margin: 1rem;
    font-size: 1.5rem;
    text-align: center;
    border-radius: .2rem;
    border: 1px solid;
}

#aviso3 {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;

}

.gr-marcador {
    border: 1px solid;
    width: 600px;
    margin: auto;
    padding: 1rem;
    border-radius: .5rem;
}

.gr-marcador>p {
    margin: .5rem;
}

/* PAGINA FINAL */

.final {
    width: 100%;
    height: 100%;
    background-color: var(--cosmic-latte);
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 4rem;
    position: absolute;
    top: 0;
    left: 0;
}

#msj_final {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
}

.gr-continuar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
}

.pregunta {
    font-size: 1.5rem;
    text-align: center;
    margin: 2rem;
}

.botonera {
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 100%;
    justify-content: center;
    gap: 2rem;
}

.botonera button {
    width: 25%;
    font-size: 1.2rem;
    padding: .2rem .5rem;
    background-color: var(--retro-coral);
    border: 1px solid var(--teal-blue);
    border-radius: .5rem;
}

/* LEADERBOARD */

.leaderboard {
    width: 100%;
    height: 100%;
    background-color: var(--cosmic-latte);
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    padding: 4rem;
    position: absolute;
    top: 0;
    left: 0;
}

.leaderboard h2 {
    font-size: 2rem;
    margin: 2rem 0 4rem;
}

.tabla_clasif {
    border-collapse: collapse;
}

.tabla_clasif th {
    padding: 1rem 2rem;
    text-align: center;
    font-size: 1.5rem;
}

.tabla_clasif td {
    padding: .8rem;
    text-align: center;
    font-size: 1.3rem;
}

.tabla_clasif tr {
    border-bottom: 2px solid;
}

#lista_tabla tr:last-child {
    border-bottom: none;
}

#btn_nuevo2 {
    margin: 4rem;
    font-size: 1.2rem;
    padding: .2rem .5rem;
    background-color: var(--retro-coral);
    border: 1px solid var(--teal-blue);
    border-radius: .5rem;
}