body{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#1e1e2f;
}

h1{
  color:white;
  text-align:center;
  margin-bottom:15px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#1e1e2f;
}

.calculator{
  background:#2c2c3e;
  padding:20px;
  border-radius:15px;
  width:320px;
  box-shadow:0 0 20px rgba(0,0,0,0.3);
}

#display{
  width:100%;
  height:60px;
  margin-bottom:20px;
  font-size:28px;
  text-align:right;
  padding:10px;
  border:none;
  border-radius:10px;
  background:#fff;
}

.buttons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}


button{
  height:60px;
  border:none;
  border-radius:10px;
  font-size:22px;
  cursor:pointer;
  transition:0.2s;
}
button:hover{
  transform:scale(1.05);
}

.equal{
  background:#ff9500;
  color:white;
}

.zero{
  grid-column:span 2;
}