body{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    min-width:100vh;
    
}
.background{
    width: 500px;
    height: 600px;
    max-width:90vh;
    max-height:90vh;
    background-color: darkgray;
    
    border-radius:15px;
    padding:15px;
    border: 3px solid black;
    display:flex;
    flex-direction: column;
}
.display{
    height: 20%;
    background-color: lightblue;
    display:flex;
    justify-content: right;
    align-items: center;
    border-radius: 10px;
    border: 2px solid black;
    padding: 0px 15px;
    margin-bottom: 4px;
}

.text{
    color: #f1356d;
    font-size: 55px;
    font-weight: bold;
}

.bottom{
    display:flex;
    height:80%;
    flex-flow:wrap;
    padding:10px 0;
    gap:13px;
}
button {
    border-radius:5px;
    border: 2px solid black;
    width:23%;
    height:18%;
    font-size:30px;
}
.zero{
    width:243px;
}
button.multiply, .divide, .minus, .plus, .equals{
    background-color: #f6b876;
}
.multiply:hover, .divide:hover, .minus:hover, .plus:hover, .equals:hover{
    background-color: #bc8d5a;
}
.clear, .delete, .mod {
    background-color: lightyellow;
}
.clear:hover, .delete:hover, .mod:hover{
    background-color: rgb(207, 207, 180);

}

button:hover{
    background-color:lightgray;
}