main.css

/*remove default browser margin settings*/
body{
    background-color: rgb(35, 44, 35);
    margin: 0;
}
/*Container for the whole calculator layout*/
#container{
    background-color: rgb(106, 160, 160);
    height: 450px;
    width: 300px;
    box-shadow: 2px 2px 8px rgb(36, 23, 23),
                -2px -2px 8px rgb(36, 23, 23);
    border-radius: 24px;
    position: relative;
   top: 10px;
   /* left: 40%;*/
}

/*The screen which will show the inputs the user as given as well as the
*of the calculation */
.screen{
    background-color: #FFFF99;
    width: 270px;
    height: 60px;
    border-radius: 8px;
    position: relative;
    top: 26PX;
    /*left: 15px;*/
}


.screen input{
    position: relative;
    height: 56px;
    width: 266px;
    color: black;
    background-color: #e5dfa0;
    font-size: 25px;
    text-align: right;
    border-radius: 8px;
    border: solid rgb(133, 133, 133) 2px;

}
.btns{
    position: relative;
    top: 30px;
    /*left: 3px;*/
}
.button{
    width: 44px;
    height: 30px;
    border: none;
    border-radius: 7px;
    margin-left: 10px;
    cursor: pointer;
}
.button.black{
    color: #fff;
    background-color: black;
    border-bottom: 2px solid #647489;
    border-top: 2px solid black;

}
.button.silver{
    color: #fff;
    background-color: #515c6b;
    border-bottom: 2px solid black;
}
.button.red{
    color: #FFF;
    background-color: rgb(236, 34, 8);
    border-bottom: 2px solid black;
}