*{
    margin: 0;
    padding: 0;
    border: 0;
}
#contenedor{
    width: 100dvw;
    height: 100dvh;
    background-color: black;
    display:grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
}
header{
    width: clamp(100px,98%,800px);
    background-color: #009b7d;
    
}
nav{
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
}

#botones{
    display: none;
    position: absolute;
    background-color: transparent;
    padding:0 1em;
    font-size: 1em;
    color: white;
}
#tite{
    text-align: center;
    font-size: 1.5em;
    color: white;
}


button{
    margin: 4px;
    font-size: 1.8em;
    background-color: yellowgreen;
}
main{
    width: clamp(100px,98%,800px);
    background-color: #009b7d;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
#pregunta {
    font-size: 3em;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: auto;
    color: white;
}
#puntaje{
    font-size: 4em;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: auto;
}
#respuesta{
    font-size: 3em;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: auto;
}
#reaccion{
    font-size: 5em;
    display: flex;
    justify-content: center;
    text-align: center;
    margin: auto;
}
#teclado{
    grid-column: 1/3;
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.botoncito{
    font-size: 1em;
    background-color: yellowgreen;
}