style.css

#calculator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    margin: 50px auto;
    padding: 20px; 
    background-color: #F9C5D5;
    border: solid #F2789F;
    border-radius: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}



#display-outer {
    border-radius: 10px;
    border: inset 2px #F2789FA1;
    height: 140px;
    width: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffd1df;
}


#display-inner {
    background-color: #FFDEE8;
    border: inset #F2789F42;
    padding: 10px;
    height: 100px;
    width: 440px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    color: #3f0316; 
}


#display-top {
    margin: 0px 5px;
    font-size: 25px;
    line-height: 25px;
    height: 30px;
    
}

#display-bottom {
    margin: 0px;
    font-size: 45px;
    line-height: 45px;
    height: 45px;
}


.button-row {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 90px;
    background-color: #F9C5D5;
    padding: 0 10px;
    
    
}

#first-row {
    padding-top: 10px;
}

.button-row button {
    flex: 1 1 25%;
    background-color: #F999B7;
    margin: 5px;
    border-radius: 20px;
    border: 2px solid #F2789F;
    font-size: 30px;
    color: #3f0316d7;
    font-weight: 900;
}

.button-row button:hover {
    background-color: #f383a7db;
}


.button-row button.operator, #equals {
    background-color: #F2789F;
    border: 2px solid #EE5788;
}

.button-row button.operator:hover, #equals:hover {
    background-color: #f36692;
}