styles.css

body {
    text-align: center;
    background-color: rgb(71, 71, 71);
}

.btn {
    width: 110px;
    height: 70px;
    font-size: 15px;
    margin: 1%;
    border: 1px solid whitesmoke;
    cursor: pointer;
    color: whitesmoke;
}

.container {
    padding: 0;
    margin: 0;
    left: 30%;
    /* position: ; */
    /* position: relative; */
    
}



/* Text for the display menu */
.prevText {
    font-size: 20px;
    text-align: right;
    color: rgba(71, 71, 71, 0.63);
}

.displayText {
    font-size: 40px;
    text-align: right;
}

/* containers for different components of the calculator */
.calculator {
    position: relative;
    top: 80px;
    background-color: rgb(71, 71, 71);
    color: rgb(71, 71, 71);
    width: 700px;
    height: 750px;
    border-radius: 15px;
    border: 5px solid whitesmoke;
    
}

.previous {
    width: 650px;
    height: 60px;
    background-color: beige;
    color: rgb(71, 71, 71);
    position: relative;
    padding: 20px;
    border-radius: 15px 15px 0 0;
    left: 20px;
    top: 23px;
}

.display {
    width: 650px;
    height: 80px;
    position: relative;
    left: 20px;
    top: 15px;
    padding: 20px;
    background-color: beige;
    border-radius: 0 0 15px 15px;
}

.inputs {
    width: 650px;
    height: 510px;
    background-color: rgb(71, 71, 71);
    color: red;
    position: relative; 
    top: 50px;
    left: 20px;
    border-radius: 15px;
}

.custom-button:hover {
    background-color: rgb(88, 136, 91); 
    color: white;
}