body{
    font-family: 'Times New Roman', Times, serif;
}
.container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculator-container{
    border: 1px solid black;
    border-radius: 8px;
    background-color: antiquewhite;
    margin: 16px;
    padding-left: 16px;
    padding-top: 24px;
    height: 320px;
    width: 176px;


}

#div-container{
    display: flex;
    flex-wrap: wrap;
   
}

.buttons,.oper-buttons{
    border: 1px solid  blue;
    background-color: rgb(62, 135, 245);
    color: rgb(34, 1, 42);
    width: 43.3px;
    height: 42.4px;
    padding: 0;
    border-radius: 8%;
    box-sizing: border-box;
    margin: 4px;
}

#screen-button:focus{
        color: rgb(218, 43, 16);
}
#equalbutton:hover{
    background-color: aliceblue;
    color: black;
}
.buttons:hover{
    background-color: aliceblue;
}
.oper-buttons:hover{
    background-color: aliceblue;
}
#clear-button:hover{
    background-color: aliceblue;
    color: black;
}
.oper-buttons{
     border: 1px solid  rgba(7, 35, 118, 0.789);
    background-color: rgba(7, 47, 167, 0.568);
 ;
}
#equalbutton{
    border: 1px solid  rgba(68, 96, 160, 0.727);
    background-color: rgb(3, 29, 124);
    color: rgb(222, 209, 226);
    width: 43.3px;
    height: 42.4px;
    padding: 0;
    border-radius: 8%;
    box-sizing: border-box;
    margin: 4px;
}
#screen-button{
    border: 1px solid  blue;
    background-color: antiquewhite;
    width: 96px;
    height: 42.4px;
    border-radius: 8%;
    box-sizing: border-box;
    margin: 4px;
}
#clear-button{
    border: 1px solid  blue;
    background-color: rgb(3, 29, 124);
    color: rgb(222, 209, 226);
    width: 42px;
    height: 42.4px;
    padding: 0;
    border-radius: 8%;
    box-sizing: border-box;
    margin: 8px;

}