/* Small Mobile Phones */
@media (max-width:320px) {
    .outerBox{
        width: 90%;
        height: 80vh;
    }

    .myInput{
        margin-top: 20vh;
    }

    .submitButton{
        margin-top: 4vh;
    }

    .displayQuestion{
        margin-top: 4vh;
    }

    .playAgain{
        width: 30vw;
        height: 5vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .response{
        font-size: 0.9rem;
    }
}

/* Normal Mobile Phones! */
@media (min-width:321px) and (max-width:600px) {
    .outerBox{
        height: 65vh;
        width: 90%;
    }

    .playAgain{
        width: 25vw;
        height: 4vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .myInput{
        width: 60vw;
    }

}

/* Small Tablet */
@media (min-width:601px) and (max-width:768px) {
    .outerBox{
        width:85%;
        height: 60vh;

    }

    p{
        font-size: 1.1rem;
    }

    .myInput{
        width: 40vw;
        font-size: 1.1rem;
    }

    .submitButton, .roundNumber, .score, .playAgain, .response{
        font-size: 1.1rem;
    }

    .playAgain{
        width: 15vw;
        height: 4vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}

/* Norma Tablets */
@media (min-width:769px) and (max-width:1024px) {
    .outerBox{
        width: 80%;
        height: 70vh;
    }

    .myInput{
        width: 40vw;
    }

    p{
        font-size: 1.2rem;
    }

    .roundNumber, .response, .score, .playAgain, .submitButton, .myInput{
        font-size: 1.2rem;
    }

    .playAgain{
        width: 15vw;
        height: 3vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Extra large laptop */
@media (min-width:1025px) and (max-width:1440px) {
    .outerBox{
        width: 40%;
        height: 65vh;
    }

    .myInput{
        width: 25vw;
    }

    .playAgain{
        width: 8vw;
        height: 3vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}