body{
    overflow: hidden;
    background: linear-gradient(#f4f4ed, white);
}

.container{
    border: 1px solid black;

    width: 95%;
    height: 100vh;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.calculator{
    width: 370px;
    margin: auto;
    background: #f2f2f2;
    padding: 15px 15px 20px 20px;
    box-shadow: 0px 2px 4px 0px ; 
}

#userInput{
    box-sizing: border-box;
    width: 100%;
    padding: 40px 5px;
    background: whitesmoke;
    text-align: right;
    direction: ltr;
    outline: none;
    border: none;
}
.btn{
    width: 24%;
    height: 45px;
    border-radius: 3px;
    border: none;
    outline: none;
    margin-top: 3px;
    background: whitesmoke;
}

.btnEqual{
    width: 99.2%;
    height: 45px;
    border-radius: 3px;
    border: none;
    outline: none;
    margin-top: 3px;
    background: whitesmoke;   
}

.btn:hover, .btnEqual:hover{
    background-color: rgba(128, 128, 128, 128);
}

@media (max-width:480px){
    .btn{
        width: 23.4%;
    }
}

@media (max-width : 320px){
    .btn {
        width: 23%;
    }
}