/* Calculator container */
#calculator {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0a0a0a;
    border: 2px solid #0ff;
    border-radius: 20px;
    box-shadow: 0 0 20px #00f2ff;
    overflow: hidden;
    max-width: 400px;   /* smaller width */
    width: 100%;
    padding: 15px;      /* space around inside */
}

/* Display */
#display {
  width: 100%;
  padding: 15px;
  font-size: 2.2rem; 
  color: #00bfff;
  background-color: black;
  text-align: right;
  border: none;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 20px;
}

/* Button grid */
.keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;   /* smaller gap so everything fits */
}

/* Buttons */
button {
    padding: 20px;    /* keeps them uniform */
    border-radius: 50%;
    border: 2px solid #00eaff;
    background-color: #000;
    color: #00eaff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 0 10px #00eaff, inset 0 0 5px #00eaff;
}