body{
    padding:1em !important;
}
#main{
    max-width:98%;
    left:inherit;
}
#question{
    text-align:center;
}
#incorrectChoiceBox{
    font-size:3em;
    text-align:center;
    color:red;
    display:block;
}
#answerBox{
    font-size:3em;
    text-align:center;
    color:green;
    display:block;
}
#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;
}
#playButton {
    position: absolute;
    top: 7em;
    right: 1em;
}
/* for mobile devices in portrait */
@media (min-device-width : 100px) {
    .ui-btn {
        font-size: 2em;
    }
    #question {
        font-size: 13em;
    }
    #progress{
        font-size:3em;
        bottom:0;
        top:auto;
    }
    #playButton img{
        width:3em;
        height:3em;
    }
}
/* for landscape and regular devices */
@media (min-width : 650px){
    .ui-btn {
        font-size: 1em;
    }
    #question {
        font-size: 10em;
    }
    #progress{
        font-size:1em;
    }
    #possibleAnswers{
        text-align:justify;
        font-size:1.5em;
    }
    #possibleAnswers::after {
        content:'';
        width:100%;
        display:inline-block;
    }
    #answerBox {
        display:inline-block;
        margin: 0 25%;
        max-width:20%;
    }
    #incorrectChoiceBox {
        display:inline-block;
        max-width:20%;
    }
}
/* iOS landscape special 
@media (orientation:landscape) {
    .ui-btn {
        font-size: 1em;
    }
    #question {
        font-size: 10em;
    }
    #progress{
        font-size:1em;
    }
    #possibleAnswers{
        text-align:justify;
        font-size:1.5em;
    }
    #possibleAnswers::after {
        content:'';
        width:100%;
        display:inline-block;
    }
    #answerBox {
        display:inline-block;
        margin: 0 25%;
        max-width:20%;
    }
    #incorrectChoiceBox {
        display:inline-block;
        max-width:20%;
    }
}*/
@media (orientation:portrait) {
    .ui-btn{
        font-size:2em;
    }
    #question {
        font-size: 10em;
    }
    #progress{
        font-size:2em;
    }
    #incorrectChoiceBox {
        font-size: 3em;
        text-align: center;
        color: red;
        display: block;
        margin: 0;
        max-width: 100%;
    }
    #answerBox{
        font-size:3em;
        text-align:center;
        color:green;
        display:block;
        margin:0;
        max-width:100%;
    }
    #playButton{
        top:8em;
    }
}
@media only screen and (min-width : 1000px) {
    #possibleAnswers {
        font-size: 2.5em;
    }
}