*{
    box-sizing:border-box;
    font-family:'Open Sans', sans-serif;
}
body{
    min-width:880px;
}
.text{
    height:30%
}

#ruler{
    width:880px;
    height:166px;
    position:relative;
    margin:10px auto;
}
#question{
    text-align: center;
    margin-bottom:10%;
    margin-top:10%;
    font-size: 2em;
}
#canvas {
    background-image:url("../img/sprite.png");
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:100%;
    height:100%;
    width:100%;
}
input {
    outline: none;
    text-align: center;
    border: 1px solid grey;
    border-radius: 5px; 
}
#num1, #num2 {
    width: 1.5em; 
    height: 2em;
    position: absolute; 
    top: 0; 
    left: 0;
    text-align: center;
}
#sum {
  width: 1em;
  border-radius: 5px;
}

#sumtotal {
  width: 2em;
  border-radius: 5px;
}

#next {
    display: block;
    margin: 50px auto;
    padding: 5px 10px;
    /*border: 1px solid grey;*/
    /*border-radius: 5px;*/
}