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

@media (min-width: 768px) {
    #user_input, #display {
        height: 340px;
    }
    .options {
        height: 340px;
    }
    .cipher {
        color: white;
        font-size: 33px;
        text-align: center;
        margin: 1vh 0 0 0;
    }
    .form-control {
        font-size: 24px;
    }
    .my-row-upper {
        height: 15vh;
    }
}

@media (min-width: 1200px) {
    #user_input, #display {
        height: 390px;
    }
    .options {
        height: 390px;
    }
    .cipher {
        color:white;
        font-size: 40px;
        text-align: center;
        margin: 0.8vh 0 0 0;
    }
    .form-control {
        font-size: 20px;
    }
}
@media (min-width: 1600px) {
    .my-row-upper {
        height: 20vh;
    }
}
@media (min-width: 1724px) {
    #user_input, #display {
        height: 360px;
    }
    .options {
        height: 360px;
    }
    .cipher {
        color:white;
        font-size: 40px;
        text-align: center;
        margin: 1vh 0 1vh 0;
    }
    .form-control {
        font-size: 24px;
    }
}