style.css

body{
    display:flex;
    justify-content: center;
    align-items:center;
    font-family: monospace,'Courier New', Courier;
    height: 800px;
}

.body{
    background-color: #a8a3a3;
    width: 440px;
    min-height:640px;
    border-radius: 25px;
    border: solid black;
    padding: 20px 30px 20px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:15px;
}

.screen{
    flex:2 1 auto;
    background-color: #cfc6c6;
    min-width: 400px;
    min-height:150px;
    border: solid black;
    border-radius: 25px;
    text-align: right;
    padding-top:40px;
    padding-right:20px;
    box-sizing: border-box;
    font-size: 40px;
    word-wrap: break-word;
    word-break: break-all;
}

#ac, #ce{
    flex:auto;
    width: 170px;
    height: 60px;
    border: solid black;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
    font-size: larger;
    transition: all 500ms;
}

#ac{
    background-color: #e39494;
}

#ce{
    background-color: #8c9adb;
}

.number{
    width:80px;
    height:80px;
    flex:auto;
    background-color: #dbd5d5;
    font-size: 20px;
    transition: all 500ms;
}

.select{
    transform: scale(1.001);
    border: solid 2px;
}

.number.select{
    background-color: #bdb7b7;
}

#ac.select{
    background-color: #b57676;
}

#ce.select{
    background-color: #7783bd;
}