*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #c7c4c4;
 }

 body {
    height: 100vh;
    width: 100vw;
    
  }

  :root {
     --shadow: -3px -3px 9px rgb(255, 255, 255),  3px 3px 9px #000;
     --shadow-inset: inset -3px -3px 8px #fff, inset 3px 3px 8px #000;
    }
    .calculator{
    
     display: grid;
     grid-template-rows: 20% 80%;
     width: 380px;
     height: 480px;
     margin: auto;
     position: relative;
     top: 10%;
     box-shadow: -3px -3px 5px rgb(214, 211, 211),  3px 3px 9px #000;
     border-radius: 30px;
     background-color:#e9e9e9;

 }
 

 .box{
     display: block;
     margin: auto ;
     margin-top: 30px;
     padding: 20px;
     width: 85%;
     height: 60px;
     text-align: end;
     box-shadow: var(--shadow-inset);
      border: none;
     border-radius: 30px;
     background-color: #d8d7d7;
     font-size: 18px;
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     
 }
 
 .keys_container{
  
   display: grid;
   margin: 20px;
   height: 80%;
   grid-template-columns: repeat(5, 55px);
   grid-gap :10px;  
   padding: 10px;
   background-color: #e9e9e9;

   
 }
 button{
       outline: none;
       font-size: 18px;
       font-family: Verdana, Geneva, Tahoma, sans-serif;
        width: 55px;
        height: 55px;
        box-shadow: var(--shadow);
        border-radius: 10px;
        border: none;
        color: #141414;
        background-color: #a19b9b;
   }

   button:hover{
       background-color: #bbb3b3;
   }

   button:active{
       box-shadow: var(--shadow-inset);
   }
 
 .equal{
     grid-row: 4/6;
    grid-column: 5;
     height: 120px;
 }
 
 
 .number {

    color: rgb(255, 255, 255);
    background-color: #796266;
    }

 .minus {
        color: rgb(255, 255, 255);
        background-color: #796266;
    }

    .operator:focus{
        box-shadow: var(--shadow-inset);
    }

    .currency{
        font-size: 13px;
    }