/* Create the Outer layout of the Calculator. */  
.formstyle  
{  
width: 280px;  
height: 350px;  
margin: 20px auto;  
border: 5px solid gainsboro; 
border-bottom: 5px solid black;
border-radius: 10px;  
padding: 20px;  
text-align: center;  
background-color: lightgrey;  
}  
  
/* Display top horizontal bar that contain some information. */  
h1 {  
    text-align: center;  
    padding: 23px;  
    background-color: blue;  
    color: white;  
    }  
input:hover  
{
border: 0px;    
background-color: darkgray;  
}  
      
*{  
margin: 0;  
padding: 0;  
}  
  
/* It is used to create the layout for calculator button. */  
.btn:hover{
    background-color: darkgray;
}
.btn{  
width: 50px;  
height: 50px;  
font-size: 25px;  
margin: 3px;  
cursor: pointer;
border: 0px;  
background-color: lightgrey;  
  
}  
  
/* It is used to display the numbers, operations and results. */  
.textview{  
width: 230px;
height: 50px;  
margin: 5px;  
font-size: 25px;  
padding: 5px;
border: 0px;
background-color: darkgray;  
}