:root {
  --color-darkblue: rgb(12, 28, 58);
  --color-lightyellow: rgb(211, 200, 186);
  --color-grayblue: rgb(89, 118, 145);
  --color-blue: rgb(110, 141, 198);
  --color-yellow: rgb(239, 206, 76);
  --color-lightred: rgb(213, 114, 114);
  --color-red: rgb(227, 99, 52);
}
body {
  background: linear-gradient(rgb(63, 63, 174),rgb(227, 99, 52));
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
}

#calculator {
  display: grid;
  grid-template-columns: repeat(4, 84px);
  grid-auto-rows: 72px;
  border-radius: 6px;
  border: 4px solid black;
  box-shadow: 2px 2px 10px black;
  background-color: black;
}

button {
  border-radius: 5px;
  border: 1px solid black;
  background-color: var(--color-lightyellow);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.display {
  grid-column: 1/5;
  background-color: var(--color-darkblue);
  border-radius: 5px;
  color: white;
  text-align: right;
}

#display-previous,
#display {
  height: 34px;
  padding-right: 8px;
  font-size: 24px;
  padding-top: 4px;
}

#display-previous {
  color: var(--color-yellow);
}

#display-current {
  color: var(--color-lightyellow);
}

#clear {
  background-color: var(--color-grayblue);
}

#delete {
  background-color: var(--color-lightred);
}

#zero {
  grid-column: 4/5;
  grid-row: 5/7;
}

#equals {
  grid-column: 1/3;
  background-color: var(--color-blue);
}

.symbol {
  background-color: var(--color-lightorange);
}