body{
   display:flex;
   align-items: center;
   justify-content: center;
   width: 300px;
   height: 90% ;
   min-height: 100vh; 
   width: 100%;       
   margin: 0;        
   background: #222;
   
   
    
}

#call{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    max-width: 300px;
    justify-content: center;
    height: 50%;
    width: 90%;
    
    background-color:#4d4d4d;
    border-radius: 50px;
  
    
    

   padding-top: 40px !important;
}
#keys{
    
    padding: 5px;
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    
    
   
}
#keys button{
      padding: 3px;
      font-family:  'Times New Roman', serif;
      text-align: center;
      height: 60px;
      width: 60px;
      font-weight: 200;
     

      
       
    font-size: 3em;
    border: none;
      background-color:#D6D85D;
     border-radius: 7cm;
     cursor: pointer;}
.op {
  background-color: black !important;
  color: white;
}


input{
    padding-left: 50px;

    font-size: 2em;
    height: 70px;
    border: none;
    background-color:hsl(0, 0%, 70%);
    border-radius: 1cm;
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
     margin-bottom:30px;
    

}
#keys button:hover{
    background-color:hsl(63, 100%, 80%);

}
#keys button:active{
    background-color:hsl(63, 100%,100%);

}
.op:hover{
     background-color:hsl(0, 0%,40%)!important;

}
.op:active{
     background-color:hsl(0, 0%,60%)!important;

}
@media (max-width: 768px) {
   body {
      display: flex;          
      align-items: center;    
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      padding: 0;
   }

   #call {
      width: 90%;              
      max-width: 300px;        
      margin: 2cm 0;           
       height: auto;           
   }
}