/* darkxception: in-game css. */
#typebox {
    display: none;
    font-size: 250%;
    top: 2%;
    left: 2%;
}

#exercise {
    display: none;
    font-size: 250%;
    top: 2%;
    left: 70%
}

#answers {
    display: none;
    font-size: 100%;
    top: 53%;
    left: 0;
}

#erase {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 300%;
    top: 15%;
    left: 0%;
}

#send {
    display: none;
    color: rgb(0, 255, 0);
    border: 2px solid rgb(127, 127, 0);
    font-size: 150%;
    width: 10%;
    height: 10%;
    top: 75%;
    left: 10%;
}

#leave {
    display: none;
    color: rgb(255, 0, 0);
    border: 2px solid rgb(127, 127, 0);
    font-size: 150%;
    width: 10%;
    height: 10%;
    top: 75%;
    left: 30%;
}

#key1 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 12%;
    left: 10%;
}

#key2 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 12%;
    left: 20%;
}

#key3 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 12%;
    left: 30%;
}

#key4 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 22%;
    left: 10%;
}

#key5 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 22%;
    left: 20%;
}

#key6 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 22%;
    left: 30%;
}

#key7 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 32%;
    left: 10%;
}

#key8 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 32%;
    left: 20%;
}

#key9 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 10%;
    height: 10%;
    top: 32%;
    left: 30%;
}

#key0 {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 30%;
    height: 10%;
    top: 42%;
    left: 10%;
}

#dot {
    display: none;
    color: rgb(127, 127, 127);
    font-size: 150%;
    border: 2px solid rgb(127, 127, 0);
    width: 12%;
    height: 12%;
    top: 25%;
    left: 40%;
}

@media only screen and (min-width: 768px) {
    #answers {
        font-size: 180%;
    }

    #send, #leave, #key1, #key2,
    #key3, #key4, #key5, #key6,
    #key7, #key8, #key9, #key0,
    #dot {
        font-size: 200%;
    }
}

@media only screen and (min-width: 1400px) {
    #answers {
        font-size: 230%;
    }

    #send, #leave, #key1, #key2,
    #key3, #key4, #key5, #key6,
    #key7, #key8, #key9, #key0,
    #dot {
        font-size: 275%;
    }
}