/*
.col-sm-12 {
    border: 1px solid blue;
}
*/
@media (min-width: 0px) {
    #user_input, #display {
        height: 260px;
    }
    .options {
        height: 475px;
        margin-bottom: 15px;
    }
    .radio {
        font-size: 30px;
        margin: 10px 20px 10px 0;
    }
    .cipher {
        color:white;
        font-size: 35px;
        text-align: center;
        margin: 0.6vh 0 0 0;
    }
    .form-control {
        font-size: 30px;
    }
    .my-row-upper {
        height: 3vh;
    }
}

@media (min-width: 768px) {
    #user_input, #display {
        height: 460px;
    }
    .options {
        height: 460px;
    }
    .radio {
        font-size: 26px;
    }
    .cipher {
        color:white;
        font-size: 34px;
        text-align: center;
        margin: 0.6vh 0 0 0;
    }
    .form-control {
        font-size: 18px;
    }
    .my-row-upper {
        height: 10vh;
    }
}

@media (min-width: 848px) {
    #user_input, #display {
        height: 410px;
    }
    .options {
        height: 410px;
    }
    .radio {
        font-size: 26px;
    }
    .cipher {
        color:white;
        font-size: 34px;
        text-align: center;
        margin: 0.6vh 0 0 0;
    }
    .form-control {
        font-size: 20px;
    }
}

@media (min-width: 1200px) {
    #user_input, #display {
        height: 455px;
    }
    .options {
        height: 455px;
    }
    .radio {
        font-size: 26px;
    }
    .cipher {
        color:white;
        font-size: 34px;
        text-align: center;
        margin: 0.6vh 0 0 0;
    }
    .form-control {
        font-size: 18px;
    }
}
@media (min-width: 1600px) {
    .my-row-upper {
        height: 20vh;
    }
}
@media (min-width: 1696px) {
    #user_input, #display {
        height: 420px;
    }
    .options {
        height: 420px;
    }
    .radio {
        font-size: 28px;
    }
    .cipher {
        color:white;
        font-size: 34px;
        text-align: center;
        margin: 0.6vh 0 0 0;
    }
    .form-control {
        font-size: 20px;
    }
}