body{
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: hsl(0, 0%, 30%);
   }
   
   #calculator{
      font-family: Arial, Helvetica, sans-serif; 
      background-color: hsl(0, 0%, 15%);
      border-radius: 15px;
      width: 100%;
      max-width: 350px;
      overflow: hidden;
      margin: 20px;
   }
   
   #display{
   width: 100%;
   padding: 15px;
   font-size: clamp(2rem, 8vw, 3.5rem);
   text-align: left;
   border: none;
   background-color: hsl(0, 0%, 20%);
   color: white;
   box-sizing: border-box;
   }

   
   #keys {
      display: grid; 
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 20px;
   }
   
   button{
       width: 100%;
       aspect-ratio: 1;
       min-height: 60px;
       border-radius: 40px;
       border: none;
       background-color: hsl(0, 0%, 30%);
       color: white;
       font-size: clamp(1.5rem, 4vw, 2.2rem);
       font-weight: bold;
       cursor: pointer;
       transition: background-color 0.2s ease;
   }
   
   button:hover{
       background-color: hsl(0, 0%, 40%);
   }
   
   button:active{
       background-color: hsl(0, 0%, 50%);
   }
   
   .operator-btn{
       background-color: hsl(39, 100%, 55%);
   }
   
   .operator-btn:hover{
       background-color: hsl(39, 100%, 65%);
   }
   
   .operator-btn:active{
       background-color: hsl(39, 100%, 75%);
   }
   
   /* Mobile responsiveness */
   @media (max-width: 480px) {
       #calculator {
           margin: 10px;
           border-radius: 10px;
       }
       
       #keys {
           padding: 15px;
           gap: 8px;
       }
       
       #display {
           padding: 15px;
       }
   }