body {
  /* font-family: Arial, sans-serif; */
  background: #f0f0f0;
  display: flex;              
  /* height: 100vh; */
  justify-content: center;
  /* align-items: center; */
}

.calculator {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 8px 15px rgba(73, 1, 255, 0.1);
  width: 300px;
}

#display {
  width: 100%;
  font-size: 2em;
  margin-bottom: 15px;
  padding: 10px;
  text-align: right;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.buttons {
  display: grid;
   grid-template-columns: repeat(4, auto); /*4 columns , Make a 4 columns grid container */
  grid-gap: 1px;   /* gap between adjacent buttons */
}



button {
  padding: 20px;
  font-size: 1.2em;
  border: none;
  border-radius: 5px;
  background: #eee;
  transition: background 0.3s;
}

button:hover {
  background:red;
}

button:active {
  background:green;
}