style.css

body{
    /* width: 50px;
    height: 50px; */
    background: linear-gradient( 90deg, #F2505F 50%, #EBEBEB 50%);
    font-family: 'VT323', monospace;
}


.main-container{
    width: 400px;
    height:550px;
    background-color: white;
    box-shadow: 5px 5px 0px  #CF4452;
    box-shadow: -5px -5px 40px  #CF4452;
    border-style: none;
    border-radius: 20px;
    
}

#vertical-align{
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
}

#ans{
    width:350px;
    height:80px;
    margin-top: 100px;
    outline-style: solid;
    outline-width: 1px;
    outline-color:#F2505F ;
}

#number-container{
    width: 350px;
    height:300px;
    background-color: #fff;
    /* opacity: 0.3; */
}


#cmain{
    background-color: #F2505F;
    padding: 10px;
    font-size: 30px;
    color: white;
}

#sevenmain, #fourmain, #onemain, #dotmain{
    background-color: white;
    /* padding: 0px; */
    font-size: 30px;
    color: #F2505F;
}

#pink-del, #pink-times, #pink-plus, #pink-pluss{
    background-color:#F2505F;
    color: white;
}

.seven-h1, .c-h1, .pm-h1, .percent-h1, .divide-h1, .eight-h1,
.nine-h1, .del-h1, .four-h1, .five-h1, .six-h1, .times-h1,
.one-h1, .two-h1, .three-h1, .dot-h1, .zero-h1, .equal-h1, .pluss-h1{
    cursor: default;
}

.form-control{
font-size: 30px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media only screen and (max-width: 425px){
.main-container {
    width: 400px;
    height: auto;
}

#pink-times{
    padding-right: 30px;
}
#pink-pluss{
    padding-right: 30px;
}

#ans {
    width: 100%;
    margin-left: 35px;
}
}

@media only screen and (max-width: 375px){
#ans {

    margin-right: -30px;
}
#number-container{
    width: auto;
    height: auto;
    margin-bottom: 10px;
}
#cmain{
    margin-left: 10px;

}

}
@media only screen and (max-width: 320px){
    #ans{
        margin-left: 15px;
    }
    .col-sm-12{
        padding-right: 8px;
        padding-left: 8px;


    }
    #seven{
margin-right: 8px;
    }
   #cmain{
       margin-right: 16px;
   }
    
}