.calculator {
  max-width: 400px; /* keeps it compact */
  margin: 50px auto; /* centers on screen */
  padding: 20px;
  border-radius: 20px; /* rounded corners */
  background: #f8f9fa; /* light card */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* subtle depth */
}
#display {
  font-size: 2rem; /* easy to read */
  height: 60px;
  padding: 10px;
  border-radius: 10px;
  background: #e9ecef;
  text-align: right; /* numbers aligned right */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* subtle inner shadow */
}
button {
  font-size: 1.5rem; /* comfortable click size */
  border-radius: 10px;
  transition: transform 0.1s ease, box-shadow 0.1s ease; /* click animation */
}
button:hover {
  filter: brightness(110%);
}

button:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}