* {
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
    -ms-touch-action: none;
}
div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2eef1;
    border: 2px solid green;
}
#fondo {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#fondo img {
    width: 100vw;
    height: 100vh;
}
#titulo {
    position: fixed;
    top: 0;
    bottom: 90%;
    left: 0;
    right: 0;
    font-size: 2.5vmin;
    background-color: black;
    color: white;
}
#resultado {
    position: fixed;
    top: 10%;
    bottom: 80%;
    left: 0;
    right: 0;
    font-size: 2.5vmin;
}
#resistencia {
    position: fixed;
    top: 20%;
    bottom: 70%;
    left: 0;
    right: 50%;
}
#nota {
    position: fixed;
    top: 20%;
    bottom: 70%;
    left: 50%;
    right: 0;
    font-size: 5vmin;
    color: blue;
    background-color: wheat;
}
#teclado {
    visibility: hidden;
    opacity: 1;
    position: fixed;
    top: 30%;
    bottom: 10%;
    left: 0;
    right: 0;
}
#tecla1, #tecla2, #tecla3, #tecla4, #tecla5, #tecla6, #tecla7, #tecla8, #tecla9, #tecla0, #teclap {
    font-size: 10vmin;
    text-align: center;
    background-color: white;
}
#teclao, #teclak, #teclam, #teclab, #teclat {
    font-size: 6vmin;
    text-align: center;
    background-color: #f3efb1;
}
#teclab, #teclat {
    background-color: lightyellow;
}
/*Horirontal*/
#tecla7, #tecla8, #tecla9, #teclao {
    position: fixed;
    top: 30%;
    bottom: 55%;
}
#tecla4, #tecla5, #tecla6, #teclak {
    position: fixed;
    top: 45%;
    bottom: 40%;
}
#tecla1, #tecla2, #tecla3, #teclam {
    position: fixed;
    top: 60%;
    bottom: 25%;
}
#tecla0, #teclap, #teclab, #teclat {
    position: fixed;
    top: 75%;
    bottom: 10%;
}
/*Vertical*/
#tecla7, #tecla4, #tecla1, #tecla0 {
    left: 0;
    right: 75%;
}
#tecla8, #tecla5, #tecla2, #teclap {
    left: 25%;
    right: 50%;
}
#tecla9, #tecla6, #tecla3, #teclab {
    left: 50%;
    right: 25%;
}
#teclao, #teclak, #teclam, #teclat {
    left: 75%;
    right: 0;
}
#ayuda {
    position: fixed;
    top: 45%;
    bottom: 10%;
    left: 0;
    right: 0;
    font-size: 3vmin;
    text-align: center;
    background-color: lightgray;
    padding: 25px;
}
#iniciar {
    /*visibility: hidden;*/
    position: fixed;
    top: 30%;
    bottom: 55%;
    left: 0;
    right: 0;
    font-size: 3vmin;
}
#iniciar h1 {
    background-color: black;
    color: white;
    padding: 1vh 1vw;
    box-shadow: 0 0 0 0.5vmin green;
    cursor: pointer;
}
#iniciar h1:hover {
    background-color: #333333;
    padding: 1vh 1vw;
    box-shadow: 0 0 0 0.8vmin green;
}
#tiempo {
    position: fixed;
    top: 90%;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 3vmin;
}