body{
    padding:1em !important;
}
#main{
    max-width:98%;
    left:inherit;
}
#question{
    text-align:center;
}
#translation, #explanation, #example{
    font-size:3em;
    text-align:center;
    display:block;
    line-height: 3em;
}
#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;
}
.correctAnswer{
    background-color:#49E20E !important;
}
.space{
    padding:1em;
}
.underline{
    text-decoration:underline;
}
h2{
    padding-left:1em;
    font-weight:700;
}
.box{
    border:2px solid black;
    padding: 2px;
    margin: 2px;
}
/* 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;
    }
}
/* 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;
    }
    #translation, #explanation, #example{
        font-size: 3em;
        text-align: center;
        display: block;
        margin: 0;
        max-width: 100%;
    }
    #playButton{
        top:8em;
    }
}
@media only screen and (min-width : 1000px) {
    #possibleAnswers {
        font-size: 2.5em;
    }
}