* {
  box-sizing: border-box;
}

/* Fundo */

:root{
  --bg: #0b0f17;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(98, 0, 255, .25), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(0, 255, 210, .18), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(255, 190, 0, .12), transparent 60%),
    var(--bg);
}

/* Calculadora */

.container {
  background: #1f2328;       
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.container h1 {
  margin: 0;
  color: #fff;                 
  text-align: center;
  font-size: 22px;
}

.calculadora {
  border-collapse: separate;
  border-spacing: 6px;         
}

.display {
  width: 100%;
  height: 50px;
  font-size: 22px;
  padding: 10px 12px;
  border: none;
  border-radius: 5px;
  outline: none;
  text-align: right;
}

.btn {
  width: 70px;
  height: 50px;
  border: none;
  border-radius: 5px;
  background: #2f343a;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

.btn:hover {
  background: #3a4047;
}

.btn:active {
  background: #22262b;
}