*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: #0f0f0f;
  color: #fff;
  font-family: 'Segoe UI',  sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.calculator{
  background: #1e1e1e;
  padding-left: 2rem;
  border-radius: 1rem;
  box-shadow:  0 0 20px  rgba(0,255,255,0.3);
}
.display{
  width: 100%;
  height: 60px;
  background: #000;
  border: none;
  font-size: 2rem;
  color: #0ff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-align: right;
  margin-bottom: 1rem;
}
.buttons{
  display: grid;
  grid-template-columns: repeat(4,70px);
  grid-gap:10px;
  justify-content: center;

}
button{
  height: 60px;
  font-size: 1.5rem;
  border: none;
  border-radius: 0.5rem;
  background: #333;
  color: #0ff;
  cursor: pointer;
  transition: 0.2s;
}
button:hover{
  background: #0ff;
  color: #000;
}
.operator{
  background: #005f5f;
}
.equal{
  background: #008080;
  grid-column: span 2;
}
.clear{
  background: #ff0044;
  color: #fff;
}