estilos.css

body{
    margin: 0;
    background-size: cover;
    font-family: 'Carter One', Arial, Helvetica, sans-serif;
    min-height: 100vh;
}
header{
    background: #247fbb;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
}

h1{
    margin: 0;
    color: #ffffff;
}

main{
    width: 80%;
    margin: auto;
    padding: 20px;
    background: rgba(255,255,255,.7);
    display: grid;
    grid-template-columns: auto auto;
    gap: 30px;
}

#imagen{
    width: 200px;
}

#palabra_a_adivinar{
    height: 3em;
}

#palabra_a_adivinar span{
    vertical-align: bottom;
    font-size: 2em;
    border-bottom: 2px solid black;
    width: 30px;
    text-align: center;
    margin-right: 6px;
    display: inline-block; /* sin esto, por ser un elemento de línea, no tomaría el width */
}

#letras{
    margin-top: 30px;
    display: grid;
    grid-template-columns: 75px 75px 75px 75px 75px;
    gap: 2px;
}

#letras button{
        /* display: none; */
        padding: .5rem 1rem;
        background: #247fbb;
        border: none;
        border-radius: 4px;
        box-shadow: 10px 5px 30px rgba(0,0,0,.1);
        color: #fff;
        font-size: .8rem;
        font-weight: 700;
        margin: 0 0 0 1rem;
        transform: scale(1);
        transition: transform .5s ease-in-out;
        cursor: pointer;
    }
    button:active {
        transform: scale(.8);
        transition: transform .7s ease-in-out;
    }
#jugar{
    width: 350px;
    padding: .5rem 1rem;
    background: #247fbb;
    border: none;
    border-radius: 20px;
    box-shadow: 10px 5px 30px rgba(0,0,0,.1);
    color: #000;
    font-size: .8rem;
    font-weight: 700;
    margin: 0 0 0 1rem;
    transform: scale(1);
    transition: transform .5s ease-in-out;
    cursor: pointer;
}
button:active {
    transform: scale(.8);
    transition: transform .7s ease-in-out;
}