styles.css

   /* Reset default margin and padding */
   * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   }
   
   body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: #e0e0e0; /* Light background for contrast */
   font-family: Arial, sans-serif;
   }
   
   .calculator {
   width: 100%;
   height: 100%;
   
   background: #ffffff; /* White background for a clean look */
   border-radius: 0px; /* Rounded corners for a modern feel */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
   display: flex;
   flex-direction: column;
   overflow: hidden;
   }
   
   .display {
   width: 100%;
   height: 70px;
   background: #333; /* Dark background for the display */
   color: #fff;
   text-align: right;
   font-size: 2em;
   border: none;
   padding: 15px;
   box-sizing: border-box;
   border-radius: 0px 0px 0 0;
   }
   
   .buttons {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   padding: 15px;
   }
   
   button {
   background: #f4f4f4; /* Light background for buttons */
   border: 1px solid #ddd; /* Light border for button definition */
   border-radius: 10px; /* Rounded corners for buttons */
   color: #333; /* Dark text color for contrast */
   font-size: 1.5em;
   padding: 20px;
   cursor: pointer;
   transition: background 0.2s, box-shadow 0.2s;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
   }
   
   button:hover {
   background: #e0e0e0; /* Slightly darker background on hover */
   }
   
   button:active {
   background: #ccc; /* Even darker background on click */
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Less shadow on click */
   }
   
   /* Distinguish special buttons (e.g., remove, clear) */
   button.remove {
   background: #ff6f61; /* A distinct color for remove and clear */
   color: white;
   border: none; /* Remove border for special buttons */
   }
   
   button.remove:hover {
   background: #ff3d2e;
   }
   
   button.remove:active {
   background: #e03a27;
   }
   
   button.equal {
   background: #0000FF; /* A distinct color for remove and clear */
   color: white;
   border: none; /* Remove border for special buttons */
   }
   
   button.equal:hover {
   background: #ff3d2e;
   }
   
   button.equal:active {
   background: #e03a27;
   }
   @media (max-width: 600px) {
   .calculator {
   width: 100%;
   box-shadow: none;
   }
   
   .buttons {
   grid-template-columns: repeat(4, 1fr);
   }
   
   button {
   font-size: 1.2em;
   padding: 15px;
   }
   }