html {
    width: 100%;
    height: 100%;
}

body {
    font-family: helvetica, arial, sans-serif;
    background-color: #2d2d2d;
    margin: 0;
    width: 100%;
    height: 100%;
}

@keyframes moveoff {
    from {
        transform: none;
    }
    to {
        transform: translate(0px, calc(100% - 20px));
    }
}

@-webkit-keyframes moveoff {
    from {
        -webkit-transform: none;
    }
    to {
        -webkit-transform: translateY(calc(100% - 20px));
    }
}

@keyframes moveon {
    from {
        transform: none;
    }
    to {
        top: 0px;
    }
}

/** QUESTION **/

#question {
    width: 100%;
    height: 100%;
    position: absolute;
}

.question-moveoff {
    animation-name: moveoff 2s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-name: moveoff;
    -webkit-animation-duration: 2s;
}

#button {
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
    border: 5px solid white;
    border-radius: 5px;
    width: 200px;
    height: 60px;
    position: relative;
    top: 150px;
}

#button:hover {
    border-color: #16789a;
    cursor: pointer;
}

#label {
    pointer-events: none;
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
    font-size: 32px;
    color: #FFF;
}

/** ANSWER **/

#answer {
    width: 100%;
    height: 100%;
}