.calculator{
      margin-top: 20px;
      justify-self:center ;
      display: grid;
      max-width: 330px;
      gap: 5px;
      box-shadow: 5px 1px 15px 1px #C0C0C0;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
}
.outPutScreen{
      max-height: 120px;
      max-width: 302.9px;
      padding-right: 10px;
      box-shadow: 5px 1px 15px 1px #C0C0C0;
      }
.oprationsAndNumberContiner{
      max-width: 300px;
      display: grid;
      grid-template-columns: repeat(4,75px);
      gap: 5px;
}
.tow-span{
      display: grid;
      grid-column: span 2;
      background-color: orange;
      border-color: orange;
      border-radius: 3px;
      align-content: center;
      font-size: 20px;
}
button{
      outline-color: white;
      text-align: center;
      border-color: white;
      background-color: #DCDCDC;
      outline: none;
      box-shadow: 5px 1px 15px 1px #C0C0C0;
      height: 60px;
      width: 100%;
      font-size: 20px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
button:hover{background-color: white; border-color:white; border-radius: 2px;}
input{
      height: 32px;
      width: 305px;
      font-size: 20px;
      cursor:context-menu;
      text-align: right;
}
#previousValue{
      border-top-left-radius:7px ;
      border-top-right-radius:7px ;
      border-bottom: none;
}
#currentValue{border-top: none;}
#previousValue:focus{
      border-top-left-radius:7px ;
      border-top-right-radius:7px ;
      border-bottom: none;
      outline: none;
}
#currentValue:focus{border-top: none;outline: none;}