body{
    /* display: flex; */
    justify-content: center;
    align-items: center;
    height: 500px;
    background-image: url(./01.png) ;
    background-size:contain
}
.calculator{
    background: rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 1px 1px 8px 10px   rgba(168, 64, 64, 0.77);
    width: 300px;
    margin-left: 600px;
    margin-top: 120px;
    border: 2px solid white;
}

.btn {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 10px;
  justify-content: center;
}
button {
  font-size: 1.2em;
  padding: 10px;
  border: none;
  background: #4CAF50;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #45a049;
}

#display {
  width: 320px;
  height: 50px;
  font-size: 1.8em;
  text-align: left;
  margin-left: 40px;
  padding-right: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #000000;
  margin-left: 600px;
  box-shadow: 1px 1px 8px 10px   rgba(168, 64, 64, 0.77);
  color: white;
}
#display::placeholder{
  color: white;
}
@media (max-width:420px){
.display{font-size:36px}
.btn{min-width:64px;padding:8px 10px}
}