:root {
  --text-color: white;
  --text-color-dim: hsl(0, 0%, 80%);
  --calculator-color: hsl(0, 0%, 16%);
  --calculator-font: "Segoe UI";
  color: var(--text-color);
  font-family: var(--calculator-font), "serif";
}

body {
  background-color: black;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

#calc-body {
  background-color: var(--calculator-color);
  width: 370px;
  min-height: 500px;
  display: flex;
  padding: 4px;
  box-sizing: border-box; /*Prevents padding from resizing parent*/
  flex-direction: column;
  justify-content: flex-end;
}

#calc-display-previous {
  margin: 5px 5px 0 5px;
  color: var(--text-color-dim);
  font-size: 30px;
  display: flex;
  text-align: right;
  word-wrap: break-word;
  word-break: break-all;
  align-items: flex-end;
  justify-content: flex-end;
}

#calc-display-current {
  height: 80px;
  font-size: 60px;
  display: flex;
  text-align: right;
  word-wrap: break-word;
  word-break: break-all;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.button {
  user-select: none;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  --button-brightness: 0%;
  background-color: hsl(0, 0%, var(--button-brightness));
}

.button:hover {
  --button-brightness: 10%;
}

.button:active, .button.active {
  /*Bug: brightness filter applied by appending active class only applies to text*/
  --button-brightness: 20%;
}

#clear-button {
  grid-column: 1/3;
  background-color: hsl(2, 58%, calc(var(--button-brightness) + 20%));
}

#delete-button {
  background-color: hsl(240, 58%, calc(var(--button-brightness) + 20%));
}

#equals-button {
  background-color: hsl(220, 58%, calc(var(--button-brightness) + 20%));
}

.button-operator {
  background-color: hsl(0, 0%, calc(var(--button-brightness) + 7%));
}

#calc-panel {
  min-height: 300px;
  display: grid;
  font-size: 25px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
}