.main{

    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    margin-top: 100px;







}
.buttons{
    background-color: gray;
    color: white;
    font: bold;
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 15px;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;

}
.buttons:hover{
    cursor: pointer;
    background-color: white;
    color: black;
    box-shadow: 5px 5px 5px gray;

}
.buttoncontainer{

    gap: 15px;
    background-color: black;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 250px;
    border: none;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 10px;








}
#display{

    display: flex;
    background-color: rgb(163, 163, 163);
    width: 265px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 50px;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    padding: 2px;
    
}
.equals{
    
    background-color: rgb(0, 255, 21);
    color: white;
    font: bold;
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 15px;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;





}
.equals:hover{
    cursor: pointer;
    background-color: white;
    color: black;
    box-shadow: 5px 5px 5px gray;


}