/* this is the result display styling */
.display
{
   width:100%;
   height:130px;
   padding:40px,0;
   background:#ff0509;
    border-top-left-radius:14px;
   border-top-right-radius:14px;

}
   /* this is the button style */
.button
{
 padding-right: 20PX ;
 margin:-13PX;

}
 /* this is the input button style */
input[type="button"]
{
 width:60px;
 height:60px;
 float: left;
 padding:0;
 margin:5px;
 box-sizing: border-box;
 background:#ecedef;
 color:#5e5858;
 border:none;
 font-size:  30px;
 line-height: 30px;
 border-radius:50%;
 font-weight: 700;
 cursor:pointer;
 
}
  /* this is the whole container style */
.container
{
 position:fixed;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 background-color:white;
 border-radius:14px;
 box-shadow: 0 4px 8px o rgba(0, 0, 0, 0.2),o 6px 20px 0 rgba(0, 0, 0, 0.2);
 padding-bottom: 20px;
 width:320px;
}
body,html
{
 color:#ecedec;
 margin:0;
 padding:0;
}
   /* this is the display input style */
input[type="textfield"]
{
 width:270px;
 height:60px;
 float:left;
 color: gold;
 padding: 0;
 box-sizing: border-box;
 border:none;
 text-align:right;
 font-size:60px;
 line-height:60px;
 font-weight:700px;
 margin:50PX 25px;
 background:none;
}
    /* this is the reset input style */
input[type="reset"]
{
  border-radius: 12px;
  font: thick 5px;
  background-color: rgb(15, 255, 107);
  border: none;
  color: #ffffff;
  padding: 10px;
  text-align: end;
   margin-top: 20px;
  margin-left: 10px;
  color: #5e5858;
}
  /* this is the styling for each row */
.row
{
width: 280px;
float: left;
 margin-left: 35px;
} 
    /* this is the = styling */
.red{
  background-color: #ff0509 !important;
   color: #ffffff  !important;
}