style.css

#bodyid {
    background-color: moccasin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gen{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 10px solid #232323;
    background-image:url("images/circuit.jpg");
    background-size: contain;
    border-radius: 5%;
    width: 500px;
    height: 500px;
}


.screen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    background-color: antiquewhite;
    padding: 1%;
    border: 5px solid #232323;
    width: 85%;
    height: 20%;
}
    .previous{
        font: 28px Arial, sans-serif;
        background-color: rgb(250, 209, 154);
        display: block;
    }
    .current {
        font: 42px Arial, sans-serif;

    }

.keys {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5%;
    
    padding-left: 2%;
    padding-right: 2%;
    border-radius: 5%;
    font: bold 24px Arial, sans-serif;
    height: 70%;
    width: 90%;
}

.key {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10%;
    border: 1px solid #232323;
    background-color: sandybrown;

    width: 22%;
    height: 14%;
    
}

.equal, .zero {height: 30%;
    background-color: khaki;
    color: black;

}

.operator, .func{border: 1px solid green;
    background-color: rosybrown;

}
.key:hover {
    background-color: whitesmoke;
    font-size: xx-large;
}