body{
    padding:1em !important;
}
#main{
    max-width:98%;
    left:inherit;
}
#kana{
    text-align:center;
}
#incorrectChoiceBox{
    font-size:3em;
    text-align:center;
    color:red;
}
#answerBox{
    font-size:3em;
    text-align:center;
    color:green;
}
#popupDialog{
    text-align:center;
}
#progress {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f6f6f6;
    font-weight: 700;
    text-align: center;
    padding: 0 1em;
    border-left: 20px solid #f3f3f3;
    border-bottom: 20px solid #f3f3f3;
    border-top: 20px solid #f3f3f3;
    border-style: groove;
}
/* for mobile devices in portrait */
@media (min-device-width : 100px) {
    .ui-btn {
        font-size: 2em;
    }
    #kana {
        font-size: 13em;
    }
    #progress{
        font-size:3em;
    }
}
/* for landscape and regular devices */
@media (min-width : 650px){
    .ui-btn {
        font-size: 1em;
    }
    #kana {
        font-size: 10em;
    }
    #progress{
        font-size:1em;
    }
    #possibleAnswers{
        text-align:justify;
        font-size:1.5em;
    }
    #possibleAnswers::after {
        content:'';
        width:100%;
        display:inline-block;
    }
}
/* iOS landscape special */
@media (orientation:landscape) {
    .ui-btn {
        font-size: 1em;
    }
    #kana {
        font-size: 10em;
    }
    #progress{
        font-size:1em;
    }
    #possibleAnswers{
        text-align:justify;
        font-size:1.5em;
    }
    #possibleAnswers::after {
        content:'';
        width:100%;
        display:inline-block;
    }
}
@media (orientation:portrait) {
    .ui-btn{
        font-size:2em;
    }
}
@media only screen and (min-width : 1000px) {
    #possibleAnswers {
        font-size: 2.5em;
    }
}